83

This is my main javascript file:

import Vue from 'vue'

new Vue({
  el: '#app'
});

My HTML file:

<body>
    <div id="app"></div>

    <script src="{{ mix('/js/app.js') }}"></script>
</body>

Webpack configuration of Vue.js with the runtime build:

alias: {
    'vue$': 'vue/dist/vue.runtime.common.js'
}

I am still getting this well known error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

How come when I don't even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error? It says found in root but there is nothing to be found because it does not even have any content?

How am I suppose to mount if this does not work?

Edit:

I have tried it like this which seems to work:

new Vue(App).$mount('#app');

It make sense because using the el property implies you are 'scanning' that dom element for any components and it's useless because the runtime build does not have a compiler.

Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.

Hopefully somebody could confirm my thoughts.

2
  • In my case just write <templates**> rather than <template**> and that all story for me
    – user956584
    Jul 9, 2021 at 4:03
  • and in my case, I was just missing the inline-template notation - <my-component inline-template>
    – Grant
    Nov 22, 2022 at 15:13

28 Answers 28

80

In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5.

In Laravel Mix Version 2, you import vue components as follows:

Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue')
);

In Laravel Mix Version 5, you have to import your components as follows:

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

Here is the documentation: https://laravel-mix.com/docs/5.0/upgrade

Better, to improve performance of your app, you can lazy load your components as follows:

Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));
2
  • 11
    Or append .default to the require whatever you would like to use.
    – Stephan-v
    Sep 25, 2019 at 7:13
  • 1
    That will work but per the documentation, switching to EcmaScript imports is the recommended option.
    – mutiemule
    Sep 25, 2019 at 10:40
58

If you used to calle a component like this:

Vue.component('dashboard', require('./components/Dashboard.vue'));

I suppose that problem occurred when you update to laravel mix 5.0 or another libraries, so you have to put .default. As like below:

Vue.component('dashboard', require('./components/Dashboard.vue').default);

I solved the same problem.

0
37

The reason you're receiving that error is that you're using the runtime build which doesn't support templates in HTML files as seen here vuejs.org

In essence what happens with vue loaded files is that their templates are compile time converted into render functions where as your base function was trying to compile from your html element.

4
  • 5
    My vue files don't even have templates. That's my issue.
    – Stephan-v
    Feb 1, 2017 at 19:27
  • 3
    @Stephan-v That's a separate issue, What I posted was about mounting a vue instance onto a dom element. if you use the el attribute you need to either have a render function or a template compiler so it can parse the html and build the internal rendering structure. if you do not have one of those it will error as it can not compile the instance. Feb 1, 2017 at 20:52
  • 2
    what do i have to do to resolve this issues Jun 2, 2021 at 12:33
  • This problem can be caused by a lot of different issues see here Jun 28, 2021 at 15:53
34

In my case, I imported my component (in router) as:

import bsw from 'common-mod/src/components/webcommon/webcommon'

It is simply solved if I changed it to

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
5
  • 5
    Lost so much time figuring this out. How inaccurate are the error messages in Vue. Damn.
    – Mahesh
    Oct 3, 2019 at 22:49
  • 1
    It worked for me too. Could someone explain what the difference is between both importations? Oct 17, 2019 at 10:13
  • 1
    I guess it has something to do with the updated rules of importing of webpack module. In this way, it recognizes that it is a vue files and mount it correctly.
    – Asqan
    Oct 17, 2019 at 10:37
  • 1
    For me this is the correct answer. Do not forget the .vue extention during import!
    – xing
    Nov 14, 2019 at 7:57
  • Man thanks a lot! I stuck on this sh.t half days ago, and I also just forgot to put .vue to one of my component imports...
    – Zsoca
    Apr 11, 2020 at 9:46
14

If someone else keeps getting the same error. Just add one extra div in your component template.

As the documentation says:

Component template should contain exactly one root element

Check this simple example:

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>
11

My previous code was

Vue.component('message', require('./components/message.vue'));

when i got such errors then i just add .default to it and it worked..

Vue.component('message', require('./components/message.vue').default);
0
8

In my case, I was using a default import:

import VueAutosuggest from 'vue-autosuggest';

Using a named import fixed it: import {VueAutosuggest} from 'vue-autosuggest';

8

There is an update from Laravel Mix 3 to Laravel 4 which may affect the answer for all components.
See https://laravel-mix.com/docs/4.0/upgrade for more details.

Let 'example-component' be the example component, whose address is './components/ExampleComponent.vue'.

Laravel 3:

 Vue.component('example-component', require('./components/ExampleComponent.vue'));

Laravel 4:

The change is that a .default is added.

 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
0
7

Something like this should resolve the issue..

Vue.component(
'example-component', 
require('./components/ExampleComponent.vue').default);
7

As a Summary of all the posts

This error:

[Vue warn]: Failed to mount component: template or render function not defined.

You're getting because of a certain problem that's preventing your component from being mounted.

This can be caused by a lot of different issues, as you can see from the different posts here. Debug your component thoroughly, and be aware of everything that is maybe not done correctly and might prevent the mount.

