Failed to mount component: template or render function not defined. (found in root instance) #713

lzxb · 2016-10-02T10:48:46Z

I write it in this case, but it is wrong.
http://router.vuejs.org/en/essentials/getting-started.html

"vue": "^2.0.1",
"vue-router": "^2.0.0",
"vuex": "^2.0.0"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>
</body>
</html>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 0. If using a module system, call Vue.use(VueRouter)

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for routes: routes
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

// Now the app has started!

open url http://localhost:3000/admin/#/bar

The text was updated successfully, but these errors were encountered:

fnlctrl · 2016-10-02T11:10:55Z

Hi, thanks for filling this issue.
If you import Vue from 'vue'; you get the runtime only build that cannot compile templates (either in-dom templates or template option).
In this case you need the standalone build, here is a helpful section explaining this:
https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

lzxb · 2016-10-02T11:18:02Z

thank you

vanpipy · 2016-11-09T15:26:16Z

Hello :D @fnlctrl @lzxb.

I follow @fnlctrl advice to fix the vue template compiler.

But another problem come out.

All the get start vue code copy from get-start-page

The different is webpack config.
Here is below:

const rucksack = require('rucksack-css');
const Webpack = require('webpack');
const path = require('path');

function makeWebpackConfig() {
    return {
        context: path.join(__dirname, './client'),
        entry: {
            js: './index.js',
            html: './index.html',
            vendor: [
                'vue',
                'vue-router',
            ]
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/',
            filename: 'bundle.js'
        },
        module: {
            loaders: [
                {
                    test: /\.html$/,
                    loader: 'file?name=[name].[ext]'
                },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                },
                {
                    test: /\.css$/,
                    include: /client/,
                    loaders: [
                        'style-loader',
                        'css-loader',
                        'postcss-loader'
                    ]
                }
            ]
        },
        resolve: {
            extensions: ['', '.js', '.jsx'],
            alias: {
                'vue$': 'vue/dist/vue.js'
            }
        },
        postcss: [
            rucksack({
                autoprefixer: true
            })
        ],
        plugins: [
            new Webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
            new Webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
                }
            })
        ],
        devServer: {
            contentBase: './client',
            hot: true
        }
    };
}

And after the new Vue({ router }).$mount the div#app inner router-view display nothing, I try to compare the get start live example with mine but nothing found.

Can anyone give me some advice for this?

That's mine fault, it's need more { routes } in it. It's fixed already :D. Thanks.

ModleIory · 2016-11-28T01:23:50Z

It works!!! good!

oleynikd · 2016-12-02T19:55:28Z

Should I also use standalone build if I'm using Single File Components?

fnlctrl · 2016-12-03T04:41:19Z

@oleynikd No, single file components will have their templates compiled at build time. As long as you don't use the template: ... option or in-dom templates, you can use the lighter runtime-only build.

xqyww123 · 2016-12-04T12:39:31Z

@fnlctrl so here is the problem. In main.js, which isn't a single file component so that can not be compiled, how can I declare the top component app under the body tag, without template: ... option in main.js or in-dom template in index.html

fnlctrl · 2016-12-04T13:16:21Z

@xqyww123 If you're using the runtime-only build, anything put inside html cannot be compiled. Therefore, you'll need the mount method

A simple example:

// your entry js
import App from './App.vue';
new Vue(App).mount('#app');

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

If you need to add a router/store instance to the root instance, it'll have to be slightly modified:

// your entry js
import App from './App.vue';
import store from './store';
import router from './router';

new Vue({
   ...App // ES7 Object rest spread operator (or Object.assign)
   router,
   store
}).mount('#app');

The above is the javascript approach.
However, if you want to avoid the rest spread operator / Object.assign, another approach would be using vue's render functions:

// your entry js
import App from './App.vue';
import store from './store';
import router from './router';

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

AnsonHwang86 · 2016-12-14T10:02:15Z

@fnlctrl Therefore, you'll need the mount method. You mean instance method $mount can compiled anything inside html? I make a demo and find this wrong. Runtime-only build with method $mount cann't compiled anything inside html.
My code:

// index.html

<div id="app">
  {{ message }}
</div>

// main.js

import App from './App.vue'
new Vue({
  data: {
    message: 'hello, kitty!'
  }
}).$mount('#app') // Noted, it's "$mount" instead "mount", $mount is vue instance method

// result vue.runtime.common.js:519 [Vue warn]: Failed to mount component: template or render function not defined.
Your demo is very nice, thanks.

fnlctrl · 2016-12-14T10:29:10Z

You mean instance method $mount can compiled anything inside html?

No. That's not what I said. Let me rephrase that: since the runtime-only build cannot compile anything (in-dom, template string), you can't put templates inside html, so you either use $mount or the el option to mount the component to the target.

ubershmekel · 2016-12-17T04:40:35Z

For anyone still finding this thread, this is how I ended up getting past this error for my browserify and typescript setup:

import * as Vue from 'vue/dist/vue.common.js';

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

seanfisher · 2017-01-02T22:34:00Z

@ubershmekel Not to take us too off-topic, but how do you get typings with that setup?

