Live Demo

Lightweight version of Vitesse

Dropped Features

• i18n
• Layouts
• SSG
• PWA
• Markdown

Features

• ⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 🎨 Windi CSS - next generation utility-first CSS framework

• 😃 Use icons from any icon sets, with no compromise

• 🔥 Use the new

  Comments

  • Errors in production

    I try to build the repo for production with: npm run build but no success when I publish the code on a live server (GitHub or my server on apache) it works in local with npx live-server dist --port=4000 --no-browser

    This the repo: https://github.com/electroheadfx/ARPA3

    Page error on github: https://electroheadfx.github.io/ARPA3/ 404 error

    on my website: http://efxdesign.fr/working/ARPA3/ I have differents errors: [Error] Did not parse stylesheet at 'http://efxdesign.fr/assets/index.44fc10bc.css' because non CSS MIME types are not allowed in strict mode. [Error] TypeError: 'text/html' is not a valid JavaScript MIME type.

    Any idea about ?

    thanks

    opened by electroheadfx 4
  • Multiple route levels

    Clear and concise description of the problem

    I tried to copied the logic over to a second route level by adding a, let's say "[place].vue" file inside a "[name]" folder based on the previous [name].vue file, but can't make it work. How would be an approach look like for multiple levels of dynamic routes?

    Suggested solution

    Add multiple dynamic route levels to doc

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    enhancement 

    opened by eddysalzmann 3
  • isDark ref value

    The reactivity in the Footer component doesn't work. It is necessary to use .value explicitly

    original:

    <div v-if="isDark" i-carbon-moon />
    <div v-else i-carbon-sun />
    

    fix:

    <div v-if="isDark".value i-carbon-moon />
    <div v-else i-carbon-sun />
    

    opened by kleinptr9 3
  • dynamic import not respecting /*! @vite-ignore */

    Describe the bug

    const bygonz = await import(CDNURL/*! @vite-ignore */)

    gets compiled to

    const bygonz = ([__temp, __restore] = _withAsyncContext(() => import(ztaxCDNURL)), __temp = await __temp, __restore(), __temp);

    and throws a warning

    The above dynamic import cannot be analyzed by Vite.
    See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
    

    is there a config flag somewhere that will pass along the comment to supress the warning?

    Reproduction

    https://stackblitz.com/edit/vitesse-lite-bygonz?file=src%2Fcomponents%2FFriendList.vue

    System Info

    its in stackblitz:
    
    ❯ npx envinfo --system --binaries --browsers
    ERR!: Failed to install package
    
    error Command failed with exit code 1
    

    but i get the same error locally:

      System:
        OS: macOS 10.15.7
        CPU: (4) x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
        Memory: 52.52 MB / 16.00 GB
        Shell: 3.5.0 - /usr/local/bin/fish
      Binaries:
        Node: 16.15.0 - ~/.local/share/nvm/v16.15.0/bin/node
        Yarn: 1.22.18 - ~/.local/share/nvm/v16.15.0/bin/yarn
        npm: 8.10.0 - ~/.local/share/nvm/v16.15.0/bin/npm
      Browsers:
        Safari: 15.4
    

    
    
    ### Used Package Manager
    
    npm
    
    ### Validations
    
    - [X] Follow our [Code of Conduct](https://github.com/antfu/.github/blob/main/CODE_OF_CONDUCT.md)
    - [X] Read the [Contributing Guide](https://github.com/antfu/contribute).
    - [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    - [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    - [X] The provided reproduction is a [minimal reproducible](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

    opened by gotjoshua 2
  • Vitesse lite + element plus -> no styles

    Describe the bug

    cloned the repo. installed element plus. used all the unplugin packages:

    // import Components from 'unplugin-vue-components/vite' import AutoImport from 'unplugin-auto-import/vite' // import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import ElementPlus from 'unplugin-element-plus/vite'

    did not work.

    added some scss link pre processor: // css: { // preprocessorOptions: { // scss: { // additionalData: '@use "~/styles/element/index.scss" as *;', // }, // }, // },

    did not work.

    what is wrong with the setup ? does it not work with auto imports ?

    @antfu @YunYouJun

    // vite config

    ///

    import path from 'path' import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import Pages from 'vite-plugin-pages' // import Components from 'unplugin-vue-components/vite' import AutoImport from 'unplugin-auto-import/vite' // import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import ElementPlus from 'unplugin-element-plus/vite'

    export default defineConfig({ resolve: { alias: { '~/': ${path.resolve(__dirname, 'src')}/, }, }, // css: { // preprocessorOptions: { // scss: { // additionalData: '@use "~/styles/element/index.scss" as *;', // }, // }, // }, plugins: [ Vue({ reactivityTransform: true, }),

    ElementPlus({
      // options
    }),
    
    // https://github.com/hannoeru/vite-plugin-pages
    Pages(),
    
    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      imports: [
        'vue',
        'vue/macros',
        'vue-router',
        '@vueuse/core',
      ],
      dts: true,
      dirs: [
        './src/composables',
      ],
      vueTemplate: true,
    }),
    
    // https://github.com/antfu/vite-plugin-components
    // Components({
    //   dts: true,
    //   // extensions: ['vue', 'md'],
    //   // include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    //   // resolvers: [
    //   //   ElementPlusResolver({
    //   //     importStyle: 'sass',
    //   //   }),
    //   // ],
    // }),
    

    ],

    // https://github.com/vitest-dev/vitest test: { environment: 'jsdom', }, })

    Reproduction

    just adding element plus to vitesse lite repo

    System Info

    System:
        OS: Windows 10 10.0.19044
        CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
        Memory: 17.08 GB / 31.76 GB
      Binaries:
        Node: 16.13.1 - C:\Dev\nodejs\node.EXE
        Yarn: 1.22.18 - C:\Dev\nodejs\yarn.CMD
        npm: 8.1.2 - C:\Dev\nodejs\npm.CMD
    

    Used Package Manager

    npm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by orenmizr 2
  • Duplicated imports ""

    Describe the bug

    bug 简要说明：

    命令行提示：

    Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/divide.ts" has been ignored
    Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/sum.ts" has been ignored
    

    查看生成的 auto-imports.d.ts中，declare global 中重复声明了空字符串。

      const : typeof import('./src/composables/minus')['']
    

    最小重现仓库地址：

    https://github.com/laddish/vitesse-lite-test/tree/test-duplicated-imports-of-empty-string

    最小重现步骤：

    1. clone vitesse-lite 这个项目；
    2. ni 安装依赖；
    3. 在 src/composables 下创建 sum.ts 内容为

    const numA = 1
    const numB = 2
    export {
      numA,
      numB,
    }
    

    4. 在 src/composables 下创建 minus.ts 内容为

    const numC = 1
    const numD = 2
    export {
      numC,
      numD,
    }
    

    5. 在 src/composables 下创建 divide.ts 内容为

    const numE = 1
    const numF = 2
    export {
      numE,
      numF,
    }
    

    6. nr dev 启动项目
    7. 命令行 提示

      ➜  Local:   http://127.0.0.1:3333/
      ➜  Network: use --host to expose
    Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/divide.ts" has been ignored
    Duplicated imports "", the one from "D:/antfu/vitesse-lite-test/src/composables/sum.ts" has been ignored
    

    8. 查看 auto-imports.d.ts，注意到自动生成了这样一行代码

      const : typeof import('./src/composables/minus')['']
    

    其他说明

    对比 unplugin-auto-import

    这个 bug 最开始我怀疑是 unplugin-auto-import(https://github.com/antfu/unplugin-auto-import) 的， 因为 auto-imports.d.ts 文件是 unplugin-auto-import 生成的； 但是我把 unplugin-auto-import clone 到本地， 按照以上步骤 在 unplugin-auto-import的 playground 文件夹中尝试复现， 生成的 auto-imports.d.ts 是正常的，没有空字符串，没有出现上述bug；

    对比 vitesse

    于是我尝试在 vitesse 复现； 在 vitesse 中，重复上面的步骤，命令行并没有报这样的提示，查看 auto-imports.d.ts也是正常的。

    vitesse 最小重现地址（没有这个bug，没有出现这个提示，只是对比） https://github.com/laddish/vitesse-test/tree/test-duplicated-imports-of-empty-string

    尝试避免这个 bug

    按照复现步骤在导出的时候不要换行， 这样就不会在 vitesse-lite 中触发这个bug。 所以这个 bug 可能是换行引起的？ sum.ts

    const numA = 1
    const numB = 2
    export { numA, numB }
    

    minus.ts

    const numC = 1
    const numD = 2
    export { numC, numD }
    

    divide.ts

    const numE = 1
    const numF = 2
    export { numE, numF }
    

    针对这种写法的仓库地址 https://github.com/laddish/vitesse-lite-test/tree/test-no-duplicated-imports-of-empty-string

    Reproduction

    https://github.com/laddish/vitesse-lite-test/tree/test-duplicated-imports-of-empty-string

    System Info

    windows
    chrome
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by laddish 2
  • Install Erro

    Sorry waste u time, but i encountered a problem. I degit antfu/vitesse-lite And executed command pnpm i they smooth operation. when i execut pnpm dev Error prompt it

    
    D:\VUE\demo\vue-minesweeper>pnpm dev
    
    > @ dev D:\VUE\demo\vue-minesweeper
    > vite --port 3333 --open
    
    failed to load config from D:\VUE\demo\vue-minesweeper\vite.config.ts
    error when starting dev server:
    D:\VUE\demo\vue-minesweeper\node_modules\.pnpm\@[email protected][email protected]\node_modules\@unocss\vite\dist\index.cjs:284
            return command === "build" && !options.build?.ssr;
                                                         ^
    
    SyntaxError: Unexpected token '.'
        at wrapSafe (internal/modules/cjs/loader.js:915:16)
        at Module._compile (internal/modules/cjs/loader.js:963:27)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
        at Module.load (internal/modules/cjs/loader.js:863:32)
        at Function.Module._load (internal/modules/cjs/loader.js:708:14)
        at Module.require (internal/modules/cjs/loader.js:887:19)
        at require (internal/modules/cjs/helpers.js:74:18)
        at Object.<anonymous> (D:\VUE\demo\vue-minesweeper\node_modules\.pnpm\[email protected][email protected]\node_modules\unocss\dist\vite.cjs:5:20)
        at Module._compile (internal/modules/cjs/loader.js:999:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
     ELIFECYCLE  Command failed with exit code 1.
    

    Can you tell me any solution and what caused this problem ,Thanks.

    opened by GrapeFruitWolfs 2
  • Degit error with default branch "master"

    Hi, so i want use this template and install with degit but i got error thats say

    ! could not find commit hash for master
    

    I think thats error because this repo use branch main instead of master, so i add param #main to template name on degit and its working.

    And please read my PR #14 to fix it

    opened by alfianokt 2
  • web component from this template

    Clear and concise description of the problem

    how to create web components (to use with other frameworks) with the configuration provided with this template, i almost make it works but unocss is not generating any style (i'm using attributify mode)

    Suggested solution

    maybe an example or another template?

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    enhancement 

    opened by mdbetancourt 1
  • 引入 ant-design-vue 后启动速度很慢

    首先我克隆项目到本地

    npx degit antfu/vitesse-lite my-vitesse-app
    cd my-vitesse-app
    pnpm i
    

    安装 and-design-vue 后修改 vite.config.ts

    import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
    
    export default defineConfig({// https://github.com/antfu/vite-plugin-components
        Components({
          dts: true,
          resolvers: [
            AntDesignVueResolver(),
          ],
        }),
    })
    

    在 pages/index.vue 里使用组件

    <template>
    <a-range-picker />
    </template>
    

    demo 地址 https://github.com/izhaoqing/my-vitesse-app

    从启动项目到能看到页面需要两分钟，我在 pages/index.vue 里再使用一个 <a-button>123</a-button> 组件，又需要一分钟才能看到效果。

    opened by izhaoqing 1
  • Base doesn't seem to work correctly

    Following this rather simple setup none of the generated pages seem to load correctly.

    npx degit antfu/vitesse-lite my-vitesse-app
    cd my-vitesse-app
    pnpm i
    pnpm build -- --base=/hungry/
    pnpm preview -- --base=/hungry/
    

    In this mode none of the pages can be found. I get the 404 page for everything under http://localhost:4173/hungry.

    Browse to http://localhost:4173/hungry/hi/aoeu

    Actual: The 404 not found page is displayed

    Expected: The Hi, aoeu! dynamic route page

    opened by gnu-lorien 1