使用Vue模板时出错：无法安装组件：未定义模板或渲染功能

Question

I am trying to make some Vue Templates, but i still encounter this error:

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

I found a lot of suggestions that i should include the full Vue to make this work. So i did in the bootstrap.js:

window.Vue = require('vue/dist/vue.common.js');

sadly it didnt help.

Any suggestions?

EDIT:

I think the problem is that i am trying to use an inline-template inside another one:

create.vue:

<script>
    import PartnerData from './PartnerForm.vue';

    export default {

        components: {
            'partnerdata': PartnerData
        },

        data() {
            return {}
        },

        mounted() {
            console.log('hello');
        },

    }
</script>

PartnerForm.vue:

<script>
    export default {

    }
</script>

and this is my form.blade.php

<partnerdata inline-template>

    <div class="ui grid form">

        <div class="two column row">

            <!--COLUMN 1-->
            <div class="column">
...
</partnerdata>

when i just put a template tag in the PartnerForm.vue like this:

<template> HELLO </template>
<script>
    export default {

    }
</script>

Then Hello gets rendered. But if i try to use the form as an inline template i get that error.

Answer 1

see the installation instructions from here.

Vue Installation

see this part https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

and this https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

It states the following configurations

Webpack

if you are using laravel

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')
rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

Browserify

Add to your project’s package.json:
{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

EDIT

after installing laravel 5.5 see packages.json

.....
"devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
}

}

to install the dependencies

run npm install 

now you can use laravel mix

see packages.json again

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

that means now you can run those commands with 'npm run'. example:npm run dev,

see the command config file

config=node_modules/laravel-mix/setup/webpack.config.js

which loads this config file

https://github.com/JeffreyWay/laravel-mix/blob/v1.0.0/src/builder/WebpackConfig.js

in this file you will see that it has been already configured in laravel mix for you. following method of above file does that for you.

/**
 * Build the resolve object.
 */
buildResolving() {
    let extensions = ['*', '.js', '.jsx', '.vue'];

    if (Config.typeScript) {
        extensions.push('.ts', '.tsx');
    }

    this.webpackConfig.resolve = {
        extensions,

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

    return this;
}