zcdziura · 2017-02-07T19:39:36Z

If you're using Webpack 2 to build your application, here is what I did to resolve the problem:

From webpack.config.js:

module.exports = {
    ...
    resolve: {
        extensions: ['.js'],
        alias: {
            'vue': 'vue/dist/vue.common.js'
        }
    },
    ...
}

From there, you are able to install Vue as you would expect using ES6 syntax:

import Vue from 'vue';

aiqin-bao · 2017-10-27T01:59:32Z

有中文的解答吗？看得不是很明白？？

wspl · 2017-11-01T10:40:09Z

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: require('../pages/Main.vue').default
    }
  ]
})

if you use require in router, you need add a .default after require expression.

jacky-jiang · 2017-11-01T13:06:18Z

as @wspl commented, it would work well.

another option is 'import' as following:

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../pages/Main.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

0x1af2aec8f957 · 2017-11-07T10:29:17Z

删除你的module文件夹，重新更新安装所有依赖（使用npm进行安装）。请不要通过cnpm进行安装依赖，这会导致有些包找不到地址（无法正常找到）。推荐使用npm，更换镜像地址即可！

sxei · 2017-12-06T12:53:17Z

一群中国人在这里用英语交流，也是醉了哈

toshcn · 2017-12-19T02:37:57Z

@wspl thanks
正解
the right answers
add the require .default
routes: [
{
path: '/',
component: require('../pages/Main.vue').default
}
]

SageSanyue · 2018-07-11T01:02:59Z

Smilar problem, when I write:

let routes = [{
path: '/',
component: require('./components/member.vue')
}]
it failed:[Vue warn]: Failed to mount component: template or render function not defined.
add ".default", it works!

let routes = [{
path: '/',
component: require('./components/member.vue').default
}]
PS:"vue": "^2.5.2","vue-router": "^3.0.1""vue-loader": "^13.3.0",

0x1af2aec8f957 · 2018-07-11T02:38:05Z

@SageSanyue 你可以尝试使用webpack的动态导入语法：

component: () => import ('./HelloWorld')

const routes = [{
path: '/',
component: () => import('./components/member.vue')
}]

上述代码在webpack^3.0中正常工作。

Deg5112 · 2018-07-30T21:14:56Z

thank you @notescript

molerat619 · 2018-08-02T12:36:10Z

I still have this issue. This is my app.js:

components/index.js:

I get this issue only when I enable esModul in webpack like so:
mix.config.vue.esModule = true;

How can I fix this? The routes should be fine, I use import.

0x1af2aec8f957 · 2018-08-02T17:15:33Z

@molerat619 你可以换一种提问题的方式？

期望 -> 现状 -> 结果

---代码---

---问题描述---

你应该尽可能详细的描述你遇到的问题。

PayteR · 2018-09-18T19:27:04Z

i ran into same issue, but my solution was this:

https://stackoverflow.com/questions/49138501/vue-warn-failed-to-mount-component-template-or-render-function-not-defined-i

i think it's same as in @molerat619 example

askanhan · 2018-10-25T11:21:45Z

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'

javierojeda94 · 2018-10-25T21:57:53Z

