Amend dynamic imports

2025-07-15 11:04:21 +02:00
parent bb114f16e0
commit 79814b18b1
21 changed files with 203 additions and 98 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
      },
      "devDependencies": {
        "@openapitools/openapi-generator-cli": "^2.20.2",
+        "@types/node": "^24.0.14",
        "@vitejs/plugin-vue": "^6.0.0",
        "@vue/tsconfig": "^0.7.0",
        "typescript": "~5.7.2",
@@ -1381,6 +1382,16 @@
      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
      "license": "MIT"
    },
+    "node_modules/@types/node": {
+      "version": "24.0.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.14.tgz",
+      "integrity": "sha512-4zXMWD91vBLGRtHK3YbIoFMia+1nqEz72coM42C5ETjnNCa/heoj7NT1G67iAfOqMmcfhuCZ4uNpyz8EjlAejw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.8.0"
+      }
+    },
    "node_modules/@types/web-bluetooth": {
      "version": "0.0.21",
      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
@@ -4531,6 +4542,13 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/undici-types": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+      "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
    "node_modules/universalify": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
  },
  "devDependencies": {
    "@openapitools/openapi-generator-cli": "^2.20.2",
+    "@types/node": "^24.0.14",
    "@vitejs/plugin-vue": "^6.0.0",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.7.2",
--- a/src/api/openapi/docs/Card.md
+++ b/src/api/openapi/docs/Card.md
@@ -9,7 +9,7 @@ Name | Type | Description | Notes
 **cardType** | [**CardType**](CardType.md) |  | [default to undefined]
 **description** | **string** |  | [default to undefined]
 **name** | **string** |  | [default to undefined]
-**cardPrints** | [**Set&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
+**cardPrints** | [**Array&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
 **monsterEffect** | **string** |  | [optional] [default to undefined]
 **attack** | **number** |  | [optional] [default to undefined]
 **defense** | **number** |  | [optional] [default to undefined]
--- a/src/api/openapi/docs/MonsterCard.md
+++ b/src/api/openapi/docs/MonsterCard.md
@@ -9,7 +9,7 @@ Name | Type | Description | Notes
 **cardType** | [**CardType**](CardType.md) |  | [default to undefined]
 **description** | **string** |  | [default to undefined]
 **name** | **string** |  | [default to undefined]
-**cardPrints** | [**Set&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
+**cardPrints** | [**Array&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
 **monsterEffect** | **string** |  | [optional] [default to undefined]
 **attack** | **number** |  | [optional] [default to undefined]
 **defense** | **number** |  | [optional] [default to undefined]
--- a/src/api/openapi/docs/SpellCard.md
+++ b/src/api/openapi/docs/SpellCard.md
@@ -9,7 +9,7 @@ Name | Type | Description | Notes
 **cardType** | [**CardType**](CardType.md) |  | [default to undefined]
 **description** | **string** |  | [default to undefined]
 **name** | **string** |  | [default to undefined]
-**cardPrints** | [**Set&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
+**cardPrints** | [**Array&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
 **type** | [**SpellCardType**](SpellCardType.md) |  | [default to undefined]

 ## Example
--- a/src/api/openapi/docs/TrapCard.md
+++ b/src/api/openapi/docs/TrapCard.md
@@ -9,7 +9,7 @@ Name | Type | Description | Notes
 **cardType** | [**CardType**](CardType.md) |  | [default to undefined]
 **description** | **string** |  | [default to undefined]
 **name** | **string** |  | [default to undefined]
-**cardPrints** | [**Set&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
+**cardPrints** | [**Array&lt;CardPrint&gt;**](CardPrint.md) |  | [default to undefined]
 **type** | [**TrapCardType**](TrapCardType.md) |  | [default to undefined]

 ## Example
--- a/src/api/openapi/model/monster-card.ts
+++ b/src/api/openapi/model/monster-card.ts
@@ -67,10 +67,10 @@ export interface MonsterCard {
    'name': string;
    /**
     * 
-     * @type {Set<CardPrint>}
+     * @type {Array<CardPrint>}
     * @memberof MonsterCard
     */
-    'cardPrints': Set<CardPrint>;
+    'cardPrints': Array<CardPrint>;
    /**
     * 
     * @type {string}
--- a/src/api/openapi/model/spell-card.ts
+++ b/src/api/openapi/model/spell-card.ts
@@ -55,10 +55,10 @@ export interface SpellCard {
    'name': string;
    /**
     * 
-     * @type {Set<CardPrint>}
+     * @type {Array<CardPrint>}
     * @memberof SpellCard
     */
-    'cardPrints': Set<CardPrint>;
+    'cardPrints': Array<CardPrint>;
    /**
     * 
     * @type {SpellCardType}
--- a/src/api/openapi/model/trap-card.ts
+++ b/src/api/openapi/model/trap-card.ts
@@ -55,10 +55,10 @@ export interface TrapCard {
    'name': string;
    /**
     * 
-     * @type {Set<CardPrint>}
+     * @type {Array<CardPrint>}
     * @memberof TrapCard
     */
-    'cardPrints': Set<CardPrint>;
+    'cardPrints': Array<CardPrint>;
    /**
     * 
     * @type {TrapCardType}
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,50 +8,36 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
-    Accordion: typeof import('primevue/accordion')['default']
    Avatar: typeof import('primevue/avatar')['default']
    Badge: typeof import('primevue/badge')['default']
    Button: typeof import('primevue/button')['default']
-    Card: typeof import('primevue/card')['default']
    CardFilterPanel: typeof import('./components/CardFilterPanel.vue')['default']
    CardListComponent: typeof import('./components/CardListComponent.vue')['default']
    CardListExpansion: typeof import('./components/CardListExpansion.vue')['default']
    CardTable: typeof import('./components/CardTable.vue')['default']
    Carousel: typeof import('primevue/carousel')['default']
-    Checkbox: typeof import('primevue/checkbox')['default']
    Column: typeof import('primevue/column')['default']
    CustomTag: typeof import('./components/CustomTag.vue')['default']
    DataTable: typeof import('primevue/datatable')['default']
-    DataView: typeof import('primevue/dataview')['default']
-    DeckIcon: typeof import('./components/DeckIcon.vue')['default']
    Divider: typeof import('primevue/divider')['default']
+    DynamicAsset: typeof import('./components/DynamicAsset.vue')['default']
    Fieldset: typeof import('primevue/fieldset')['default']
    FloatLabel: typeof import('primevue/floatlabel')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
-    IconField: typeof import('primevue/iconfield')['default']
    Image: typeof import('primevue/image')['default']
-    InputIcon: typeof import('primevue/inputicon')['default']
    InputNumber: typeof import('primevue/inputnumber')['default']
    InputText: typeof import('primevue/inputtext')['default']
    LinkArrowsComponent: typeof import('./components/LinkArrowsComponent.vue')['default']
-    Listbox: typeof import('primevue/listbox')['default']
    Menubar: typeof import('primevue/menubar')['default']
    MonsterCardTypeTag: typeof import('./components/MonsterCardTypeTag.vue')['default']
-    MultiSelect: typeof import('primevue/multiselect')['default']
    Panel: typeof import('primevue/panel')['default']
    ProgressBar: typeof import('primevue/progressbar')['default']
-    Rating: typeof import('primevue/rating')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    ScrollPanel: typeof import('primevue/scrollpanel')['default']
    SelectButton: typeof import('primevue/selectbutton')['default']
    Slider: typeof import('primevue/slider')['default']
    SplitButton: typeof import('primevue/splitbutton')['default']
-    Splitter: typeof import('primevue/splitter')['default']
-    SplitterPanel: typeof import('primevue/splitterpanel')['default']
-    TabPanel: typeof import('primevue/tabpanel')['default']
    Tag: typeof import('primevue/tag')['default']
    Textarea: typeof import('primevue/textarea')['default']
-    VirtualScroller: typeof import('primevue/virtualscroller')['default']
  }
 }
--- a/src/components/CardFilterPanel.vue
+++ b/src/components/CardFilterPanel.vue
@@ -94,11 +94,12 @@

          >
            <template #option="slotProps" class="">
-              <img
-                  class="size-5"
-                  alt="Attribute Icon"
-                  :src="'/src/assets/' + slotProps.option + '.svg'"
-              >
+<!--              <img-->
+<!--                  class="size-5"-->
+<!--                  alt="Attribute Icon"-->
+<!--                  :src="'/assets/' + slotProps.option + '.svg'"-->
+<!--              >-->
+              <DynamicAsset :attribute="slotProps.option" class="size-5"/>
            </template>
          </SelectButton>

@@ -174,12 +175,12 @@
 <script setup lang="ts">
 import {type Ref, ref} from "vue";
 import {
-  Attribute, type CardServiceGetCardPageRequest,
+  Attribute,
+  type CardServiceGetCardPageRequest,
  MonsterCardSubType,
-  MonsterCardType,
-  SpellCardType,
-  TrapCardType
+  MonsterCardType
 } from "../api/openapi";
+import DynamicAsset from "@/components/DynamicAsset.vue";

 const filters: Ref<CardServiceGetCardPageRequest> = defineModel({
  required: true,
@@ -189,13 +190,6 @@ const emit = defineEmits(['update:modelValue', 'search'])

 const linkArrows = ref([])

-const selectedCardTypes: Ref<string[]> = ref([]);
-const selectedMonsterCardTypes: Ref<string[]> = ref([]);
-const selectedMonsterCardSubTypes: Ref<string[]> = ref([]);
-const selectedMonsterAttributes: Ref<string[]> = ref([]);
-const selectedSpellCardTypes: Ref<string[]> = ref([]);
-const selectedTrapCardTypes: Ref<string[]> = ref([]);
-
 const cardTypes: Ref<string[]> = ref([
  'MONSTER',
  'SPELL',
@@ -215,14 +209,6 @@ const monsterCardSubTypes: Ref<string[]> = ref(
    Object.values(MonsterCardSubType)
 );

-const spellCardTypes: Ref<string[]> = ref(
-    Object.values(SpellCardType)
-);
-
-const trapCardTypes: Ref<string[]> = ref(
-    Object.values(TrapCardType)
-);
-
 const updateField = (field: string, value?: any) => {
  emit('update:modelValue', {
    ...filters.value,
--- a/src/components/CardListExpansion.vue
+++ b/src/components/CardListExpansion.vue
@@ -28,16 +28,17 @@

              <!-- Monster Card properties-->
              <template v-if="isMonsterCard(card)">
-                <div class="flex items-center gap-2" v-if="card.subTypes.length > 0">
+                <div class="flex items-center gap-2" v-if="(card.subTypes as any).length > 0">
                  <i class="size-5 text-center pi pi-asterisk"/>
                  <Tag severity="danger" :value="getFormattedMonsterCardSubTypes(card)"/>
                </div>
                <div class="flex items-center gap-2">
-                  <img
-                      class="size-5"
-                      alt="Attribute Icon"
-                      :src="'/src/assets/' + card.attribute + '.svg'"
-                  >
+<!--                  <img-->
+<!--                      class="size-5"-->
+<!--                      alt="Attribute Icon"-->
+<!--                      :src="'/assets/' + card.attribute + '.svg'"-->
+<!--                  >-->
+                  <DynamicAsset :attribute="card.attribute" class="size-5"/>
                  <Tag severity="danger" :value="card.attribute"/>
                </div>
                <div class="flex items-center gap-2">
@@ -128,8 +129,9 @@ import TabPanel from "primevue/tabpanel";
 import Tab from "primevue/tab";
 import TabList from "primevue/tablist";
 import {type Card, type MonsterCard} from "../api/openapi";
-import type {Ref} from "vue";
+import {type Ref} from "vue";
 import {isMonsterCard} from "../util/card-type-util.ts";
+import DynamicAsset from "@/components/DynamicAsset.vue";

 const card: Ref<Card> = defineModel({
  required: true
@@ -141,4 +143,5 @@ const getFormattedMonsterCardSubTypes = (monsterCard: MonsterCard) => {
  ]
  return subTypeArray.join(" / ")
 }
+
 </script>
--- a/src/components/CardTable.vue
+++ b/src/components/CardTable.vue
@@ -31,7 +31,11 @@
            <img src="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg" alt="image" width="75" />
          </template>
          <template #preview="slotProps">
-            <img src="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            <img
+                src="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg"
+                alt="preview"
+                :style="slotProps.style"
+            />
          </template>
        </Image>
 <!--        <Avatar image="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg" class="mr-2" size="xlarge" shape="circle" />-->
@@ -117,11 +121,11 @@ const handlePaging = async (e: DataTablePageEvent) => {

 }

-const handleSorting = (e: DataTableSortEvent) => {
+const handleSorting = (_: DataTableSortEvent) => {
  console.log('sort')
 }

-const handleFiltering = (e: DataTableFilterEvent) => {
+const handleFiltering = (_: DataTableFilterEvent) => {
  console.log('filter')
 }

--- a/src/components/DynamicAsset.vue
+++ b/src/components/DynamicAsset.vue
@@ -0,0 +1,66 @@
+<template>
+  <!-- Best approach: Use pre-loaded assets -->
+  <img v-if="assetSrc" :src="assetSrc" :alt="attribute" />
+
+  <!-- Fallback: Dynamic import -->
+  <img v-else-if="assetUrl" :src="assetUrl" :alt="attribute" />
+
+  <!-- Error state -->
+  <div v-else class="asset-error">
+    Missing asset: {{ attribute }}.svg
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, ref} from 'vue';
+
+interface ModuleImportInterface {
+  default: string;
+}
+
+const props = defineProps({
+  attribute: {
+    type: String,
+    required: true
+  }
+});
+
+const assetUrl = ref('');
+
+// Better solution: Pre-import known assets at build time
+const knownAssets: Record<string, ModuleImportInterface> = import.meta.glob('@/assets/*.svg', { eager: true });
+
+const getAssetUrl = (name: string) => {
+  const assetKey = Object.keys(knownAssets).find(key =>
+      key.includes(`/${name}.svg`)
+  );
+  if (assetKey && knownAssets[assetKey]) {
+    return knownAssets[assetKey]?.default ?? ''
+  } else {
+    return ''
+  }
+};
+
+const loadAsset = async () => {
+  try {
+    const module = await import(/* @vite-ignore */ `../assets/${props.attribute}.svg`);
+    assetUrl.value = module.default;
+  } catch (e) {
+    console.error(`Error loading asset: ${props.attribute}.svg`, e);
+  }
+};
+
+const assetSrc = computed(() => getAssetUrl(props.attribute));
+
+onMounted(() => {
+  if (!assetSrc.value) loadAsset();
+});
+</script>
+
+<style scoped>
+.asset-error {
+  color: #ff5252;
+  border: 1px dashed currentColor;
+  padding: 0.5rem;
+}
+</style>
--- a/src/util/assets.ts
+++ b/src/util/assets.ts
@@ -0,0 +1,19 @@
+import darkAttribute from "/src/assets/DARK.svg"
+import divineAttribute from "/src/assets/DIVINE.svg"
+import earthAttribute from "/src/assets/EARTH.svg"
+import fireAttribute from "/src/assets/FIRE.svg"
+import laughAttribute from "/src/assets/LAUGH.svg"
+import lightAttribute from "/src/assets/LIGHT.svg"
+import waterAttribute from "/src/assets/WATER.svg"
+import windAttribute from "/src/assets/WIND.svg"
+
+export {
+  darkAttribute,
+  divineAttribute,
+  earthAttribute,
+  fireAttribute,
+  laughAttribute,
+  lightAttribute,
+  waterAttribute,
+  windAttribute
+}
--- a/src/util/card-type-util.ts
+++ b/src/util/card-type-util.ts
@@ -1,14 +1,12 @@
 import type {
  Card,
  CardType,
-  MonsterCard, MonsterCardSubType,
+  MonsterCard,
  MonsterCardType,
  SpellCard, SpellCardType,
  TrapCard, TrapCardType
 } from "../api/openapi";

-type CardSubTypes = MonsterCardType | TrapCardType | SpellCardType
-
 export const getCardType = (card: Card) => {
  switch (card.cardType) {
    case "MONSTER":
@@ -26,14 +24,6 @@ export const isMonsterCard = (card: Card): card is MonsterCard => {
  return card.cardType === "MONSTER"
 }

-export const isTrapCard = (card: Card): card is TrapCard => {
-  return card.cardType === "TRAP"
-}
-
-export const isSpellCard = (card: Card): card is SpellCard => {
-  return card.cardType === "SPELL"
-}
-
 export const getMonsterCardType = (monsterCard: MonsterCard) => {
  return `${monsterCard.type} MONSTER `
 }
--- a/src/views/JobsView.vue
+++ b/src/views/JobsView.vue
@@ -44,7 +44,7 @@ const jobTypeOptions: Ref<JobType[]> = ref(
    Object.values(JobType)
 )

-const getJobTypeSeverity = (job: JobDto) => {
+const getJobTypeSeverity = (_: JobDto) => {
  return "primary"
 }

@@ -70,9 +70,10 @@ const getCompletionPercentage = (job: JobDto) => {
 }

 onMounted(async () => {
-  jobs.value = (await jobService.getCardSetImportJobPage(
-      page.value,
-      pageSize.value
+  jobs.value = (await jobService.getCardSetImportJobPage({
+        page: page.value,
+        pageSize: pageSize.value
+      }
  )).data.content

  console.log(jobs.value)
--- a/src/views/card/CardsView.vue
+++ b/src/views/card/CardsView.vue
@@ -34,7 +34,11 @@
                <img src="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg" alt="image" width="75" />
              </template>
              <template #preview="slotProps">
-                <img src="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+                <img
+                    src="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg"
+                    alt="preview"
+                    :style="slotProps.style"
+                />
              </template>
            </Image>
            <!--        <Avatar image="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg" class="mr-2" size="xlarge" shape="circle" />-->
@@ -100,14 +104,11 @@ import type {MutableCardRequest} from "../../api/mutableTypes.ts";
 const cardService: CardService = inject(CardServiceKey) as CardService;

 const cards: Ref<Card[]> = ref([])
-const page: Ref<number> = ref(0);
-const pageSize = ref(10);
 const pageCount: Ref<number> = ref(0);
 const totalRecords: Ref<number> = ref(0);
 const loading: Ref<boolean> = ref(true);
 const first = ref(0);
 const expandedCardRows: Ref<Card[]> = ref([]);
-const searchValue: Ref<string> = ref("");

 const filters: Ref<MutableCardRequest> = ref({
  name: null,
@@ -158,11 +159,11 @@ const handlePaging = async (e: DataTablePageEvent) => {
  await getGetCardPage(filters.value)
 }

-const handleSorting = (e: DataTableSortEvent) => {
+const handleSorting = (_: DataTableSortEvent) => {
  console.log('sort')
 }

-const handleFiltering = (e: DataTableFilterEvent) => {
+const handleFiltering = (_: DataTableFilterEvent) => {
  console.log('filter')
 }

--- a/src/views/set/SetsView.vue
+++ b/src/views/set/SetsView.vue
@@ -28,7 +28,12 @@
            </div>
          </template>
          <template #preview="slotProps">
-            <img src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            <!--suppress TypeScriptUnresolvedReference -->
+            <img
+                src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125"
+                alt="preview"
+                :style="slotProps.style"
+            />
          </template>
        </Image>
      </template>
@@ -67,10 +72,11 @@ const first = ref(0);

 const fetchCardSetPage = async (page: number, pageSize: number): Promise<void> => {
  loading.value = true;
-  const cardPage = (await setService.getCardSetPage(
-      null,
-      page,
-      pageSize
+  const cardPage = (await setService.getCardSetPage({
+        name: null,
+        page: page,
+        pageSize: pageSize
+      }
  )).data

  sets.value = cardPage.content
@@ -85,7 +91,7 @@ const handlePaging = async (e: DataTablePageEvent) => {
  await fetchCardSetPage(page.value, pageSize.value)
 }

-const handleSorting = (e: DataTableSortEvent) => {
+const handleSorting = (_: DataTableSortEvent) => {
  console.log('sort')
 }

--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -8,7 +8,12 @@
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,21 +1,40 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from "@tailwindcss/vite";
 import Components from 'unplugin-vue-components/vite'
 import {PrimeVueResolver} from "unplugin-vue-components/resolvers";
+import path from 'path';

 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
-      vue(),
-      tailwindcss(),
-      Components({
-          extensions: ['vue', 'md'],
-          include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-          dts: 'src/components.d.ts',
-          resolvers: [
-              PrimeVueResolver()
-          ]
-      }),
+    vue(),
+    tailwindcss(),
+    Components({
+      extensions: ['vue', 'md'],
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: 'src/components.d.ts',
+      resolvers: [
+        PrimeVueResolver()
+      ]
+    }),
  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    }
+  },
+  build: {
+    // @ts-ignore
+    assetsInclude: [
+      '**/*.svg'
+    ],
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/[name]-[hash][extname]',
+        chunkFileNames: 'chunks/[name].js',
+        entryFileNames: 'js/[name].js'
+      }
+    }
+  }
 })