I can't use .vue anymore in vuejs 2 when using runtime only build

[dluague]

When using .vue file for my custom components it throws an vue warning.
[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

But if I use the standalone build it works fine.

[LinusBorg]

Please provide the relevant code,m including the main.js and package.json

[dluague]

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-plugin-syntax-object-rest-spread": "^6.8.0",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "font-awesome": "^4.6.3",
    "gulp": "^3.9.1",
    "js-cookie": "^2.1.2",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-vueify-next": "^1.0.2",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "particles.js": "^2.0.0",
    "sweetalert": "^1.1.3",
    "vue": "^2.0.0-beta.6",
    "vue-resource": "^0.9.3",
    "vue-router": "^2.0.0-beta.4",
    "vuex": "^2.0.0-rc.3"
  }
}

app.js

import Vue from 'vue'

//import Particles from './components/particles.vue';
import AjaxForm from './components/form.vue';
import Dropdown from './components/dropdown.vue';
import Modal from './components/modal.vue';

// Vuex
import { mapGetters, mapActions } from 'vuex';
import store from './vuex/store.js';

import Vuex from 'vuex';

Vue.use(Vuex);

var app = new Vue({
    el: '#app',
    components: {
        //Particles,
        AjaxForm,
        Dropdown,
        Modal
    },
    store,
    mounted() {

    },     
    data() {
        return {
            birthday: {month: '00', year: '0000', day: '00', date: '0000-00-00'},
        }               
    },
    watch: {
        'birthday': {
            handler(val, oldVal) {
                this.birthday.date = `${this.birthday.year}-${this.birthday.month}-${this.birthday.day}`;
            },
            deep: true
        }
    },
    methods: {        
        showModal(name) {
            this.$refs['login-modal'].open = true;
        },
        ...mapActions(['bodyWasClicked'])
    }
});

modal.vue

<template>
    <transition>
        <div class="modal fade" :class="classes">
            <div 
                class="modal-dialog" 
                role="document" 
                @mouseover="mouseover"
                @mouseleave="mouseleave"
            >
                <div class="modal-content">
                    <div class="modal-header" v-if="title">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" v-text="title"></h4>
                    </div>
                    <div class="modal-body">
                        <slot name="body"></slot>
                    </div>
                    <div class="modal-footer" v-if="footer">
                        <slot name="footer"></slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import { mapGetters } from 'vuex';

    export default {
        props: {
            title: {
                type: String,
                default: null
            },
            footer: {
                type: Boolean,
                default: false
            },
            static: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                open: false
            }
        },
        computed: {
            classes() {
                return {in: this.open};
            },
            isBodyWasClicked () { 
                return this.$store.getters.isBodyWasClicked;
            }
        },
        mounted() {

        },
        watch: {
            open() {
                if (this.open) {
                    this.show();
                }
            }            
        },
        methods: {
            show() {
                document.body.classList.add('modal-open');
            },
            close() {
                document.body.classList.remove('modal-open');
                this.open = false;
            },            
            mouseover() {
                this.open = true;
            },
            mouseleave() {
                if (this.isBodyWasClicked && ! this.static) { 
                    this.close();
                }
            }
        }
    }
</script>

[LinusBorg]

import Vue from 'vue' loads the runtime-only build by default. This means you can't define any templates in the index.html file.

You have to either

• provide a template string template: '<div><modal> ... </modal></div>'
• use a render() function

The best way is susually to put all the functionality and template code that you might currently have in the main instance and template in App.vue and have the main instance only do this:

new Vue({
  el: '#app',
  template: `<app></app>`
})

[LinusBorg]

This should be closed now, as it is not a bug. For support questions, we have the forum and gitter.

[dluague]

even if I'm using browserify?

[annothernother]

What I'm getting from this issue is that vueify is not yet compatible with Vue 2.0 short of a workaround with aliasify; the 1/3 size reduction of Vue is not available to browserify-based builds?

This means you can't define any templates in the index.html file.

I'm not doing this and I am still getting the error.

Browserify is not handling the necessary transformations of the template contents of .vue files to work around the runtime-only absence of template compilation. If this isn't a bug then it seems to me that it is an incompatibility.

From the 2.0 RC wiki:

When you use vue-loader or vueify to import *.vue files, their parts are automatically compiled into render functions. It is therefore recommended to use the runtime-only build with *.vue files.

This is not happening, so far as I can see.

I have an index.html with no templates in it, I'm mounting onto a div#app tag in that index.html with a main.vue. In the compiled source I see that the main app module is still given a template field in browserify's output, which is triggering the failure:

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

If there is a vueify@next available there is no notation that I can see; compare this issue in vue-loader

I note also that the official template for Vueify just aliases to the standalone distribution. To me that looks like a temporary workaround.

[annothernother]

For reference (irrelevant parts omitted):

index.html

<!doctype html>
<html>
<body>
    <div id='app'></div>
</body>
<script src="/src/main.js"></script>
</html>

main.vue, included in main.js

<style></style>

<template>
    <menubar></menubar>
    <side></side>
</template>

<script>
var VueRouter = require('vue-router');

var menubar = require('./menubar.vue');
var sidebar = require('./sidebar.vue');
var routes = [
    //omitted
];

var router = new VueRouter({
    mode: 'history',
    routes: routes
});


    module.exports = {
      router: router,
      components: {
        menubar: menubar,
        side: sidebar
      }
    };
</script>

Output includes:

.template = "\n<menubar></menubar>\n<side></side>\n"

[LinusBorg]

The alias is Not a workaround and vueify is compatible with 2.0.

Have you tried the latest browserify template?

Or can you share the repo that is not working for you?

[annothernother]

I could perhaps post a repo. I'm trying to use a pretty bare browserify+vueify implementation. I looked at the latest browserify template and the aliasify usage is what I'm trying to avoid.

I'll see if I can get a repo up.

[annothernother]

Let me clarify: if I have to use aliasify then I'm not able to use the runtime version of Vue (the one without the template compiler). Even the production build of the browserify template seems to rely on aliasify.

[LinusBorg]

The alias is only required if you want or have to use the standalone build. The reason is explained in the wiki page above.

If your setup does not need standalone (which yours seems to be the case), runtime-only is fine and it should just work.

[LinusBorg]

Apologies, I never linked the wiki page in this issue.

It's in the Vue repo.

I assume you simply have to do mom install vueify@next

[annothernother]

In building a standalone bare example I have been able to resolve the issue. I had not installed the @next version of vueify (and then ran into some weird inability to uninstall it, reinstalled everything@next from scratch in the original project and got it working).

I toyed with the idea of submitting a pull request to the vueify readme to add a quick note suggesting to install vueify@next for Vue 2.0 (the same way the vue-router has warnings about vue 2.0) but do not know if this would be accepted. Maybe I'll just give it a go.

It would have saved me a ton of time if it were clearer that there is a vueify@next. I finally stumbled onto the page I think you were referring to, here.

Sorry for any confusion.

[obonyojimmy]

With vue v2 and standalone dist you need the render function see https://github.com/vuejs/vue-router/blob/dev/examples/basic/app.js

[LinusBorg]

No, with standalone it is not needed (yet possible)