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.

Vue is not included as a dependency by default! 2 Therefore, you must install vue in your project first:

1
npm i vue

To exclude the Vue library from the build result, add the following to the externals array in your 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 1: You can use <style module> to compile the stylesheet into CSS Modules and use the classes with $style Documentation. 1

Note 2: The style tag must not be specified with the lang attribute to use modern CSS. It will always be parsed like any other CSS file (see above). However, to work with the the Vetur validator, you should use lang="postcss".

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

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

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

  2. Until version 4.2, Vue was included as a dependency by default. If you install cc-webpack, you do not need to install vue in your project. Simply use import Vue from "vue"; and you can start writing Vue Applications. However, you must pay attention to exclude Vue from your bundle! ↩