Adding Vue.js to Sage 9: Dependencies and Approach

[intosite]

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

[stuartcusackie]

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…

[joshb]

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); }-->

[kpoxo6op]

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
site/web/app/themes/theme-name/.eslintrc.js

source:

ESLint doesn't support spread operator in objects

[hothit43]

This was very helpful, I managed to get it working with vuex,
Thank you for posting this. I was wondering if you were using the chrome vue extension with this and if you were is there something I need to enable to use it?

[hothit43]

Never mind I got it working

[codent]

I had this issue and it ended up being because I completely skipped the bit where it says to resolve in the webpack.config.js file:

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

No idea why I did that and no doubt you’ve got it fixed after 5 months but as it came up as the first hit on Google for me, I thought I’d post.

[ID-Clic]

Hi,

First of all, thank you for this solution!
Everything works very well, except async and await.

When I use them, I always get a “Unexpected token” compilation error.

I put the line ‘ecmaVersion’: 2018,

Do you have an idea?

Thank you !

[markorapaic]

Is there any follow up to this?

Thanks for the instructions - I’ve managed to get Vue working quite well. However, the one issue I’ve come across so far is that my Sage site doesn’t seem to want to change es6.

This is my .eslintrc.js file. It has ecmaVersion set to 2017, which is the version in which async await were added.

module.exports = {
  'root': true,
  'extends': [
    'eslint:recommended',
    'plugin:vue/essential',
  ],
  'globals': {
    'wp': true,
  },
  'env': {
    'node': true,
    'es6': true,
    'amd': true,
    'browser': true,
    'jquery': true,
  },
  'parserOptions': {
    'ecmaFeatures': {
      'globalReturn': true,
      'generators': false,
      'objectLiteralDuplicateProperties': false,
      'experimentalObjectRestSpread': true,
    },
    'ecmaVersion': 2017,
    'sourceType': 'module',
  },
  'plugins': [
    'import',
  ],
  'settings': {
    'import/core-modules': [],
    'import/ignore': [
      'node_modules',
      '\\.(coffee|scss|css|less|hbs|svg|json)$',
    ],
  },
  'rules': {
    'no-console': 0,
    'quotes': ['error', 'single'],
    'comma-dangle': [
      'error',
      {
        'arrays': 'always-multiline',
        'objects': 'always-multiline',
        'imports': 'always-multiline',
        'exports': 'always-multiline',
        'functions': 'ignore',
      },
    ],
  },
};

I’m still getting the following error within a Vue component that is using async await.

 ERROR  Failed to compile with 1 errors                                          9:12:30 PM

 error  in ./resources/assets/scripts/vue/RequestForQuote.vue?vue&type=script&lang=js&

Module build failed: 
47 :   methods: {
48 : 
49 :     /* eslint-disable no-unused-vars */
50 :   
51 :     async addProduct() {
               ^
Unexpected token (51:10)

 @ ./resources/assets/scripts/vue/RequestForQuote.vue?vue&type=script&lang=js& 1:0-289 1:310-596
 @ ./resources/assets/scripts/vue/RequestForQuote.vue
 @ ./resources/assets/scripts/routes/common.js
 @ ./resources/assets/scripts/main.js
 @ multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

Everyone has mentioned the 'ecmaVersion': 2018 fix, however that doesn’t work for me. I get the same error, and the impression that it’s not really changing anything, and Sage isn’t actually changing its ecma version.

When I’ve looked into the environments being used by eslint, it only seems to list es6 as an environment - changing this to something like es8 results in an error.

Would greatly appreciate any help on the matter - at the very least being shown how to definitively change the ecmaVersion within Sage.

Thanks!

[Bhanu_Kumar_Singh]

Facing the exact same problem.

Using async throws “unexpected token”

I saw a solution for it here. Which says to use. transforms: { generator: false } which would not fail buble. But this resulted in braking of other codes. I added this in my webpack.config.js file. test: /\.js$/, exclude: [/node_modules(?)/], use: [ { loader: 'cache' }, { loader: 'buble', options: { objectAssign: 'Object.assign', ////////// This was added transforms: { …

[alwaysblank]

@markorapaic

This is my .eslintrc.js file. It has ecmaVersion set to 2017 , which is the version in which async await were added.

I’m fairly certain the issue you’re encountering is not related to eslint–if it were a linting issue, the error should be something more like “I’m afraid you can’t use async” instead of Unexpected token which almost always means that a parser has encountered an unsupported language feature. As mentioned elsewhere, Sage 9 uses Buble instead of Bable to transpile JS, and so far as I can tell Buble does no support async–hence the error you’re seeing. I haven’t tested this, but I think you should be able to rip out Buble and replace it with Babel and then just change the loader here: https://github.com/roots/sage/blob/f3e794a09374d2f110742d15b9b975490fcddbee/resources/assets/build/webpack.config.js#L58

[flei]

I fixed the async/await problem by installing ‘babel-loader’ and replacing ‘buble’ with ‘babel-loader’ in webpack.config.js (remove ‘buble’ options):

 {
    test: /\.js$/,
    exclude: [
      /node_modules(?![/|\\](bootstrap|foundation-sites))/,
    ],
    use: [
      {loader: 'cache'},
      {loader: 'babel-loader', options: {}},
    ],
  },

Not sure what other effects this has (apparently performance), but it seems to work fine for me…

[markorapaic]

Thank you for your response (and you too @alwaysblank) you are both correct - replacing buble with babel-loader did the trick! Very thankful!

[Bhanu_Kumar_Singh]

hey @flei, Are you facing any sort of issues, because of the switch?

[Constantine_Black]

Hello. I have followed the above instructions to incorporate vue in my sage theme. One question if I may:

Currently I am using one main_vue.js fie that contains all the instances of vue that are related to each page of my app. This one file is imported in main.js of sage and is loaded for all pages - when a id name of an element matches the one from the vue instances, the related component.vue is mounted.

Is there a reason for preferring separate files for the vue instances and importing them separately in main.js of sage, defining them as separate routes ( besides what the documentation says, about JavaScript DOM-based routing ) ?

Thank you.