Vue with Browserify on Runtime only build

Question

I've been trying to figure this one out but I always get

[Vue warn]: 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 )

I'm using laravel 5.2 with browserify with elixir and vue 2.2.2

I'm trying to display a simple view

this is my app.js

import Vue from 'vue';
import Test from './components/Test.vue';

new Vue({ el : '.container', render: h => h(Test) })

Test.vue

<template>
    <div class="view">
        <h1>{{msg}} </h1>
    </div>
</template>


<script type="text/javascript">
export default {
    data (){
        return {
            msg : 'This is Vue'
        }
    }
}
</script>

<style>
    div.view{
        padding:2em;
        position: relative;
    }


</style>

@justin.m.chase I don't have the answer. I want to use the runtime only build since it is lightweight. And no one's been able to give me the answer. — TheBAST
I actually managed to figure this out but I am using webpack instead of browserify. The problem seems to be that if you're just using require('vue') the file that the default resultion algorithm goes to doesn't have, as the error says, a template compiler. If you're running it in node for the server renderer then it works but if you try to webpack it for a browser its missing. So what you need to do is to essentially require vue.common.js instead, I can do this in webpack by adding this to the config: resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' }} — justin.m.chase
This question should be deleted. I already figured this one out. — TheBAST
I think its fine to leave it, I found this one sooner than I found the actual solution and the comments here will help someone if they have the same problem hopefully. — justin.m.chase

C. Bess C. Bess · Accepted Answer · 2017-04-06T05:37:12

Maybe this might help. This is an example of my setup. I'm also using VueRouter.

app.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    },
// .. others
});

const app = new Vue({
    router,
    render: createEle => createEle(App)
}).$mount('#app-container');

App.vue:

<template>
    <div id="app">
        <p>
            <router-link to="/foo">Foo</router-link>
            <router-link to="/foo2">Foo 2</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    // empty
}
</script>

index.html:

<div id="app-container"></div>

I hope that helps.

Ref: https://github.com/vuejs-templates/webpack/issues/215#issuecomment-292071919

Vue with Browserify on Runtime only build

2 Answers