samsonasik / ci4-vue
CodeIgniter4 starter app with Vue.js Integration
Fund package maintenance!
samsonasik
Installs: 607
Dependents: 0
Suggesters: 0
Security: 0
Stars: 84
Watchers: 8
Forks: 24
Open Issues: 1
Type:project
Requires
- php: ~8.1.0 || ~8.2.0 || ~8.3.0
- codeigniter4/framework: ^4.5.1
Requires (Dev)
- codeigniter/coding-standard: ^1.0
- infection/infection: ^0.26.4
- mikey179/vfsstream: 1.6.*
- phpspec/prophecy-phpunit: ^2.0
- phpunit/phpunit: ^9.0
- rector/rector: ^0.15.0
This package is auto-updated.
Last update: 2024-10-25 10:06:41 UTC
README
Version ^0.1.0 is for Vue 3 usage in CodeIgniter 4 application
For Vue 2 usage in CodeIgniter 4 application, you can use version ~0.0.17
Introduction
A CodeIgniter 4 Skeleton Application with Vue.js integration.
Features
- SPA application with Vue Router with cached pages after visited.
- Using server side template from CodeIgniter 4, compiled with
Vue.compile()
in Vue.js component'srender()
. - Using Vuex for state management library, combo with sessionStorage on portfolio page.
- Webpack support for production
Setup
1. Run composer create-project command:
composer create-project samsonasik/ci4-vue
2. Copy file ci4-vue/env
to ci4-vue/.env
:
cp ci4-vue/env ci4-vue/.env
3. Set environment and app configuration
Open ci4-vue/.env
and set CI_ENVIRONMENT
, app.baseURL
, app.indexPage
:
# file ci4-vue/.env CI_ENVIRONMENT = development app.baseURL = 'http://localhost:8080' app.indexPage = ''
4. Run PHP Development server
# go to ci4-vue directory cd ci4-vue # run php development server inside ci4-vue directory php spark serve
5. 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: 8e63a0daee1be975aeb3 Version: webpack 4.43.0 Time: 469ms Built at: 07/02/2020 6:13:41 PM Asset Size Chunks Chunk Names public/js/dist/bundle.js 2.7 KiB 0 [emitted] main Entrypoint main = public/js/dist/bundle.js [0] ./public/js/app.js + 4 modules 3.85 KiB {0} [built] | ./public/js/app.js 772 bytes [built] | ./public/js/create-page.js 924 bytes [built] | ./public/js/portfolio.js 1.67 KiB [built] | ./public/js/store.js 183 bytes [built] | ./public/js/portfolio-store-module.js 353 bytes [built]
After it generated, we can update .env
file as follow:
# file .env CI_ENVIRONMENT = production app.baseURL = 'https://www.your-website.com' app.indexPage = ''
In app/Views/layout.php
, we have a ENVIRONMENT
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 <?php $isDevelopment = ENVIRONMENT === 'development'; ?> // ... <script src="<?php echo base_url($isDevelopment ? '/js/app.js' : ( // when after run webpack, allow to use bundled js // fallback to use /js/app.js when not file_exists(ROOTPATH . 'public/js/dist/bundle.js') ? '/js/dist/bundle.js' : '/js/app.js' )) ?>" type="module"></script> // ...
that will automatically take care of that.