Daniel's Dev Blog

Developer, Trainer, Open Source Contributor

Slim 4 - Vue.js

21 Jul 2020

Table of contents

Requirements

• PHP 7.2+
• Webpack
• A Slim 4 application

Introduction

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

I assume that you have already installed and configures webpack for your project. If you want to read more about webpack, please read the Slim - Webpack article first.

Installation

To install Vue.js we need NPM and wepback.

Install Vue:

npm install vue

Install Vue loader:

npm install -D vue-loader vue-template-compiler

Add this webpack configuration to webpack.config.js:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

Read more: https://vue-loader.vuejs.org/guide/#manual-setup

Add this vue alias in webpack.config.js:

resolve: {
    alias: {
        vue: argv.mode === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
    }
},

Require vue in your global available JS file, eg. in layout/layout.js:

global.Vue = require('vue');

Usage

Create a new vue file, e.g. templates/home/home.vue

<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>

Require the vue file in home.js

require('./home.vue');

Add some html to the template:

<div id="app">
    <h1>{{ message }}</h1>
</div>

Building

Add this scripts to your package.json file:

"scripts": {
    "build": "npx webpack --mode=production",
    "build:dev": "npx webpack --mode=development",
    "watch": "npx webpack --watch"
},

Run npm run build to compile the files for production or npm run build:dev for development.

To watch and compile all changes for development, run: npm run watch

Known issues

Vue with Twig

Vue and Twig use the same template syntax {{ }}. Twig will parse the templates before Vue can render it in the browser. To fix it you could change the Vue delimiters to [[ ]] with:

Vue.options.delimiters = ['[[', ']]'];

or you may drop Twig completely in favor of a native PHP template engine like Slim PHP-View or Plates.

© 2020 Daniel Opitz | Twitter