vue-custom-template-loader

📦 Webpack loader for rendering multiples templates with vue-loader in Vue.js components

What Vue Custom Template Loader does?

It allows you to use several templates in your Single-File Components (SFCs), which will be rendered depending on some conditions. This is possible thanks to the custom blocks feature in vue-loader.

It would be useful, for example, if you are sharing code for both Native Mobile Apps with NativeScript-vue and regular Web apps.

See this HelloWorld.vue example:

<template>
  <div>{{ msg }}</div>
</template>

<template-native>
  <Label :text="msg"></Label>
</template-native>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

The idea is render <template> only when the app target is a web browser and <template-native> when the target is a native mobile app.

Setup

First, you need to install the loader in your app:

npm install vue-custom-template-loader --save-dev

Now we have to change the webpack.config.js file using the vue-custom-template-loader loader:

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  ... # stuff
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      // this rule applies to <template-native> blocks when TARGET is 'native'
      {
        loader: 'vue-custom-template-loader',
        resourceQuery: /blockType=template-native/,
        options: {
          condition: process.env.TARGET === 'native',
        }
      }
    ]
  }
  plugins: [
    new VueLoaderPlugin()
  ],
  ... # more stuff

Finally, in order to send the correct TARGET environment variable, we should change the default serve NPM script created by vue-cli in the package.json from this:

  "scripts": {
    "serve": "vue-cli-service serve",
    ...

To this:

  "scripts": {
    "serve:web": "cross-env TARGET=web vue-cli-service serve",
    "serve:native": "cross-env TARGET=native vue-cli-service serve",
    ...

Code example

If you want to see a working sample, please review the example/ directory on this repository.

Syntax highlight for custom blocks in VSCode with Vetur

If you have Vetur extension installed in your VSCode, open the VSCode settings and add the following setting:

    "vetur.grammar.customBlocks": {
      "template-native": "html"
    }