Any plans to add a Vue2 starter template?

[matt-auckland]

Are there any plans for adding Vue 2 as a starter template? There is already a Vue2 plugin for Vite, so I feel like the groundwork has been laid.

I am happy to try contribute a PR adding it if you think it would be a good addition to Vite 🙂

[pat123456]

Hi, Would appreciate a template, but before this exist could you please explain step by step how to install the Vue2 plugin from a fresh install of vite/vue template ? how to remove vue3 and replace it with vue2 before installing the vue2 plugin ? The vue2 plugin documentation is very short about this.

[matt-auckland]

Would appreciate a template, but before this exist could you please explain step by step how to install the Vue2 plugin from a fresh install of vite/vue template ? how to remove vue3 and replace it with vue2 before installing the vue2 plugin ? The vue2 plugin documentation is very short about this.

npm init @vitejs/app vue2-vite --template vue; # Init vite with Vue3
cd vue2-vite;
npm i; #install packages
npm i vite-plugin-vue2; # add vue2 plugin
npm install vue@2 # install Vue V2, replaces the Vue V3 package

Update main.js to look like this:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: (h) => h(App),
}).$mount('#app')

Update vite.config.js to look like this.

const { createVuePlugin } = require('vite-plugin-vue2');

module.exports = {
  plugins: [createVuePlugin()],
};

The App.vue and HelloWorld.vue components will also need to be updated to use Vue2 syntax.

[pat123456]

Hi, thank you for your answer ! When I do what you suggest I still have an error when running "npm run dev"

failed to load config from /opt/lampp/htdocs/vue2-vite/vite.config.js
error when starting dev server:
Error: 
Vue packages version mismatch:
- vue@3.0.7 (/opt/lampp/htdocs/vue2-vite/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/opt/lampp/htdocs/vue2-vite/node_modules/vue-template-compiler/package.json)

I finally simply deleted the "vue" (vue3) folder in "node_modules" and replace it with a vue2 folder and it work now

[pat123456]

... replacing vue like I did doesn't seem to be sufficient, I still get error when trying to install other library, for ex installing tiptap :

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: vue@3.0.7
npm ERR! node_modules/vue
npm ERR!   peer vue@"3.0.7" from @vue/compiler-sfc@3.0.7
npm ERR!   node_modules/@vue/compiler-sfc
npm ERR!     peer @vue/compiler-sfc@"^3.0.6" from @vitejs/plugin-vue@1.1.5
...etc

so still looking for how to replace vue3 with vue2 correctly, @matt-auckland may I miss something in your explanation ?

[matt-auckland]

Oh I forgot to mention you need to npm install vue@2 to replace the Vue 3 package with Vue 2

[pat123456]

This is what I did before asking my first question, but the problem is that it doesn't want to install :

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: vue@2.6.12
npm ERR! node_modules/vue
npm ERR!   vue@"2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"3.0.7" from @vue/compiler-sfc@3.0.7
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peer @vue/compiler-sfc@"^3.0.6" from @vitejs/plugin-vue@1.1.5
...etc

so switching from vue3 to vue2 in vite project seems to be more complicated ? or I still miss something ?

[matt-auckland]

Oh I forgot one more step, sorry I forgot to add it 🤦‍♂️, update your vite.config.js so that it looks like this:

const { createVuePlugin } = require('vite-plugin-vue2');

module.exports = {
  plugins: [createVuePlugin()],
};

I just tested this again, and it works on my machine™️ I've updated my original comment above.

EDIT: I've also thrown together a repo here https://github.com/matt-auckland/vite-vue2-starter

[pat123456]

Hi, thank again for your help but when I do exactly the same steps as you recommended :

npm init @vitejs/app vue2-vite --template vue; # Init vite with Vue3
cd vue2-vite;
npm i; #install packages
npm i vite-plugin-vue2; # add vue2 plugin
npm install vue@2 # install Vue V2, replaces the Vue V3 package

I still get the same errors when installing vue2. Can't understand why this work well on your machine and not on my ??