Make Vite work with Vue 2

naknode commented 4 years ago

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.

m4rvr commented 4 years ago

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.

yyx990803 commented 4 years ago

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

naknode commented 4 years ago

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

m4rvr commented 4 years ago

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

jfoliveira commented 4 years ago

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 Githubissues.
Githubissues is a development platform for aggregating issues.

vitejs / vite