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

0
votes

I'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:

Failed to mount component: template or render function not defined. (found in component <input-tag>)

Any ideas? I'm going crazy.

Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf

Thanks!

1
vue-componentvuejs2vue-loader
I think you should build it and point main file in package.json to this. - Quoc-Anh Nguyen
@imcvampire yeah, that's what I'm doing - Mati Tucci
Sorry but I can't see your dist folder in your repo so I can't do anything. - Quoc-Anh Nguyen
that's because is in the .gitignore. Is being generated after npm run build - Mati Tucci
So it will be ignored by npm when you run npm publish - Quoc-Anh Nguyen

1 Answers

0
votes

I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.

Here's more info from the 2.x docs: http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.

To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.

I did the following:

  1. npm install --save-dev aliasify

  2. edited the package.json to include this code:

    "aliasify": {
    "aliases": {
      "vue": "vue/dist/vue.js"
    }
  }

  3. added -t aliasify to my browserify command, which now reads:

    browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js

You can do this with webpack also--and there's info in the Vue.js docs for that.

I hope that helps!