# Adding Vue.js to Sage 9: Dependencies and Approach

**URL:** https://discourse.roots.io/t/adding-vue-js-to-sage-9-dependencies-and-approach/9644
**Category:** sage
**Tags:** sage9
**Created:** 2017-05-19T21:36:15Z
**Posts:** 37
**Showing post:** 11 of 37

## Post 11 by @pascallaliberte — 2018-11-21T03:26:39Z

# Updated instructions for `buble` instead of `babel`, with `vue-style-loader` working

The previous solution above was missing `vue-style-loader` integration, and this one fixes that problem, permitting `<style>` sections in `.vue` single-file components.

Thanks to @kellymears for having published [https://github.com/pixelcollective/SageJS](https://github.com/pixelcollective/SageJS), which includes these fixes.

## Known issue:

In the final `main.css`, the styles from `.vue` components are included before the normal scss styles. Now sure how to fix that yet.

## 1. Add dependencies

```
yarn add vue
```

```
yarn add --dev vue-loader vue-template-compiler eslint-plugin-vue vue-style-loader
```

## 2. Add stuff to `webpack.config.js`

To your `webpack.config.js` file (found in `resources/assets/build/` ), include `vue-loader` :

```
const { VueLoaderPlugin } = require('vue-loader')
```

Add this to `module.rules` :

```
{
        test: /\.vue$/,
        loader: 'vue-loader',
      },
```

And also insert this in `module.rules`, right **before the other `test: /\.css$/` entry, not replacing it** :

```
{
        test: /\.css$/,
        exclude: config.paths.assets,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader' },
        ],
      },
```

And to force the runtime to include the full compiler (only needed if you want your root Vue element to be parsed as a Vue template), add this under `resolve` :

```
alias: {
      'vue$': 'vue/dist/vue.esm.js'
```

Now register `VueLoaderPlugin` under `plugins` .

```
new VueLoaderPlugin(),
```

I placed mine after the debug watcher plugin (does it even matter?):

```
new webpack.LoaderOptionsPlugin({
      minimize: config.enabled.optimize,
      debug: config.enabled.watcher,
      stats: { colors: true },
    }),
    new VueLoaderPlugin(), //here
```

## 3. Modify `webpack.config.watch.js`

Set `pathinfo` to `false` to fix “Unexpected token ‘\*’” errors while running `yarn start`

```
output: {
    pathinfo: false, // set to false
    publicPath: config.proxyUrl + config.publicPath,
  },
```

## 4. Lint `.vue` files properly

In `.eslintrc.js` , replace the `extends` property with:

```
"extends": [
    "eslint:recommended",
    "plugin:vue/essential",
  ],
```

## 5. Setup a directory for your `.vue` components

`resources/assets/scripts/vue/` seems like a good spot for those `.vue` components.

See example reference above in the original post.

## 6. Add the new directory to your watch list in `resources/assets/config.json`:

Under `watch:`, add:

```
"resources/assets/scripts/vue/**/*.vue"
```

---

_[View the full topic](https://discourse.roots.io/t/adding-vue-js-to-sage-9-dependencies-and-approach/9644)._