[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.

[jay763190097]

Version

3.0.5

Reproduction link

http://excuse

Node and OS info

Node 8.11.1

Steps to reproduce

excuse

What is expected?

运行不了

What is actually happening?

报上面的错误

[LinusBorg]

https://cli.vuejs.org/config/#runtimecompiler

[jay763190097]

我用的vue-cli3, 没有vue.config.js 也没有 webpack配置文件，怎么弄呢？

[haoqunjiang]

请自行创建 vue.config.js 文件

[blocka]

What if you wanted the runtime compiler only for jest tests?

[LinusBorg]

Use NODE_ENV to switch it

[LinusBorg]

Use NODE_ENV to switch it or rewite the module path in jest config

[LinusBorg]

Remap the module path in jest config

[tenadolanter]

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :

1. webpack.config.js

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

2. App.vue

new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

[lc-thomas]

that render: h => h(App) thing was also what I was missing

[razorwu1994]

that render: h => h(App) thing was also what I was missing

if pass in render: h => h(App) , it ignores router. I am new to Vue but that is not the solution.
I am following the tutorials ,exact code. Blank page.

[lc-thomas]

You have to pass the router to your Vue instanciation :

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

console.log('[i] Starting client app')

Vue.config.productionTip = false

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

[kevinvega09]

You have to pass the router to your Vue instanciation :

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

console.log('[i] Starting client app')

Vue.config.productionTip = false

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

This solution work out for me. Thank you!

[smelike]

请自行创建 vue.config.js 文件

Fixed by this way.

[db12138]

the problem has been solved at vuejs-templates/webpack#215
Simple way, change

import Vue from 'vue'
to

import Vue from 'vue/dist/vue.js';
It resolved my issue

[hoophony]

I also encountered this problem when I converted the vue-cli 2.0 project into vue-cli 3.0.
I change
new Vue({
el: '#app',
router,
store,
components: {App},
template: ''
})
to
new Vue({
render: h => h(App),
store,
router,
components: { App }
}).$mount('#app')

It resolved my issue

[gg4u]

Hi everybody,

getting close to a solution:

so problem is related to syntax for vue 3.0 + ? Is it different than vue 2.0 ?

So could you please show a syntax that translate how to make use of multiple templates and components ?
e.g

import Vue from 'vue'
import App from './App.vue'
import Rating from './components/Rating' 
new Vue({  el: '#app',  template: '<Rating/>',  components: { Rating }})

if I try:

new Vue({
  render: h => h(App, Rating),
  Rating,
  template: '<Rating :grade="3" :maxStars="5" :hasCounter="true"/>',
  components: { App, Rating}
}).$mount('#app')

I cannot see the rating component.

what is that
render: h => h(App), and then mounted ?

I found former sytax more readable, espeically for more complex structures.

P..s.

could you help to pintpoint a tutorial that shows how to migrate to new syntax?
I created quite quickly a demo by putting everything in one index.html, including scripts and html. I would like to break down into templates and components, for the sake of maintanance, and attempting to use vue cli.

But feeling it consumes quite much of time to solve this hiccups.

Thank you for point at practical resources

[gg4u]

I also add useful resource:
https://codewithhugo.com/writing-multiple-vue-components-in-a-single-file/

[sky1225]

You have to pass the router to your Vue instanciation :

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

console.log('[i] Starting client app')

Vue.config.productionTip = false

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

This solution work out for me. Thank you!

great! thank you

[mediafreakch]

Why do I need a render function within the root Vue instance?
The official vue-router getting started example doesn't need one: https://jsfiddle.net/yyx990803/xgrjzsup/

Why doesn't vue-loader transform my component within the route config?

[tomsour1s]

For me, the solution was:
create a new file "vue.config.js" in the root folder and add
module.exports = { runtimeCompiler: true }

[yveyeh]

the problem has been solved at vuejs-templates/webpack#215
Simple way, change

import Vue from 'vue'
to

import Vue from 'vue/dist/vue.js';
It resolved my issue

This literally saved my day after over 3 hours of knocking my head! Thanks @db12138 .

[Storm75]

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :

1. **webpack.config.js**

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

1. **App.vue**

new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration has an unknown property 'runtimeCompiler'. These properties are valid:
  object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
  For typos: please correct them.
  For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
  Loaders should be updated to allow passing options via loader options in module.rules.
  Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
  plugins: [
  new webpack.LoaderOptionsPlugin({
  // test: /.xxx$/, // may apply this only for some modules
  options: {
  runtimeCompiler: …
  }
  })
  ]

[Tofandel]

Or just add

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

For some reason the render function is required or it tries to compile an empty template and throws this warning, I think there should be a check if the template is empty as well to not throw this warning

And you can get rid of your App.vue file as well as the vue template compiler to reduce build size

[arikardnoir]

On the vue.config.js file put:

module.exports = {
runtimeCompiler: true
}

[ryuchaehwa]

Hey, I'm using ant-design-vue and vue-router, this problem came up when I try to use router-view. adding vue.config.js file doesn't help me out to fix the issue. btw router doesn't work at all.

any idea how to fix it?

main.js

import router from '../router/main.js'

Vue.config.productionTip = false

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

./router/main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter )

