How do I register a Vue component?

Question

I have the following files. All I want to do is to be able to create different components that are injected. How do I achieve this using require.js? Here are my files:

main.js

define(function(require) {
    'use strict';
    var Vue = require('vue');
    var myTemplate = require('text!myTemplate.html');

    return new Vue({
        template: myTemplate,
    });
});

myTemplate.html

<div>
  <my-first-component></my-first-component>
</div>

MyFirstComponent.vue

<template>
  <div>This is my component!</div>
</template>

<script>
export default {}
</script>

Answer 1

I'm going to assume you're using webpack as explained in the Vue.js docs, or else your .vue file is useless. If you're not, go check how to set up a webpack Vue app first, it's what lets you use .vue files.

import Menubar from '../components/menubar/main.vue';
Vue.component('menubar', Menubar);

That's how you add e.g. a menubar component to the global scope. If you want to add the component to just a small part of your app, here's another way of doing it (this is taken from inside another component, but can be used in exactly the same manner on your primary Vue object):

import Sidebar from '../../components/sidebar/main.vue';
export default {
    props: [""],
    components: {
        'sidebar': Sidebar
    },
...

You can load components without webpack, but I don't recommend it, if you're gonna keep using Vue (which I strongly suggest you do) it's worth it to look into using webpack.

Update

Once again, really, really, really consider using webpack instead if you're gonna be continuing with Vue.js, the setup may be slightly more annoying but the end result and development process is waaaay better.

Anyway, here's how you'd create a component without webpack, note that without webpack you can't use .vue files since the .vue format is part of their webpack plugin. If you don't like the below solution you can also use e.g. ajax requests to load .vue files, I believe there is a project somewhere out there that does this but I can't find it right now, but the end result is better with webpack than with ajax anyway so I'd still recommend going with that method.

var mytemplate = `<div>
<h1>This is my template</h1>
</div>`

Vue.component('mycomp1', {
    template: mytemplate
});

Vue.component('mycomp2', {
    template: `
        <div>
            Hello, {{ name }}!
        </div>
    `,
    props: ['name'],
});

As you can see, this method is A LOT more cumbersome. If you want to go with this method I'd recommend splitting all components into their own script files and loading all those components separately prior to running your actual app.

Note that `Text` is a multi line string in javascript, it makes it a little easier to write your template.

And as I said, there is some project out there for loading .vue files using ajax, but I can't for the life of me find it right now.