Roots Discourse

Adding Vue.js to Sage 9: Dependencies and Approach

Am getting an error when i try to do any scss styles in the vue component. If left blank, it works. But if i add for eg body {}, i get a Module build failed: TypeError: Cannot read property 'postcss' of null at Processor.normalize

I wonder if Sage 10’s use of Laravel Mix will make Vue integration a little easier…

These configuration changes work well for the most part but I think they may be causing conflicts and browsersync issues…


I’ve followed all of the instructions here to get Vue setup. I’m using the latest Sage 9 version with Tailwind.

My console produces the following error:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

In place of the component Vue renders:
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

This guide worked almost perfect for me.

However, I had error Parsing error: Unexpected token .. every second time when I ran yarn build (wierd).
Here is my code which caused the error:

  computed: {
    ...mapGetters({// <-- yarn build breaks here sometimes
      allDogPlaceCoordinates: 'allDogPlaceCoordinates',

The good news Looks like this solution resolves this build error:
update value 'ecmaVersion': 2017
to value 'ecmaVersion': 2018