// const TodInfo = require( '../src/components/tod/TodInfo.vue' )
// const Login = require('../src/components/util/BucheonLogin.vue')

const TodInfo = {template: '<div>Foo</div>'}
console.log(TodInfo)

const router = new VueRouter( {

    mode: 'history',
    routes: [
        // {
        //     path: '/',
        //     name: 'login',
        //     component: Login
        // },
        {
            path: '/todinfo',
            name: 'todinfo',
            component: TodInfo
        }
    ]
} )

export default router

App.vue

    <a-layout>
     ..
       ..
      ..
      ..
        <router-view></router-view>
        data
    ..
    </a-layout>

[fulutas]

the problem has been solved at vuejs-templates/webpack#215
Simple way, change
import Vue from 'vue'
to
import Vue from 'vue/dist/vue.js';
It resolved my issue

This literally saved my day after over 3 hours of knocking my head! Thanks @db12138 .

Thank you! :)

[zerotower69]

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :

1. webpack.config.js

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

1. App.vue

new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

Thanks, it can work.

[stijnjanmaat]

If anyone encounters this warning in running unit tests with vue-test-utils, it turns out I needed to supply a localVue in mount of shallowMount which includes the template compiler:

// SomeComponent.spec.js

import { mount } from '@vue/test-utils';
import Vue from 'vue/dist/vue.common.js';
import SomeComponent from './SomeComponent.vue';

const wrapper = mount(SomeComponent, {
  localVue: Vue,
});

...

I expected webpack to take care of using the correct vue because I set the correct alias, but vue-test-utils needed some help here.

[ebwittenberg]

Use NODE_ENV to switch it or rewite the module path in jest config

@LinusBorg This is regards to: What if you wanted the runtime compiler only for jest tests?

Do you have an example of this? I've been trying to figure out how to get the compiler-included build to run in my jest tests but can't seem to get it to work. Thanks for the help, I know it's from awhile ago.

[melkishengue]

@ebwittenberg in the jest config you can re-map theVue import like this:

moduleNameMapper: {
    ...
    '^vue$': 'vue/dist/vue.common.dev.js',
    ...
},

Doing so, jest will use that path to resolve Vue for testing. This version includes the template compiler.

[suraiyaaysha]

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :

1. webpack.config.js

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

2. App.vue

new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

What is the solution if my projects in Nuxt.js. I am doing a Nuxt.js project and facing the same problem. What is the solution for Nuxt.js?

[hanmeiting]

I created project by @vue/cli. I solved my problem use this:

module.exports = { runtimeCompiler: true, }