Roots Discourse

How to add Vue to Sage 10, using laravel-mix

Hope someone can educate me on this.

I have tried this in webpack.mix.js:

[...]
mix
  .setPublicPath('./dist')
  .browserSync('localhost:7000');

mix
  .sass('resources/assets/styles/app.scss', 'styles')
  .sass('resources/assets/styles/editor.scss', 'styles')
  .purgeCss({
    extend: { content: [path.join(__dirname, 'index.php')] },
    whitelist: require('purgecss-with-wordpress').whitelist,
    whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
  });
 
mix 
  .js('resources/assets/scripts/app.js', 'scripts').vue()
  /* .js('resources/assets/scripts/app.js', 'scripts').vue({version:2}) */
  .js('resources/assets/scripts/customizer.js', 'scripts')
  .blocks('resources/assets/scripts/editor.js', 'scripts')
  .extract();

 [...]

Running yarn mix

$ webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
/Users/mekk/Desktop/grefsen-vue/wp-content/themes/sage/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

AssertionError [ERR_ASSERTION]: mix.js() is missing required parameter 1: entry

[...]

generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='

package.json

{
 "private": true,
 "browserslist": [
   "extends @wordpress/browserslist-config"
 ],
 "engines": {
   "node": ">=12.0.0"
 },
 "scripts": {
   "build": "cross-env NODE_ENV=development run-s mix",
   "build:production": "cross-env NODE_ENV=production run-s clean mix",
   "start": "cross-env NODE_ENV=development run-s \"mix -- --watch\"",
   "hot": "cross-env NODE_ENV=development run-s build mix:hot",
   "mix": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
   "mix:hot": "webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
   "clean": "run-p clean:*",
   "clean:dist": "rimraf dist",
   "clean:cache": "rimraf storage/framework/cache/*.php storage/framework/cache/data/*.php",
   "clean:views": "rimraf storage/framework/views/*.php",
   "lint": "run-s -c lint:*",
   "lint:scripts": "eslint resources/assets/scripts",
   "lint:styles": "stylelint \"resources/assets/**/*.{vue,css,sass,scss,less}\"",
   "test": "run-s -c lint",
   "translate": "run-s -c translate:*",
   "translate:pot": "wp i18n make-pot . ./resources/languages/sage.pot --ignore-domain --include=\"app,resources/assets,resources/views\"",
   "translate:js": "wp i18n make-json ./resources/languages --no-purge --pretty-print"
 },
 "devDependencies": {
   "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
   "@wordpress/babel-preset-default": "^4.17.0",
   "@wordpress/browserslist-config": "^2.7.0",
   "@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
   "babel-eslint": "^10.1.0",
   "browser-sync": "^2.26.12",
   "browser-sync-webpack-plugin": "^2.0.1",
   "core-js": "^3.8.1",
   "cross-env": "^7.0.2",
   "eslint": "^7.7.0",
   "eslint-plugin-import": "^2.22.0",
   "laravel-mix-copy-watched": "^2.2.4",
   "laravel-mix-purgecss": "^5.0.0",
   "npm-run-all": "^4.1",
   "pug": "^3.0.0",
   "pug-plain-loader": "^1.1.0",
   "purgecss-with-wordpress": "^2.3.0",
   "rimraf": "^3.0.2",
   "sass": "^1.26.10",
   "sass-loader": "^9.0.3",
   "stylelint": "^13.6.1",
   "stylelint-config-standard": "^20.0.0",
   "vue-loader": "^15.9.5",
   "vue-style-loader": "^4.1.2",
   "vue-template-compiler": "^2.6.12"
 },
 "dependencies": {
   "bootstrap": "^4.5.3",
   "jquery": "^3.5.1",
   "laravel-mix": "^5.0.0",
   "popper.js": "^1.16.1",
   "vue": "^2.6.12",
   "vue-resource": "^1.5.1"
 }
}

Disclaimer: The main motivation to try out Sage 10 is that I got stuck adding vuetify with Sage 9.
I’m considering returning back to Sage 9 since I at least managed to get Vue to compile in Sage 9. I’m rather uncertain what is the best option, so would also appreciate some ‘meta’ talk about what would be the best route to go.

I did the following, based loosely off of Vuetify’s webpack instructions. This was from a fresh Sage repo–what you’d get if you just cloned the repo. I made no changes apart from I describe below.

Install packages (sass and sass-loader may not actually be required; I didn’t test):

$ npm install vuetify vue
$ npm sass sass-loader deepmerge -D

Create a file in my theme at resources/assets/scripts/vuetify.js:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Add the following to resources/assets/scripts/app.js, importing the file I just created:

import Vue from 'vue'
import vuetify from './vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

Added id="app" to the <main> element in resources/views/layouts/app.blade.php:

@include('partials.header')

<div class="container">
  <main class="main" id="app">
    @yield('content')
  </main>

  @hasSection('sidebar')
    <aside class="sidebar">
      @yield('sidebar')
    </aside>
  @endif
</div>

@include('partials.footer')

Ran a build:

$ npm run build

This produced no errors, and when I viewed the theme in a browser, it was loading Vue and appeared to be working correctly, although admittedly I’m not familiar w/ Vue or Vuetify so I don’t know what to look for beyond that.

Mix is built to handle Vue without any additional changes to its build process, so you shouldn’t need to do much to get it working.

1 Like