samsonasik / mezzio-vue
Laminas mezzio skeleton with Vue.js Integration
Fund package maintenance!
samsonasik.wordpress.com/donate
Installs: 51
Dependents: 0
Suggesters: 0
Security: 0
Stars: 12
Watchers: 4
Forks: 5
Open Issues: 0
Type:project
Requires
- php: ^8.1.0
- laminas/laminas-component-installer: ^2.7
- laminas/laminas-config-aggregator: ^1.7
- laminas/laminas-diactoros: ^2.9.2
- laminas/laminas-servicemanager: ^3.11.2
- laminas/laminas-stdlib: ^3.7.1
- mezzio/mezzio: ^3.10.0
- mezzio/mezzio-helpers: ^5.8
- mezzio/mezzio-laminasrouter: ^3.4.0
- mezzio/mezzio-laminasviewrenderer: ^2.6
Requires (Dev)
- filp/whoops: ^2.14.5
- laminas/laminas-coding-standard: ^2.3.0
- laminas/laminas-development-mode: ^3.6
- phpspec/prophecy: ^1.15.0
- phpspec/prophecy-phpunit: ^2.0.1
- phpunit/phpunit: ^10.0
- rector/rector: dev-main
README
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'srender()
. - 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.