[Vuejs]-Vue 2.0 – Failed to mount component: template or render function not defined despite defined render function

by

0👍

this error usually comes from pulling in the default vue.common.js which doesn’t include vue’s template parser. If you change your Vue import to:

import Vue from 'vue/dist/vue.js'

Does that fix it?

If it does then it’s an issue with your Elixir set up. laravel-elixir-vue-2 should be aliasing vue to this version if set correctly. You haven’t posted your gulp file but it should look something like below:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(mix => {

    mix.sass('app.scss')
       .webpack('main.js')

})

Looking at your gulp and main.js file again I realised you seem to have discrepancies between the files you are requiring. I’d assume that this is where the issue is coming from – you likely have the wrong version of Vue or one of its packages installed.

‘vuex-router-sync’ is the main reason I suggest this as this doesn’t support v2 of Vue or Vuex which would likely have breaking changes.

On a side note you don’t need require('laravel-elixir-webpack-official') within your gulpfile.

To fix things I’d probably recommend a separate fresh install of laravel so you can compare your package.json, main.js & gulpfile.

Fixing image references in webpack

Following your latest comment the errors you have compiling are caused by you incorrectly referencing your image locations.

If you are using the latest build of laravel then you have 2 default options for how you store your images. Either place them within resources/assets probably within an images directory. Or place them in storage/app/public again in an images directory.

The first location: resources/assets is then handled by webpack, and on compilation will minify, hash and copy these images into: public/img. To reference any of these images within your Vue app you simply resolve the path to them from the file you are working in, i.e.

# resources/assets/js/components/example.vue
<img src="../../images/logo.png">

points to resources/assets/images/logo.png

If however you want to serve static images (no hashing, minification etc..), then simply place them in storage/app/public/images and reference them like:

<img src="/images/logo.png">

0👍

Since you are using ES2015, you can do this:

new Vue({ // eslint-disable-line no-new
  name: 'app',
  el: '#app',
  render: (h) => h(App),
  router
});

The render is an object property that is a function. What you have is valid Javascript syntax, but it is not the signature that VueJs requires to set up your vue instance.

Leave a comment