Example Using Vue.js in Mezzio application

Version ^0.1.0 is for Vue 3 usage in Mezzio application

For Vue 2 usage in Mezzio application, you can use version ~0.0.3

Introduction

A Mezzio 3 Skeleton Application with Vue.js integration.

Features

SPA application with Vue Router with cached pages after visited.
Using server side template from Mezzio, compiled with Vue.compile() in Vue.js component's render().
Using Vuex for state management library, combo with sessionStorage on portfolio page.

Setup

1. Run composer create-project command:

composer create-project samsonasik/mezzio-vue
composer development-enable

2. Run PHP Development server

cd mezzio-vue
composer serve

3. Open web browser http://localhost:8080

Production

For deploy to production purpose, it has webpack.config.js in root directory that when we run webpack command, we can get public/js/dist/bundle.js after run it. If you don't have a webpack installed yet in your system, you can install nodejs and install webpack and webpack-cli:

sudo npm install -g webpack
sudo npm install -g webpack-cli

So, we can run:

webpack

Hash: 6ed53cca3add09d67d7f
Version: webpack 4.43.0
Time: 462ms
Built at: 06/22/2020 5:14:09 PM
                   Asset     Size  Chunks             Chunk Names
public/js/dist/bundle.js  2.94 KiB       0  [emitted]  main
Entrypoint main = public/js/dist/bundle.js
[0] ./public/js/app.js + 7 modules 4.09 KiB {0} [built]
    | ./public/js/app.js 856 bytes [built]
    | ./public/js/home.js 103 bytes [built]
    | ./public/js/about.js 360 bytes [built]
    | ./public/js/contact.js 112 bytes [built]
    | ./public/js/portfolio.js 1.36 KiB [built]
    | ./public/js/store.js 176 bytes [built]
    | ./public/js/create-page.js 872 bytes [built]
    | ./public/js/portfolio-store-module.js 319 bytes [built]

After it generated, we can run the following commands to get production environment by default:

composer development-disable

# install with --no-dev
composer install --no-dev

# ensure no left over file cache before re-build cache
composer clear-config-cache

In default.phtml, we have a isDevelopment() view helper check to use js/app.js when on development, and use /js/dist/bundle.js on production when exists.

// src/App/templates/layout/default.phtml
$isDevelopment = $this->isDevelopment();

// ...
    ->prependFile(
        $isDevelopment
            ? '/js/app.js'
            : (
                // when after run webpack, allow to use bundled js
                // fallback to use /js/app.js when not
                file_exists('./public/js/dist/bundle.js')
                    ? '/js/dist/bundle.js'
                    : '/js/app.js'
            ),
        'module'
    )
// ...

that will automatically take care of that.