CodeIgniter Forums

Full Version: [WIP] Codeigniter 4 and Vue SPA (Vue Cli)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
A little tutorial. Work in progress.

1. Installing CodeIgniter 4

composer create-project codeigniter4/appstarter example --no-dev

2. Installing Vue in the CodeIgniter directory
cd example
vue create frontend --no-git

3. Move all files from example/public to example/frontend/public

4. Create a vue.config.js in the frontend directory

Code:
// vue.config.js
module.exports = {
    // options ...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://example.test/',
            }
        }
    },
    indexPath: process.env.NODE_ENV === 'production' ? '../app/Views/index.php' : 'index.html',
    outputDir: '../public/',
};

- target is the url from the test server
- indexPath and outputDir // after "npm run build" the build script move the example/frontend/public/index.html to example/app/Views/index.php and The example/frontend/public/ directory to the example/public directory.
Warning: The npm run build delete the example/public directory and recreate it.

5.
example Code.


PHP Code:
/**
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
 */


$routes->group('api', ['namespace' => 'App\Controllers\Api'], function($routes)
{
    $routes->get('test''Test::index');
});

// Catch-all Route...
$routes->get('''Home::index');
$routes->get('(:any)''Home::index'); 

example/app/Controllers/Api/Test.php
PHP Code:
<?php namespace App\Controllers\Api;

use 
CodeIgniter\API\ResponseTrait;

class 
Test extends \CodeIgniter\Controller
{
    use ResponseTrait;

    public function index() {
        return $this->respond([
            ['id' => 1'name' => 'abc'],
        ],200);
    }


Catch-all Controller.

PHP Code:
<?php namespace App\Controllers;

class 
Home extends BaseController
{
 public function 
index()
 {
 return 
view('index');
 }


example/frontend/src/views/Home.vue
Code:
<template>
  <div class="home">
    <ul>
      <li v-for="row in testdaten" :key="row.id">
        {{ row.name }}
      </li>
    </ul>
  </div>
</template>

<script>

import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      testdaten: []
    }
  },
  mounted() {
    axios.get('/api/test').then(response => {
      this.testdaten = response.data
    })
  }
}
</script>