Updates

• degrade @vueuse/core to 5.x

  From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1

  refs: https://vueuse.org/guide/

• remove vue-router auto import in vite.config.js

  It will auto import useRoute & useRouter, but it doesn't exist in [email protected]

• refresh yarn.lock & auto-imports.d.ts

In the Commits on Mar 27, 2021（7c3c055600d5c43156ae720f0add52a62398791e）

Incorrect spacing between Feature components ( Features.vue ).

      <div class="w-full py-4 pr-4 xs:pl-4 md:w-1/2 lg:w-1/4">
        <Feature
          title="vite-plugin-vue2"
          text="Vue 2 support for Vite"
          url="https://github.com/underfin/vite-plugin-vue2"
        />
      </div>
      <div class="w-full p-4 md:w-1/2 lg:w-1/4">
        <Feature
          title="vite-plugin-components"
          text="On demand components auto importing for Vite"
          url="https://github.com/antfu/vite-plugin-components"
        />
      </div>

I don't know if the author did it on purpose.

I guess I should write it this way——

      <div class="w-full py-4 px-2 xs:pr-4 md:w-1/2 lg:w-1/4">
        <Feature
          title="vite-plugin-vue2"
          text="Vue 2 support for Vite"
          url="https://github.com/underfin/vite-plugin-vue2"
        />
      </div>
      <div class="w-full py-4 px-2 xs:pr-4 md:w-1/2 lg:w-1/4">
        <Feature
          title="vite-plugin-components"
          text="On demand components auto importing for Vite"
          url="https://github.com/antfu/vite-plugin-components"
        />
      </div>

my vite config according vite docs

import path from 'path'
import { defineConfig } from 'vite'
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
import WindiCSS from 'vite-plugin-windicss'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import ScriptSetup from 'unplugin-vue2-script-setup/vite'
import AutoImport from 'unplugin-auto-import/vite'

const root = path.resolve(__dirname, 'src')
const outDir = path.resolve(__dirname, 'dist')

const config = defineConfig({
  // root,
  resolve: {
    alias: {
      '@': `${path.resolve(__dirname, 'src')}`,
    },
    dedupe: ['vue-demi'],
  },

  build: {
    // outDir,
    minify: true,
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        about: path.resolve(__dirname, 'about', 'index.html'),
      },
    },
  },

  plugins: [
    Vue2(),
    ScriptSetup(),
    WindiCSS(),
    Components({
      resolvers: [
        IconsResolver({
          componentPrefix: '',
        }),
      ],
      dts: 'src/components.d.ts',
    }),
    Icons(),
    AutoImport({
      imports: ['@vue/composition-api', 'vue-router', '@vueuse/core'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],

  server: {
    port: 3333,
  },
})

export default config

open about path ：http://localhost:3333/about it is 404.

How can i fix it?

Dear @lstoeferle, I've tried to run your project locally but gets into problem.

Here are the steps of what I've done:

• git clone lstoeferle/vite-vue2-windicss-starter
• pnpm install
• pnpm run dev

Here are the error:

> [email protected] dev E:\Data\Projects\testing\vue-test\vite-vue2-windicss-starter
> vite

error when starting dev server:
Error: The following dependencies are imported but could not be resolved:

  vue-demi (imported by E:/Data/Projects/testing/vue-test/vite-vue2-windicss-starter/src/main.ts)

Are they installed?
    at optimizeDeps (E:\Data\Projects\testing\vue-test\vite-vue2-windicss-starter\node_modules\.pnpm\[email protected]\node_modules\vite\dist\node\chunks\dep-00e79b84.js:67615:15)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async runOptimize (E:\Data\Projects\testing\vue-test\vite-vue2-windicss-starter\node_modules\.pnpm\[email protected]\node_modules\vite\dist\node\chunks\dep-00e79b84.js:68170:48)
    at async Server.httpServer.listen (E:\Data\Projects\testing\vue-test\vite-vue2-windicss-starter\node_modules\.pnpm\[email protected]\node_modules\vite\dist\node\chunks\dep-00e79b84.js:68184:17)
 ERROR  Command failed with exit code 1.

Looks like vue-demi is missing from package.json.

Regards,

Martinus

Things that still needs to be addressed

1. resolving aliases when importing assets -> should be fixed with the newest vite plugin ✅
2. Some unplugin plugins rely on vue-template-compiler while vue 2.7 removed this dependency. But i guess they will be updated on 2.7 is out
3. vue composition api auto imports

I have updated vite-plugin-icons to support Vue 2. Both vite-plugin-icons and vite-plugin-components now detect the Vue version automatically, no configure needed.

vite-plugin-pages and vite-plugin-md also support Vue 2 now. If you'd like, I can set them up in another PR.

This PR introduces a refactored README which includes a link to the deployed live demo. In addition, there are several small refactorings in code.

Closes #2

Hi @lstoeferle, I pulled it down and get it running. I'd say I am really impressed by the template layouts and the code structure. I think it will be great for people to have a quick preview of it if you can deploy it as a live demo. 👍