If you just want an example repo to clone, visit here: https://github.com/matt-auckland/vite-vue2-starter. I'd recommend using degit to clone it.

If you're wondering how to use Vue2 with Vite, read on.

First we'll need to create a new Vite app using the Vue 3 template.

npm init @vitejs/app vue2-vite --template vue; # Init vite with Vue3
cd vue2-vite;
npm install; #install packages

Next we need to install the vite-plugin-vue2 package which allows Vite to work with Vue2.

We also need to install Vue2 itself!

npm install vite-plugin-vue2; # add vue2 plugin
npm install vue@2 # install Vue V2, replaces the Vue V3 package

Now we need to update vite.config.js so it uses the new plugin:

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

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

And now we need to update main.js so it uses Vue2 syntax to create our app instead of Vue3

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

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

Now if you run npm run dev, Vite should start up! But you should get an error:

[vite] Internal server error: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

We'll need to update our .Vue files so they use Vue 2 syntax instead of Vue 3. I've included the changes I made below, click on the file names to reveal the code.

Click to expand code for App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 2 + Vite" />
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
components: {
HelloWorld,
},
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Click to reveal code for HelloWorld.vue
<template>
<div>
<h1></h1>

<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank"
>
Vite Documentation</a
>

|
<a href="https://vuejs.org/v2/guide/" target="_blank"
>
Vue 2 Documentation</a
>

</p>

<button @click="count++">count is: </button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</div>
</template>

<script>
export default {
props: {
msg: String,
},
data() {
return {
count: 0,
};
},
};
</script>

<style scoped>
a {
color: #42b983;
}
</style>

That should resolve all errors, happy coding! Feel free to log an issue on my repo if it's still not working, or if you have any improvements to add :)