Vue-cli: Vue CLI 'webpack' template doesn't work out of the box

[command-tab]

Version

2.4.0

Node and OS info

node 10.8.0 / yarn 1.7.0 / macOS 10.13.6

Steps to reproduce

mkdir testapp
cd testapp
vue init webpack
yarn install
yarn run dev

What is expected?

I expected the generated app to not throw errors and show a generic app placeholder.

What is actually happening?

The http://localhost:8080 browser viewport is blank and the console has an error:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in Root)

[command-tab]

Works under vue-cli 3.0.1 🤦‍♂️

I had installed @vue/cli with yarn, but I had apparently previously installed vue-cli with npm, and the latter was first in my $PATH, so I had to be sure to completely remove the old vue-cli from npm's global directory before my shell would see the new @vue/cli binary.

[nourwolf]

By default, the generated webpack config has this

...
  resolve: {
    symlinks: false,
    alias: {
      '@': '/path/to/project/src',
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
...

So I had to update vue.config.js to use use the compiler-included build instead.

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  }

[sodatea]

@nourchawich there's an option for this: https://cli.vuejs.org/config/#runtimecompiler

[nourwolf]

@sodatea thank you. Coming from webpack template world I have missed to check the full config reference. Now I can't imagine using Vue without the CLI and the new config 😍

[ryanmtaylor]

Had same issue, it was solved by running npm remove -g vue-cli because I wanted to use the version created by npm i -g @vue/cli instead. Thank you!

npm remove -g vue-cli
npm i -g @vue/cli

[atunjeafolabi]

Create a vue.config.js in the root of your project. Then copy the below code snippet into it

module.exports = {
    runtimeCompiler: true
  };

Don't forget to re run npm run serve to effect it.