Let CodeIgniter serve the initial HTML page, and let Vue mount into a <div id="app"></div>. This gives you the benefits of CodeIgniter routing, sessions (Shield), CSRF, SEO-friendly pages, and future API/mobile support.

Recommended Project Structure

project-root/
├── app/
│   ├── Controllers/
│   │   └── Home.php
│   └── Views/
│       └── welcome_message.php
│
├── public/
│   ├── build/
│   │   ├── assets/
│   │   └── .vite/
│   ├── index.php
│   └── favicon.ico
│
├── frontend/
│   ├── src/
│   │   ├── main.js
│   │   ├── App.vue
│   │   └── router/
│   ├── index.html
│   └── vite.config.js

1. Build Vue

npm run build

This generates

public/build/
    assets/
        index-xxxxx.js
        index-xxxxx.css

2. Create the CodeIgniter View

app/Views/welcome_message.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?= vite('frontend') ?>
</head>
<body>

<div id="app"></div>

</body>
</html>

3. Home Controller

<?php

namespace App\Controllers;

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

4. Routes

$routes->get('/', 'Home::index');

Now visiting

http://localhost/

loads the CI page.

5. Vue Entry

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Vue will mount inside

<div id="app"></div>

6. During Development (Vite)

Instead of loading the built assets, load the Vite development server.

Create a helper:

<?php

function vite(string $entry = 'frontend')
{
    if (ENVIRONMENT === 'development')
    {
        return '
            <script type="module" src="http://localhost:5173/@vite/client"></script>
            <script type="module" src="http://localhost:5173/src/main.js"></script>
        ';
    }

    $manifest = json_decode(
        file_get_contents(FCPATH.'build/.vite/manifest.json'),
        true
    );

    $file = $manifest['src/main.js'];

    $html = '';

    if (isset($file['css'])) {
        foreach ($file['css'] as $css) {
            $html .= '<link rel="stylesheet" href="'.base_url('build/'.$css).'">';
        }
    }

    $html .= '<script type="module" src="'.base_url('build/'.$file['file']).'"></script>';

    return $html;
}

Then

<?= vite() ?>

works in both development and production.

7. Vue Router

Configure history mode.

import { createRouter, createWebHistory } from 'vue-router'

export default createRouter({
    history: createWebHistory(),
    routes: [
        // routes
    ]
})

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
    .use(router)
    .mount('#app')

8. Catch All Routes in CodeIgniter

If Vue Router handles navigation, make CodeIgniter always return the same view:

$routes->get('/', 'Home::index');

$routes->get('(:any)', 'Home::index');

$routes->add('(:any)', 'Home::index');

This allows routes like

/about

/products

/dashboard

to all load the Vue application.

9. CodeIgniter + Shield Authentication

Since CodeIgniter serves the page:

Shield sessions work normally.
CSRF protection remains available.
You can expose authenticated user data to Vue before it mounts if needed:

<script>
window.App = {
    user: <?= json_encode(auth()->user()) ?>
};
</script>

Then in Vue:

const user = window.App.user;

Architecture Recommendation

For CodeIgniter 4 + Vue + TailwindCSS + CodeIgniter Shield application (with future mobile API support), a clean architecture is:

Browser
   │
   ▼
CodeIgniter Route
   │
   ▼
Home Controller
   │
   ▼
welcome_message.php
   │
   ├── <div id="app"></div>
   ├── Inject authenticated user/session data
   └── Load Vite-built JS/CSS
            │
            ▼
         Vue App
            │
      Vue Router
            │
      Axios/Fetch API
            │
            ▼
CodeIgniter REST API
            │
      Shield Authentication
            │
        Database

This keeps CodeIgniter responsible for the initial request, authentication, and APIs, while Vue handles the entire client-side UI, which is scalable and aligns well with a future mobile application consuming the same REST APIs.

Code Snippets

Sunday, July 12, 2026

Vue Codeigniter Integration