How to Access Vue-Loader Components in an HTML Fil

Question

I would like to use the modular style and file format of Vue Loader (i.e., where I have a template section, script section and style section in each .vue file).

What I can't figure out how to do (or if it is even possible to do) is use my custom templates in an html file.

For instance, in the App.vue file I can use the following code:

<template>
  <div id="app">
    <message>Hello there</message>
  </div>
</template>

This will work to display a custom message component on the home page.

What I would like to do instead is use my custom components in html files. For instance, in the index.html file to use the following code:

  <div id="app">
    <message>Hello there</message>
  </div>

Any idea how I can do this? Thanks.

NOTE: I am new to Vue Loader and semi-new to Vue (so I apologize in advance if the answer to this question is obvious).

Answer 1

Actually you can do this easily by:

register your component :

Vue.component('message', {
    template: '<div>A custom component!</div>'
});

then comment the render function in your Vue instance like so:

new Vue({
  el: '#app',
  // render: h => h(App)
})

after that you will be able to render your message Tag like this:

<div id="app">
      <message></message>
</div>

Edit : if you don't want to use this way you can define it in your view instance:

new Vue({
  el: '#app',
  // render: h => h(App)
  components: {
    message: {
     template: `
    <h1>Hello World</h1>
        `
    }
  }
})

Answer 2

There are many ways you can compile a single file component and then use that component in a web page.

Use vue-cli

Vue released a command line interface tool called vue-cli that can initialize projects and build components with zero configuration. One option to build a component that you can use in your page is to use vue build.

vue build MyComponent.vue --prod --lib MyComponent

This will compile a script that exposes MyComponent. If you include that script in your page and then add it globally,

Vue.component(MyComponent)

That component will be available to you in any of your Vues.

Make a plugin

Here is a sample of a very basic framework for making a plugin.

myPluginDefinition.js

window.MyPlugin= {};

MyPlugin.install = function (Vue) {
    Vue.component('my-component', require('./my-component.vue'));
}

webpack.config.js

module.exports = {
    entry: "./myPluginDefinition.js",
    output: {
        path: __dirname+'/dist',
        filename: "MyPlugin.js"
    },
    module: {
        loaders: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        }
        ]
    }
};

This will build a file called MyPlugin.js that will contain each of the single file components that you include in the install function. Include the script on your page and then call

Vue.use(MyPlugin)

and you will have all of your components.

Use a custom webpack configuration

There are many ways you could configure webpack to build your single file components. You could build them all into a single file or build them separately. I suggest if you want to use one of these options you ask a separate question.

Answer 3

Import desired component definition object and pass it to options.components

<template>
    <some-component></some-component>
</template>
<style>...</style>
<script>
    import SomeComponent from 'path/to/some-component.vue';

    export default {
        components: {
            // ES2015 shorthand for SomeComponent: SomeComponent
            SomeComponent
        }
    }
</script>

That leverages local component registration

Both the default export and SomeComponent are component definition objects.