Skip to content

CodeCoupler Webpack Import Vue Single File Components

You can use .vue files in the src folder which will be interpreted as vue single-file components.

You can use <style module> to compile the stylesheet into CSS Modules and use the classes with $style Documentation. 1

Note 1: The style tag normally must not specified with the lang attribute to use modern CSS. It will always be parsed like any other CSS file (read above). But to work together in combination with the the Vetur validator you should use lang="postcss".

Note 2: Vue is included as dependency by default. So if you install cc-webpack you do not need to install vue in your project. Just use import Vue from "vue"; and you can start writing Vue Applications.

To exclude the Vue library from the build result. Add the following to the externals array in you CodeCoupler Webpack configuration:

1
2
3
4
5
6
7
8
9
{
  externals: [
    {
      module: "vue",
      global: "Vue",
      entries: ["dist/vue.runtime.global.prod.js"]
    }
  ]
}

Note 2: Linked assets inside of the <template> must start with ./:

1
<img src="./image.png" />

As a result, renderedHtml becomes a string <h1><a href="http://example.com">Example</a></h1>.

  1. You can use <style module> from Version 3.4 ↩