@askanhan solution worked perfect for me! Still I don't know why that caused the problem, the software I'm working on has been online for about 3 years and we are using Vue since 1 year ago but it worked fine :(

isofttechn · 2018-12-27T09:37:59Z

I solve mine by adding default after closing curly bracket. '.default'. e.g.
const routes = [
{ path: '/foo', component: Foo }.default,
{ path: '/bar', component: Bar }.default
]

askanhan · 2019-01-03T08:24:41Z

@askanhan solution worked perfect for me! Still I don't know why that caused the problem, the software I'm working on has been online for about 3 years and we are using Vue since 1 year ago but it worked fine :(

Couldn't find any reason but I believe it has something to do with the updates of webpack or so

benmo1602 · 2019-02-26T13:55:20Z

我遇到这个问题了，打开router .js 然后 ctrl + s 就好了，真是诡异

skinnn · 2019-07-01T23:47:00Z

@wspl Thanks, thanks really all I needed to fix the error:

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

egulhan · 2019-10-24T07:56:54Z

@skinnn, maybe you must be missing default keyword when you use like that: require('./components/Example.vue').default

codegeek1001 · 2019-11-11T00:16:40Z

I was getting the same error but adding .default helped as well. Here is my app.js in case it helps anyone else:

import Vue from "vue";
Vue.component("my-component", require("./components/my-component.vue").default);

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

Kasre96 · 2020-01-28T11:06:01Z

Adding .default works for me too.

In case yours doesn't change after adding .default try recompiling your code (.eg. npm run dev). Worked for me.

salahfarzin · 2020-03-03T19:59:39Z

Adding .default at the end of component line and worked
import VueRouter from "vue-router";
let routes = [
{
path: '/',
component: require('./components/Home').default
},
{
path: '/coupon',
component: require('./components/Coupon').default
}
];
export default new VueRouter({
routes
});

chinela · 2020-04-25T08:03:46Z

You can do
import Home from './components/Home;

let routes = [ { path: '/', component: Home }, ]

NickCashFlow · 2021-02-09T08:45:30Z

I got this error because I had empty style section. Fill the style section or remove it and the problem will solved.

bhojkamal · 2021-05-09T07:54:42Z

I got blank on my web page. On console, I got this error ->

Vue warn]: Failed to mount app: mount target selector "#app" returned null.

I have used vue 3 with laravel 8 and used laravel-mix.

I've added the bootstrap 5 but it is working on my laravel blade template but other vue component is not working.

On blade

<body class="text-center">
  <div>
    <h2>Hello laravel 8</h2> <!-- this is showing on output in webpage with text center that come from app.js -->
  </div>
  <div id="#app"></div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>

On app.js

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min';
const app = createApp(App)
app.use(router)
app.mount('#app')

on App.vue

<template>
  <div class="text-center">
    <h1 class="text-bold"> Namaste from vue component </h1> <!-- this is not showing on output in webpage -->
    </div>
  <router-view></router-view>
</template>
<script>
export default {
  name: 'App'
}
</script>

javierojeda94 · 2021-05-09T14:25:13Z

@bhojkamal so by reading the error you should be able to tell what's wrong.

Replace <div id="#app"></div> with <div id="app"></div> and that should be it.

fnlctrl closed this as completed Oct 2, 2016

noelbk mentioned this issue Feb 24, 2017

20170221 audio StemboltHQ/battle_snake#48

Merged

CoolGoose mentioned this issue Jun 14, 2017

Failed to mount component: template or render function not defined matfish2/vue-tables-2#185

Closed

zhangxiang958 mentioned this issue Oct 18, 2017

vue-swipe-tab not working in standard vue-cli vue-webpack template environment zhangxiang958/vue-tab#1

Closed

yurii-github mentioned this issue Oct 28, 2019

update docs for standalone #3011

Closed

izshreyansh mentioned this issue Apr 23, 2020

Failed to mount component: template or render function not defined thetutlage/vue-clip#73

Open

Failed to mount component: template or render function not defined. (found in root instance) #713

Failed to mount component: template or render function not defined. (found in root instance) #713

Comments

lzxb commented Oct 2, 2016 • edited Loading

fnlctrl commented Oct 2, 2016

lzxb commented Oct 2, 2016

vanpipy commented Nov 9, 2016 • edited Loading

ModleIory commented Nov 28, 2016

oleynikd commented Dec 2, 2016

fnlctrl commented Dec 3, 2016

xqyww123 commented Dec 4, 2016 • edited Loading

fnlctrl commented Dec 4, 2016

AnsonHwang86 commented Dec 14, 2016

fnlctrl commented Dec 14, 2016

ubershmekel commented Dec 17, 2016 • edited Loading

seanfisher commented Jan 2, 2017

zcdziura commented Feb 7, 2017

aiqin-bao commented Oct 27, 2017

wspl commented Nov 1, 2017

jacky-jiang commented Nov 1, 2017

0x1af2aec8f957 commented Nov 7, 2017 • edited Loading

sxei commented Dec 6, 2017

toshcn commented Dec 19, 2017 • edited Loading

SageSanyue commented Jul 11, 2018 • edited Loading

0x1af2aec8f957 commented Jul 11, 2018 • edited Loading

Deg5112 commented Jul 30, 2018 • edited Loading

molerat619 commented Aug 2, 2018

0x1af2aec8f957 commented Aug 2, 2018

PayteR commented Sep 18, 2018 • edited Loading

askanhan commented Oct 25, 2018

javierojeda94 commented Oct 25, 2018

isofttechn commented Dec 27, 2018

askanhan commented Jan 3, 2019

benmo1602 commented Feb 26, 2019 • edited Loading

skinnn commented Jul 1, 2019

egulhan commented Oct 24, 2019

codegeek1001 commented Nov 11, 2019

Kasre96 commented Jan 28, 2020

salahfarzin commented Mar 3, 2020 • edited Loading

chinela commented Apr 25, 2020

NickCashFlow commented Feb 9, 2021

bhojkamal commented May 9, 2021

I got blank on my web page. On console, I got this error ->

I have used vue 3 with laravel 8 and used laravel-mix.

javierojeda94 commented May 9, 2021

lzxb commented Oct 2, 2016 •

edited

Loading

vanpipy commented Nov 9, 2016 •

edited

Loading

xqyww123 commented Dec 4, 2016 •

edited

Loading

ubershmekel commented Dec 17, 2016 •

edited

Loading

0x1af2aec8f957 commented Nov 7, 2017 •

edited

Loading

toshcn commented Dec 19, 2017 •

edited

Loading

SageSanyue commented Jul 11, 2018 •

edited

Loading

0x1af2aec8f957 commented Jul 11, 2018 •

edited

Loading

Deg5112 commented Jul 30, 2018 •

edited

Loading

PayteR commented Sep 18, 2018 •

edited

Loading

benmo1602 commented Feb 26, 2019 •

edited

Loading

salahfarzin commented Mar 3, 2020 •

edited

Loading