⚡ Vite Experience with Nuxt 2 🧪

Related tags

Vite Templates vite
Overview

d v a c

🧪 Vite mode is experimental and many nuxt modules are still incompatible. If you find a bug, please report via issues with a minimal reproduction.

⚡ Quick Start

Install nuxt-vite: (nuxt >= 2.15.0 is required)

yarn add --dev nuxt-vite
# OR
npm i -D nuxt-vite

Add to buildModules:

// nuxt.config
export default {
  buildModules: [
    'nuxt-vite'
  ]
}

That's it! Now you can enjoy super fast nuxt dev experience with Vite!

📖 Read documentation for more

✔️ What is working?

Features:

  • Using vite in development
  • Basic server-side rendering
  • Basic Hot-Module-Replacement
  • Nuxt plugins
  • Nuxt components
  • Vuex store
  • Page middleware
  • Basic jsx (pass h as first argument)
  • Postcss

Modules:

We are trying to make most of modules and options working out-of-the-box. If you are a module maintainer, please see this section for supporting vite. If a module or feature is missing, feel free openining an issue.

❤️ Credits

This module could not be possible without vite-plugin-vue2 by @underfin

Published under MIT License

Comments
  • cannot stop full-reload in hrm

    cannot stop full-reload in hrm

    Versions

    nuxt-vite: v0.2.4 nuxt: v2.15.7 packges.json

    {
      "name": "frontstore",
      "version": "1.0.0",
      "private": true,
      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
        "lint": "npm run lint:js"
      },
      "dependencies": {
        "@google-cloud/storage": "^5.19.1",
        "@nuxtjs/auth": "^4.9.1",
        "@nuxtjs/axios": "^5.13.6",
        "@nuxtjs/firebase": "^8.2.2",
        "@nuxtjs/sentry": "^5.1.7",
        "@pdftron/webviewer": "^8.3.2",
        "@sentry/webpack-plugin": "^1.19.0",
        "@vimeo/player": "^2.16.3",
        "chart.js": "^2.9.4",
        "core-js": "^3.15.1",
        "firebase": "^9.6.8",
        "lodash.isequal": "^4.5.0",
        "nuxt": "^2.15.7",
        "vue-chartkick": "^0.6.1",
        "vue-cookies": "^1.8.1",
        "vue-observe-visibility": "^1.0.0",
        "vue-social-sharing": "^3.0.9",
        "vue-tweet-embed": "^2.4.0",
        "vuetify": "^2.5.5"
      },
      "devDependencies": {
        "@babel/eslint-parser": "^7.14.7",
        "@nuxtjs/dotenv": "^1.4.1",
        "@nuxtjs/eslint-config": "^6.0.1",
        "@nuxtjs/eslint-module": "^3.0.2",
        "@nuxtjs/vuetify": "^1.12.1",
        "eslint": "^7.29.0",
        "eslint-plugin-nuxt": "^2.0.0",
        "eslint-plugin-vue": "^7.12.1",
        "node-sass": "^7.0.1",
        "nuxt-vite": "^0.2.4",
        "sass": "^1.54.5",
        "sass-loader": "^10.3.1"
      }
    }
    
    

    nuxt.config.js

      // vite: {
      //   // server: {
      //   //   hmr: false,
      //   // }
    
      // },
    

    the problem is with full-reload with i edit some text the vite connect call full-reload and fully refreshing page when I disable hmr the browser not show new updates .

    I went to show updates with out fully refreshing page .

    I do some manual update in vite to fix this . I disable // location.reload(); in full-reload case
    and it is work find any way to do this using config

    ksnip bug 
    opened by fh32000 1
  • chore(deps): update dependency @vitejs/plugin-legacy to v2

    chore(deps): update dependency @vitejs/plugin-legacy to v2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @vitejs/plugin-legacy (source) | ^1.6.0 -> ^2.3.1 | age | adoption | passing | confidence |


    Release Notes

    vitejs/vite

    v2.3.1

    Compare Source

    v2.3.0

    Compare Source

    v2.2.0

    Compare Source

    v2.1.0

    Compare Source

    v2.0.1

    Compare Source

    v2.0.0

    Compare Source

    v1.8.2

    Compare Source

    v1.8.1

    Compare Source

    v1.8.0

    v1.7.1

    Bug Fixes

    v1.7.0

    Bug Fixes

    1.6.4 (2021-12-07)

    1.6.3 (2021-11-22)

    Bug Fixes

    1.6.2 (2021-10-11)

    Features

    1.6.1 (2021-10-05)

    Bug Fixes

    v1.6.4

    v1.6.3

    Bug Fixes

    v1.6.2

    Features

    v1.6.1

    Bug Fixes

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    ♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • ReferenceError: Cannot access 'module' before initialization

    ReferenceError: Cannot access 'module' before initialization

    Versions

    nuxt-vite: 0.3.5 nuxt: 2.15.3

    Reproduction

    package.json: "dependencies": { "@nuxtjs/auth-next": "5.0.0-1618898588.9655d0e", "@nuxtjs/axios": "^5.13.1", "@nuxtjs/markdownit": "^2.0.0", "@nuxtjs/sentry": "^5.1.7", "core-js": "^3.9.1", "fabric-history": "^1.6.0", "fabric-with-gestures": "^4.5.0", "fontfaceobserver": "^2.1.0", "lru-cache": "^6.0.0", "markdown-it-attrs": "^2.4.1", "markdown-it-block-embed": "0.0.3", "markdown-it-collapsible": "^1.0.0", "markdown-it-div": "^1.1.0", "markdown-it-link-attributes": "^4.0.0", "markdown-it-video": "^0.6.3", "mitt": "^3.0.0", "nuxt": "^2.15.3", "nuxt-i18n": "^6.26.0", "nuxt-interpolation": "^0.2.3", "portal-vue": "^2.1.7", "reclameland-shared": "^1.0.170", "v-click-outside": "^3.1.2", "v-tooltip": "^2.1.3", "vue-color": "^2.8.1", "vue-frag": "^1.3.1", "vue-multiselect": "^2.1.6", "vue-toastification": "^1.7.14", "vuex-persistedstate": "^4.1.0" }, "devDependencies": { "@nuxtjs/eslint-config": "^6.0.0", "@nuxtjs/eslint-module": "^3.0.2", "@nuxtjs/google-fonts": "^1.3.0", "@nuxtjs/tailwindcss": "^4.2.1", "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "eslint": "^7.22.0", "eslint-plugin-nuxt": "^2.0.0", "eslint-plugin-vue": "^7.7.0", "nuxt-vite": "^0.3.5", "postcss": "^7.0.39" }

    nuxt.config.js: plugins: [ { src: '~/plugins/mitt.js', mode: 'client' }, { src: '~/plugins/persisted-state.js', mode: 'client' }, { src: '~/plugins/vue-tooltip.js', mode: 'client' }, '~/plugins/vue-fragment.js', '~/plugins/currency.js', '~/plugins/axios.js' ],

    buildModules: [ 'nuxt-vite', '@nuxtjs/eslint-module', '@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', 'reclameland-shared/nuxt' ],

    modules: [ '@nuxtjs/axios', '@nuxtjs/auth-next', '@nuxtjs/markdownit', 'nuxt-i18n', 'nuxt-interpolation', 'portal-vue/nuxt', 'vue-toastification/nuxt' ],

    i18n: { baseUrl: process.env.BASE_URL, defaultLocale: 'nl', strategy: 'no_prefix', locales: [ { code: 'nl', iso: 'nl-NL' }, { code: 'be', iso: 'nl-BE' } ], vueI18n: { fallbackLocale: 'nl', messages: { nl: { ...require('./node_modules/reclameland-shared/locales/rcl/nl-NL.json'), ...require('./node_modules/reclameland-shared/locales/main.json') }, be: { ...require('./node_modules/reclameland-shared/locales/rcl/nl-BE.json'), ...require('./node_modules/reclameland-shared/locales/main.json') } } } },

    Description

    After building, I'm getting an error "ReferenceError Cannot access 'module' before initialization". This only happens when I use nuxt-vite, not when using webpack. What could be the cause?

    Screenshot 2022-07-28 at 13 47 22

    bug 
    opened by Qonflux 0
  • Bug: 'dev' command hangs during build

    Bug: 'dev' command hangs during build

    Versions

    • nuxt: ^3.0.0-rc.6 (^3.0.0-rc.4 and over)
    • nuxt-vite: ^0.3.5
    • node: v16.14.2
    • npm: 8.11.0

    Reproduction

    • package.json
    "dependencies": {
      "@nuxtjs/composition-api": "^0.33.0",
      "@use-it/event-listener": "^0.1.7",
      "@vueuse/core": "^8.9.4",
      "include-media": "^1.4.10",
      "sass": "^1.53.0",
      "sass-loader": "^13.0.2",
      "typescript": "^4.7.4",
      "vue": "^3.2.37",
      "yarn": "^1.22.19"
    },
    "devDependencies": {
      "@babel/core": "^7.18.6",
      "@babel/plugin-proposal-optional-chaining": "^7.18.6",
      "@babel/preset-env": "^7.18.6",
      "@nuxt/typescript": "^2.8.1",
      "eslint": "^8.19.0",
      "eslint-config-prettier": "^8.5.0",
      "eslint-plugin-prettier": "^4.2.1",
      "eslint-plugin-vue": "^9.2.0",
      "nuxt": "^3.0.0-rc.6",
      "nuxt-property-decorator": "^2.9.1",
      "nuxt-vite": "^0.3.5",
      "prettier": "^2.7.1"
    }
    
    • nuxt.config.ts
    import { defineNuxtConfig } from 'nuxt'
    
    // https://v3.nuxtjs.org/api/configuration/nuxt.config
    export default defineNuxtConfig({  
      buildModules: [
        'nuxt-vite'
      ],
    })
    

    Description

    when command yarn dev in terminal

    image

    Why is the current version of nuxt recognized as 0.0.0?(WARN)

    bug 
    opened by JUKOOK 1
  • Can't use v-runtime-template along with the Nuxt Vite

    Can't use v-runtime-template along with the Nuxt Vite

    Versions

    nuxt-vite: 0.3.5 nuxt: 2.15.8 v-runtime-template: 1.10.0

    Reproduction

    1. npm init nuxt-app <project-name>
    2. npm i -D nuxt-vite
    3. npm install v-runtime-template
    4. Add the following to nuxt.config.js:
    buildModules: ["nuxt-vite"],
    
    build: {
      extend(config, { isDev, isClient }) {
        config.resolve.alias["vue"] = "vue/dist/vue.common";
      },
    },
    
    1. try using v-runtime-template

    Description

    I'm getting the following warning and nothing shows up. Didn't find any solution yet:

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
    

    https://github.com/Asef00/nuxt-vite

    bug 
    opened by Asef00 0
Owner
Nuxt
The Intuitive Vue Framework
Nuxt
My personal website. Base on Vite 2.0 and Vue 3.0. If you want to know how to use Vite to develop a project, you can refer to this repository.

chengpeiquan.com My personal website. Base on Vite 2.0 and Vue 3.0. You can see Rewrite in vite to learn more. Architecture License MIT License © 2021

chengpeiquan 39 Dec 11, 2022
Very low cost dynamic themes in vite and Ant Design Vue. About using @zougt/vite-plugin-theme-preprocessor.

Vite + ant-design-vue about dynamic themes demo https://gitofzgt.github.io/vite-dynamictheme-antd-vue-demo/ Using the plugin @zougt/vite-plugin-theme-

ZGT 11 Dec 1, 2022
Vite-starter - Vueform Vite + TailwindCSS 3 Boilerplate

Vueform Vite + TailwindCSS 3 Boilerplate Last tested with Vite 2.7.13. Installat

Vueform 4 Feb 8, 2022
🏕 Opinionated Vite Starter Template

Mocking up web app with Vitesse(speed) Now with Windi CSS! ⚡️ Live Demo Features ⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness ?? File based ro

Anthony Fu 6.6k Jan 4, 2023
Vite 2.x + Vue 3.x + Tailwind 2.x (starter) ⚡

Vite 2.x + Vue 3.x + Tailwind 2.x starter ⚡ This starter template also includes: Vue Router 4.x Inter var font (self-hosted, woff2 format, version 3.1

Eugene Kopich 1k Oct 5, 2022
Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter.

Vite Typescript + Tailwind Starter Simple, opinionated, and production-ready TS + Tailwind project template for Vite 2. See changelog for latest chang

Ville Säävuori 284 Jan 8, 2023
Electron app boilerplate based on Vite 2.0

Vite Electron Builder Template Vite+Electron = ?? This is a secure template for electron applications. Written following the latest safety requirement

Alex Kozack 1.5k Jan 7, 2023
Vue 3 boilerplate starter based on Vite and Tailwindcss 2

vite-wind WIP ?? ?? ?? It's a Vue 3 boilerplate based on Tailwindcss + Typescript + Vite + css-pro-layout, You could clone this repository and use the

Brahim 86 Dec 20, 2022
Vite - Vue 2 starter template using composition-api and windiCSS

Vite ⚡ - Vue 2 starter template Create a Vue 2 application bundled by the lightning fast build tool Vite ✨ Live Demo ?? Features ⚡️ Vite 2, Vue 2 and

null 173 Dec 30, 2022
Windi CSS vs Tailwind CSS JIT on Vite

Windi CSS vs Tailwind CSS JIT on Vite yarn yarn dev to start both servers http://localhost:3100/ - Windi CSS http://localhost:3200/ - Tailwind CSS JIT

Anthony Fu 56 Sep 14, 2022
Mkh.UI是基于Vue3+Vite+Element Plus开发的业务模块化快速开发框架

说明 Mkh.UI是基于Vue3+Vite+Element Plus开发的业务模块化快速开发框架(不支持 IE),目前仍在紧张开发完善中。 功能特点 Mkh.UI包含以下功能特点: 1、业务模块化:业务模块通过 npm 分发安装,开发人员只需关注自己模块的业务逻辑。 3、国际化:使用 i18n 集成

17MKH 48 Sep 20, 2022
Resume generation template - Power by Vue3 + Vite + tailwindcss

简历生成模板 Vue3 + Vite + tailwindcss 功能 Web 端显示简历 打印成 PDF 通过 JSON 配置简历内容 使用方法 点击页面右上角的修改数据按钮,会弹出用于修改数据的文本框。 根据以下示例数据修改后点击弹出框的保存。

null 4 Aug 17, 2021
Cypres component testing with Vue 3 and Vite

Cypress Vue 3 Vite Vite template with Vue 3 and Cypress component testing. Clone the repository and run yarn install to install the dependencies. yarn

Lachlan Miller 19 May 16, 2022
ZingMp3.vn clone with Vue 3 (Vite)

Zing Mp3 Clone (Vue 3) Vue 3, Vite, TypeScript, SCSS Installation: git clone https://github.com/uchindev/zingmp3-fe-ts.git cd zingmp3-fe-ts npm instal

Thinh Nguyen 38 Aug 15, 2022
A starter kit for vue-cesium with Vite

element-plus-vite-starter A starter kit for vue-cesium generated by vue-cli This template should help get you started developing with Vue 3 and Typesc

zouyaoji 15 Oct 16, 2022
Based on vite

vue-manage-system-vite Based on vite vue-manage-system 为原作者lin-xin捐助 基于 Vue3 + Element Plus 的后台管理系统解决方案。线上地址 此项目是基于vite的版本,并且使用vue3语法 前言 该方案作为一套多功能的后台

null 3 Apr 13, 2021
This template should help get you started developing with Vue 3 and Typescript in Vite.

Underscore_ Voici la homepage du podcast ! Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in

Micode 20 Oct 28, 2022
Starter template for Neutralino.js with Vite.js and Vue.js

Neutralino.js Template With Vite.js and Vue.js Neutralino.js Neutralino.js is a new competitor to Electron.js which is smaller and consumes tiny amoun

YoonesKh 46 Dec 6, 2022
Tauri + Vite + Vue 3 + Vuetify 3 desktop app template

Vite Tauri Template This is a starter template for those who want to make a desktop application with web technologies. This template uses the below st

YoonesKh 212 Jan 8, 2023