Basic setup for local dev not working

[onx2]

After following the instruction in the readme, I ended up with an error.

I'm using the vue-next webpack template and added a new npm script for vite after yarn add -D vite. I then updated my index.html to what was in the instructions, created a Comp.vue component in src/ but it isn't working. Am I missing something?

// Comp.vue

<template>
  <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button {
  color: red;
}
</style>

// index.html

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

// package.json

{
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --env.prod",
    "serve": "vite --root src"
  },
  "dependencies": {},
  "peerDependencies": {
    "vue": "^3.0.0-alpha.10"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-alpha.10",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "url-loader": "^4.0.0",
    "vite": "^0.4.0",
    "vue": "^3.0.0-alpha.10",
    "vue-loader": "^16.0.0-alpha.3",
    "webpack": "^4.42.1",
    "webpack-bundle-analyzer": "^3.6.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

[onx2]

Is there a working example of a Vue 3 app with vite? 😄

[zzetao]

@onx2
I had the same problem while using node v8.x, try with node v10+, it works.

[onx2]

My node version is up to date, could it be something else? @zzetao

node --version
# v13.12.0

[onx2]

I was going to make this a component library so I have vue as a peer dep and dev, but I also tried as a regular dep and it isn't working
.

[zzetao]

Your code example works for me.
i hove no other ideas 🐶

[yyx990803]

vite relies on a dist file that is only present in vue@3.0.0-beta.3 and up. Update your vue and @vue/compiler-sfc versions and it should work.

[onx2]

Not sure if it was a versioning issue (presumably part of it), or me missing a part of the readme. The local dev section is watching src/ however the guide in the beginning just says to create files [in root?] but I had them in src because the command referenced --root src.

For anyone interested in the most basic version of this working... This is what I ended up with:

// Comp.vue
<template>
  <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<!--  index.html -->
<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

package.json

{
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "vue": "^3.0.0-beta.3"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-beta.3",
    "vite": "^0.4.0"
  }
}

@yyx990803 @zzetao thanks for helping!