vite.config.ts

import VueI18n from '@intlify/vite-plugin-vue-i18n';
import Vue from '@vitejs/plugin-vue';
import LinkAttributes from 'markdown-it-link-attributes';
import Prism from 'markdown-it-prism';
// eslint-disable-next-line import/order
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';
import Components from 'unplugin-vue-components/vite';
import { defineConfig } from 'vite';
import Inspect from 'vite-plugin-inspect';
import Markdown from 'vite-plugin-md';
import Pages from 'vite-plugin-pages';
import { VitePWA } from 'vite-plugin-pwa';
import Layouts from 'vite-plugin-vue-layouts';
import WindiCSS from 'vite-plugin-windicss';

const markdownWrapperClasses = 'prose prose-sm m-auto text-left';

export default defineConfig({
   resolve: {
      alias: {
         '~/': `${path.resolve(__dirname, 'src')}/`,
      },
   },
   plugins: [
      Vue({
         include: [/\.vue$/, /\.md$/],
      }),

      // https://github.com/hannoeru/vite-plugin-pages
      Pages({
         extensions: ['vue', 'md'],
      }),

      // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
      Layouts(),

      // https://github.com/antfu/unplugin-auto-import
      AutoImport({
         imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
         dts: 'src/auto-imports.d.ts',
      }),

      // https://github.com/antfu/unplugin-vue-components
      Components({
         // allow auto load markdown components under `./src/components/`
         extensions: ['vue', 'md'],

         // allow auto import and register components used in markdown
         include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

         // custom resolvers
         resolvers: [
            // auto import icons
            // https://github.com/antfu/unplugin-icons
            IconsResolver({
               componentPrefix: '',
               // enabledCollections: ['carbon']
            }),
         ],

         dts: 'src/components.d.ts',
      }),

      // https://github.com/antfu/unplugin-icons
      Icons({
         autoInstall: true,
      }),

      // https://github.com/antfu/vite-plugin-windicss
      WindiCSS({
         safelist: markdownWrapperClasses,
      }),

      // https://github.com/antfu/vite-plugin-md
      // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
      Markdown({
         wrapperClasses: markdownWrapperClasses,
         headEnabled: true,
         markdownItSetup(md) {
            // https://prismjs.com/
            md.use(Prism);
            md.use(LinkAttributes, {
               pattern: /^https?:\/\//,
               attrs: {
                  target: '_blank',
                  rel: 'noopener',
               },
            });
         },
      }),

      // https://github.com/antfu/vite-plugin-pwa
      VitePWA({
         strategies: 'injectManifest',
         srcDir: 'src',
         filename: 'sw.ts',
         base: '/',
      }),

      // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
      VueI18n({
         runtimeOnly: true,
         compositionOnly: true,
         include: [path.resolve(__dirname, 'locales/**')],
      }),

      // https://github.com/antfu/vite-plugin-inspect
      Inspect({
         // change this to enable inspect for debugging
         enabled: false,
      }),
   ],

   server: {
      fs: {
         strict: true,
      },
   },

   // https://github.com/antfu/vite-ssg
   ssgOptions: {
      script: 'async',
      formatting: 'minify',
   },

   optimizeDeps: {
      include: ['vue', 'vue-router', '@vueuse/core', '@vueuse/head'],
      exclude: ['vue-demi'],
   },
});