I was getting the error when my component file was not encoded correctly...

2
  • 1
    Wow, underrated answer. Thank you. My problem file was encoded as 'utf-16'. I changed it to utf-8 and was working.
    – tno2007
    Jan 29, 2020 at 18:01
  • 1
    yes, it's bad that Vue errors (similar to NG errors :) ) are oftenly so ambiguous. Apr 25, 2022 at 19:11
4

I had this script in app.js in laravel which automatically adds all components in the component folder.

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

To make it work just add default

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
0
4
let allSalary = require('./components/salary/index.vue');

instead use this

let allSalary = require('./components/salary/index.vue').default;
3

I personally ran into the same error. None of the above solutions worked for me.

In fact, my component looks like this (in a file called my-component.js) :

Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

And I imported it like this in another component:

import MyComponent from '{path-to-folder}/my-component';

Vue.component('parent_component', {
    components: {
        MyComponent
    }
});

The weird thing is that this worked in some components but not in this "parent_component". So what I had to do in the component itself was stock it in a variable and export it as default.

const MyComponent = Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

export default MyComponent;

It could seem obvious but as I said above, it works in 1 other component without this so I couldn't really understand why, but at least, this works everywhere now.

2
  • Is this really the right way? It did solve my problem, but i don't understand why.
    – David
    Nov 27, 2019 at 23:44
  • I have this exact same issue. Component works well in one parent, fails in the other
    – Murwa
    Mar 15, 2020 at 6:06
3

I cannot believe how did I fix the issue! weird solution!
I kept the app running then I removed all template tags and again I returned them back and it worked! but I don't understand what happened.

0
3

Make sure you import the .vue extension explicitly like so:

import myComponent from './my/component/my-component.vue';

If you don't add the .vue and you have a .ts file with the same name in that directory, for example, if you're separating the js/ts from the template and linking it like this inside of my-component.vue:

<script lang="ts" src="./my-component.ts"></script>

... then the import will bring in the .ts by default and so there really is no template or render function defined because it didn't import the .vue template.

When you tell it to use .vue in the import, then it finds your template right away.

2

I am using Typescript with vue-property-decorator and what happened to me is that my IDE auto-completed "MyComponent.vue.js" instead of "MyComponent.vue". That got me this error.

It seems like the moral of the story is that if you get this error and you are using any kind of single-file component setup, check your imports in the router.

2

When used with storybook and typescirpt, I had to add

.storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules.push({
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true
                },
            }
        ],
    });

    return config;
};
2

You are missing the <template> tag for the HTML part.

0
2

Try adding .default in you require component

   let routes = [{
   path: '/dashboard',
   component: require('./components/Dashboard.vue').default
  }
]
1

I'll add this here b/c there seem to be a number of different reasons why this very frustrating error can appear. In my case, it was a question of syntax in my import statement. I had

import DataTable from '@/components/data-table/DataTable';

when I should have had

import DataTable from '@/components/data-table/';

Your project setup and configuration may vary but if you're getting this error I suggest that you check that the import syntax for your component is as expected for your project.

1

in my case, it worked for me

const routes = [
{ path: '/dashboard', component: require('./components/Dashboard.vue').default },
{ path: '/profile', component: require('./components/Profile.vue').default }]
1

This error was for me because of wrong import

instead

components: {
  MyComp: import('./MyComp.vue'),
}

write

components: {
  MyComp: () => import('./MyComp.vue'),
}
0
0

I got same error before I forgot to enclose component content in template element.

I have this initially

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './com/Home.vue';

Vue.use(VueRouter);

Vue.router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

Then in Home.vue I have:

<h1>Hello Vue</h1>

Hence the error:

Failed to mount component: template or render function not defined.

found in

---> <Home> at resources/js/com/Home.vue
       <Root>

Enclosing in element fixed the error:

<template>
   <h1>Hello Vue</h1>
</template>
0

Yet another idea to throw in to the mix... In my case, the component throwing the error was a template-less component with a custom render() function. I couldn't see why it wasn't working, until I realised that I hadn't put <script>...</script> tags around the code in the component (seemed unnecessary, since I had no template or style tags either). Not sure why this got past the compiler...?

Either way... make sure you use your <script> tags ;-)

0

Similar issue here in my visual.ts file i had to change:

import { createApp } from 'vue'
import Visual from './Visual.vue'
- const app = createApp({Visual}).mount('#visual')
+ const app = createApp(Visual).mount('#visual')
0

<template><div></div></template>

In my case ,my child component was blank ! And i was importing it in parent component without any template,script or style(complete blank child.vue file). So i just added above template in my child component and its working fine.

0

That was a mistake when I worked at Laravel. The code that worked for me

//require('./bootstrap');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');
import Vue from 'vue'

Vue.component('dictionary-index',  () => import('./components/DictionaryIndex.vue'));

Vue.component('dictionary-create',  () => import('./components/DictionaryCreate.vue'));

Vue.component('dictionary-cat',  () => import('./components/DictionaryCategory.vue'));

const app = new Vue({
    el: '#app',
});
0

I solved this by removing the node_modules directory and run npm install and npm run dev again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.