Parcel: Parcel + vue

Created on 20 Oct 2018  ·  7Comments  ·  Source: parcel-bundler/parcel

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

Vue.use(VueRouter);

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in )

Question

Most helpful comment

Not a parcel error, you're not defining a render function when initialising the Vue instance.
e.g:

import Vue from 'vue'
import vmApp from './app.vue'

new Vue({
    el: '#app',
    render (h) {
        h(vmApp)
    }
})

Another possible solition is to start with a component instead by doing.

import Vue from 'vue'
import vmApp from './app.vue'

new Vue(vmApp).$mount('#app')

Parcel uses the runtime-only build when importing 'Vue' since this is the default from Vue itself. ~I think the Parcel 2.0 RFC mentions aliases and you'll be able to use somethink like this in the future.~

You can alias the Vue import in your package.json to include the template builder too.

alias: {
    'Vue' : 'vue/dist/vue.js'
}

All 7 comments

Is this an error message?

Not sure what you're asking here

If you quote Vue directly from the node_modules directory, you will report the following error:
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Not a parcel error, you're not defining a render function when initialising the Vue instance.
e.g:

import Vue from 'vue'
import vmApp from './app.vue'

new Vue({
    el: '#app',
    render (h) {
        h(vmApp)
    }
})

Another possible solition is to start with a component instead by doing.

import Vue from 'vue'
import vmApp from './app.vue'

new Vue(vmApp).$mount('#app')

Parcel uses the runtime-only build when importing 'Vue' since this is the default from Vue itself. ~I think the Parcel 2.0 RFC mentions aliases and you'll be able to use somethink like this in the future.~

You can alias the Vue import in your package.json to include the template builder too.

alias: {
    'Vue' : 'vue/dist/vue.js'
}

@Hammster aliasing is already possible in Parcel 1. It's just not documented very well

@Hammster Thanks to your answer, I have solved the problem. Thank you.

Closing. The Parcel website was also updated to have an actually working example.

~I'm using the same code given here - more specifically the one from Parcel website -, but I'm still seeing the error message. It says (found in <Root>), though, which I'm not sure is a difference or an omission from the OP...
As the website documentation doesn't mention the alias, I tried both variants, with and without it present, but it doesn't seem to make any difference.~

Update: It seems I still had an old version of Parcel installed globally. After removing that one, everything worked as expected. Nice! :tada: :heart:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

oliger picture oliger  ·  3Comments

davidnagli picture davidnagli  ·  3Comments

algebraic-brain picture algebraic-brain  ·  3Comments

devongovett picture devongovett  ·  3Comments

medhatdawoud picture medhatdawoud  ·  3Comments