Vue-loader: Vue-loader for none-spa applications

Created on 18 Jul 2016 · 8Comments · Source: vuejs/vue-loader

After upgrading to Vue 2.0, vue-loader no longer bootstraps my none-spa application. It says "Failed to mount component: template or render function not defined. (found in root instance)".

Previously, I can just mount Vue to the body of my website and have the whole application bootstrapped with Vue. How should I approach it with this new version?

Source

brainyl

Most helpful comment

To help ppl finding this issue from Google.

VueJS 2.0 uses virtual-dom and an import (or require) includes the runtime-only build that won't be able to compile the DOM.

Quote from Starter Resource :

That is the default export of the NPM package. If you do want to use the standalone build for some reason (e.g. because you have to use templates in an HTML document), you need to configure the bundler to alias vue to the standalone build instead.

With webpack, add the following alias to your webpack config:

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

For Browserify, you can use aliasify for the same effect.

Note: Do NOT do import Vue from 'vue/dist/vue' - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.

Grafikart on 22 Aug 2016

👍19

All 8 comments

Are you using var App = require('App.vue') instead of import App from 'App.vue'?

yyx990803 on 31 Jul 2016

😄1

No, I am using import App from 'App.vue'. However, I noticed that if I use import Vue from 'vue/dist/vue.js', the error disappears.

brainyl on 1 Aug 2016

👍8

To help ppl finding this issue from Google.

VueJS 2.0 uses virtual-dom and an import (or require) includes the runtime-only build that won't be able to compile the DOM.

Quote from Starter Resource :

With webpack, add the following alias to your webpack config:

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

For Browserify, you can use aliasify for the same effect.

Grafikart on 22 Aug 2016

👍19

I meet the same problem.

error message in chrome console:

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

package.json

{
    "name": "hello",
    "version": "1.0.0",
    "description": "hello",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-dev-server --content-base dist --inline --hot",
        "build": "webpack --progress --hide-modules",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "guyskk",
    "license": "MIT",
    "devDependencies": {
        "babel-core": "^6.13.2",
        "babel-loader": "^6.2.5",
        "babel-plugin-transform-runtime": "^6.12.0",
        "babel-preset-es2015": "^6.13.2",
        "babel-runtime": "^6.11.6",
        "css-loader": "^0.23.1",
        "html-webpack-plugin": "^2.22.0",
        "vue-hot-reload-api": "^1.3.3",
        "vue-html-loader": "^1.2.3",
        "vue-loader": "^8.5.2",
        "vue-style-loader": "^1.0.0",
        "webpack": "^1.13.2",
        "webpack-dev-server": "^1.15.0"
    },
    "dependencies": {
        "vue": "^2.0.0-rc.3"
    }
}

webpack.config.babel.js

import HtmlWebpackPlugin from 'html-webpack-plugin'

export default {
    entry: './src/index.js',
    output: {
        path: './dist',
        filename: 'bundle.[hash].js'
    },
    module: {
        loaders: [{
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    devtool: '#source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
}

src/comp/app.vue

<template>
<div class="example">
    {{ msg }}
</div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello world!'
        }
    }
}
</script>

<style>
.example {
    color: red;
}
</style>

src/index.js

import Vue from 'vue'
import App from './comp/app.vue'

new Vue({
    el: '#app',
    components: {
        app: App
    }
})

src/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Vue.</title>
</head>

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

</html>

guyskk on 24 Aug 2016

@guyskk

https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds

new Vue({
    render(h) {
      return h(App)
    }
}).$mount('#app')

LinusBorg on 24 Aug 2016

👍6 🎉5 😄1

@LinusBorg

I change my code as you said, it still not work:

vue.common.js:2233[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in anonymous component - use the "name" option for better debugging messages.)

guyskk on 24 Aug 2016

@guyskk a workaround is to add an alias to your webpack config file
resolve: { alias: { vue: 'vue/dist/vue.js' } },
this will ensure the standalone build is used, as opposed to the runtime-only build which is pulled in by default.

brainyl on 24 Aug 2016

👍3

You have to upgrade vue-loader as well.

npm install --save-dev vue-loader@next

Then run npm install again to get dependencies uptodate.

LinusBorg on 24 Aug 2016

👍1

Was this page helpful?

0 / 5 - 0 ratings