@enhancedjs/vue-template-in-string-loader

It is a webpack loader that pre-compiles Vue templates in JavaScript or TypeScript template strings at compile time. It allows to write single file components in standard JavaScript and TypeScript source files.

Example

const template = vueTemplate`
<div class="MyComponent">
  … some Vue template code…
</div>
`

export default defineComponent({
  name: "MyComponent",
  template,
})

The tag vueTemplate is optional. It helps the vscode extension enhancedjs.html-in-template-string to add some HTML syntax highlighting.

This webpack loader will replace the template string and its tag vueTemplate at compile time, so it is unecessary to provide an implementation for runtime. But, in a TypeScript project, a declaration has to be provided:

// global.d.ts
declare function vueTemplate(text: TemplateStringsArray): string;

How to configure

First, add @enhancedjs/vue-template-in-string-loader to a Vue application:

npm install @enhancedjs/vue-template-in-string-loader --save-dev

In the vue.config.js file, add a configureWebpack section:

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(js|ts)$/,
          exclude: /node_modules/,
          use: {
            loader: "@enhancedjs/vue-template-in-string-loader"
          }
        }
      ]
    }
  },

Contribute

With VS Code, our recommanded plugin is:

TSLint from Microsoft (ms-vscode.vscode-typescript-tslint-plugin)