Codeigniter + Vue

When you need to use Vue.js(Nuxt) on codeigniter, there is no default way on codeigniter.

So I solve this problem with .htaccess file.

The main concept is just share one root folder.

And basically, this concept is for separate frontend and backend.

Codigniter for Backend. Vue.js for Frontend.

Like this.

Project

  |- application

  |- frontend (Vuejs)

  |- system

  |- web

  |- index.php

  |- composer.json

  |- package.json (This is nuxt package.json)

  |- nuxt-config.js

There is no package.json in frontend folder.

The nuxt build path is web folder. 

That's all.

Using composer scripts for basic package manager.

So, Add scripts in composer.json

{

...

    "scripts": {

        "build": ["@preset", "@npm-generate"],

        "preset": ["@npm-install"],

        "npm-generate": "npm run generate",

        "npm-install": "npm install",

    }   

}

And, package.json

{

        ...

    "scripts": {

        "dev": "nuxt",

        "build": "nuxt build",

        "start": "nuxt start",

        "generate": "nuxt generate",

        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",

        "precommit": "npm run lint"

    },  

}

nuxt.config.js

module.exports = { 

...

    router: {

        base: '/',

    },  

    srcDir: 'frontend/',

    generate: {

        dir: 'web',

    },  

};

And setup rewrite rules on .htaccess

RewriteEngine On

DirectoryIndex index.htm index.html index.php

RewriteCond %{HTTP:Authorization} ^(.*)

RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

RewriteCond $1 !^(index\.php|resources|robots\.txt|favicon\.ico|web/*)

RewriteCond $1 ^(backend/*|api/*|setup/*)

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L,QSA]

RewriteCond $1 !^(index\.php|resources|robots\.txt|favicon\.ico|web/*)

RewriteCond $1 !^(backend/*|api/*|setup/*)

RewriteRule ^(.*)$ web/$1 [L,QSA]

For example..

Request => Rewrite

/ => web/index.html    (Vue.js)

/backend/user => index.php/backend/user    (Codeigniter)

/api/user/11 => index.php/api/user/11    (Codeigniter)

/sub/one => web/sub/one/index.html    (Vue.js)

/frontend/sub/one => 404 NOT FOUND

/token/generate => index.php/token/generate    (Codeigniter)

When deploy, Just type composer run-script build. That's All