Adding Vue.js to Sage 9: Dependencies and Approach

sage
4

I really like the way Laravel Mix allows you to work with VueJS. However to integrate Laravel Mix into sage without compromising the way sage handles js/webpack is something I haven’t been able to accomplish yet.

So the way I make Vue possible within sage allows me to work with vue files quite similar as I would be working with Laravel Mix. Which is defining vue components in main.js that you store in a separate vue directory, and use them site-wide. This implementation is inspired by @pascallaliberte (thx!) and could definitively be improved as I’m not JS/webpack savvy but its working for my projects. I wanted to share it, in case someone else could benefit from it as well.

Step 1.
run from the theme folder: yarn add --dev vue vue-loader vue-template-compiler

Step2.
add the following blocks to resources/assets/build/webpack.config.js with the rules section

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

Step 3.
Within resolve section of that same file:

alias: {
  vue: 'vue/dist/vue.js'
},

Step 4.
At the top of main.js file you add import Vue from 'vue'

Step 5.
Make sure you created the vue directory within the scripts directory

Step 6.
edit resources/config.js and add the following to the watch section "resources/scripts/vue/**/*.vue"

Step 7.
Define your components like Vue.component('your-element-name-goes-here', require('./vue/test.vue').default);

Step 8.
After your components add:

 new Vue({
  el: '#app',
});

Step 9.
Within views/layouts/app.blade.php make sure to embody @include(‘partials.header’) till @include(‘partials.footer) with <div id="app"></div> so you get something like

...
<div id="app">
@include(‘partials.header’)
...
@include(‘partials.footer)
</div>
...

Step 10.
Add your custom element to a page template and check it out with yarn run start / build

edit: Added an extra step (step 6) for watch support when running yarn run start

6 Likes