Vite: Make Vite work with Vue 2

Created on 29 May 2020 · 16Comments · Source: vitejs/vite

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

Trying Vite on a fresh vue 2.5 / typescript app.

Reproduction

Create a new app: npm init vite-app vue25 --template vue
Replace package.json with this:

{
  "name": "vue25",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "~2.6.10"
  },
  "devDependencies": {
    "vite": "^0.17.0",
    "vue-template-compiler": "^2.6.11"
  }
}

System Info

required vite version: 0.18.0
required Operating System: macOS Catalina 10.15.4
required Node version: 10.16.0
Optional:
- npm/yarn version: 6.14.4
- Installed vue version (from yarn.lock or package-lock.json)
- Installed @vue/compiler-sfc version

I thought this worked with Vue 2.5 as @vue/compiler-sfc is vue 3... only.

enhancement

Source

naknode

👍5 😕1

Most helpful comment

Unfortunately Vite doesn't work with Vue 2 (at least for now). We should make it work though.

yyx990803 on 29 May 2020

👍38

All 16 comments

It doesn't work with Vue 2 and vue-template-compiler isn't the right package. So the error is correct. Use Vue 3 and it will work.

MarvinRudolph on 29 May 2020

Unfortunately Vite doesn't work with Vue 2 (at least for now). We should make it work though.

yyx990803 on 29 May 2020

👍38

I appreciate the response. Thanks for the hard work Evan, Marvin and company.

naknode on 29 May 2020

I didn't do anything, Evan is here the brain. 😄

MarvinRudolph on 29 May 2020

Could you point us to any doc/blog post/tutorial/guide/a one line npx command/... on how to init a Vite+Vue3+TypeScript web front-end app?
Everything I found on my google searches mix too many other concepts together, making it hard to focus on Vite+Vue3+TS.

Update 1:
Based on the README Getting started I tried the following help commands to see the init options, but no luck:

$ npm init vite-app --help
No results for "init" "vite-app"

$ npx vitejs/vite --help
Cannot find module '../dist/cli'
Require stack:
- ~/.npm/_npx/59851/lib/node_modules/vite/bin/vite.js

Update 2:
Based on the README TypeScript section

Vite supports importing .ts files and

@jfoliveira Normally you have typescript listed in devDependencies in a TypeScript project but I think it also works without it. Vite already installs it but yes - it works without installing additional dependencies. Just use lang="ts" in your <script> and .ts instead of .js.

MarvinRudolph on 30 May 2020

@MarvinRudolph Yeah, but I couldn't find typescript listed in package-lock.json under vite or @vue/compiler-sfc or rollup* so that's why I was curious how the magic was working.

Anyway, tried your suggestion and here is what I did, achieving partial success:

// created a new app:
npm init vite-app my-vue3-vite-ts

// app created
// renamed main.js to main.ts
// changed index.html script tag to:

  <script lang="ts" type="module" src="/src/main.ts"></script>

In the HellowWorld.vue file created by vite I defined a type SomeType and a function using it I also added <script lang="ts"> after the </template> closing tag and wrote some TypeScript specific code:

...
</template>
<script lang="ts">
export interface SomeType {
  someProp: string
}

function tsLogValue(param1: SomeType): void {
  console.log('Param value strongly typed with TS: ', param1.someProp);
}

tsLogValue(123); // vite/tsc should fail to compile this?!?
tsLogValue({ someProp: 'prop value'}); // this should compile fine
...
export default {

Questions:
1) How to setup vite so it fails to reload/build a component/file when there is a TS syntax error like the one showed above in tsLogValue(123)?

2) Is there anyway to tell npm init vite-app something like:

hey, vite - you new best friend of people like me that doesn't want or doesn't care to understand the internals of bundling tools - I already know I wanna use TypeScript in this project, would you please name the files with .ts extension and adjust the

@mdbetancourt Not every Vue project started recently. You have enterprise applications as well countless others who can't upgrade right now. Get some perspective :\

naknode on 5 Jun 2020

👍3

@naknode exactly and this is an experimental project... and afaik they are doing everything they can to make vue 3 backward compatible with vue 2 so before try using an experimental lib and migrate to it you should first try migrate to vue 3, so instead of spending time doing this compatible with vue 2 that time could be used to develop more features.
Also this kind of things give more life to vue 2 so people will be more reluctant to migrate.

mdbetancourt on 5 Jun 2020

👎3 👍2

i 've ever imagined that might vite support plugin to pluggablly support vue@2.

cdll on 24 Jun 2020

Hey guys, I write a plugin to suppot vue2.It can worked fine in dev.See https://github.com/underfin/vite-plugin-vue2

underfin on 20 Jul 2020

👍15 🎉10

Hey guys, I write a plugin to suppot vue2.It can worked fine in dev.See https://github.com/underfin/vite-plugin-vue2

Hey I am new to Vue/Vite, so the best way for me learning vue is through vue 2 and the new composition api (cause there are much more rescources). I first tried Vue 3, where I loved Vite. Could you explain me how to integrate Vue 2 with Vite (the fast build is incredible), I couldn't really figure out how to use it in my Vue 2 project.I don't need Typescript support. Kind regards

niveKKumar on 26 Aug 2020

@yyx990803 ,I think you should not spend a lot of time to make vite compatible with vue2, vue3 is great and for future.and users of vue2 will switch to vue3.
I am writing a repo to support vue2, and maintain it until most users of vue2 switching to vue3.
I waited for vue3 for a long time.the time of vue3 developing was compatible with vue3.This was a pity.
https://gitee.com/tserve/tserve.git. I put it on gitee, If this project is stable for production environment, I will put it on github.
Thanks