I am a VueJS developer and a Lover of CI4, now for the first time I want to integrate my VueJS project into CI4 as I don't like doing php stuffs in my html page.
I used vue-router to route path to their various components, made a cross origin fetch request to CI4 ResourceController REST API endpoint.
Whenever I run npm run dev to run my project I can see the project pages and everything is works as expected; and now also I have built the project with the command below
npm run build
The command above compiled my project into assets folder and accompanying index.html file in dist folder.
I moved the assets folder into CI4 public/ folder and then moved index.html into CI4 View folder and renamed it vue_index.php to be loaded as a view file by all the Controllers of my respective routes similar to the ones defined in vue-router index file.
Let me show the corresponding routes below
VUE-ROUTER ROUTE DEFINITION
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: () => import('../components/Home.vue'),
},
{
path: '/home',
name: 'home',
component: () => import('../components/Home.vue'),
},
{
path: '/about',
name: 'about',
component: () => import('../components/About.vue'),
},
{
path: '/contact-us',
name: 'contactus',
component: () => import('../components/ContactUs.vue'),
},
{
path: '/services',
name: 'services',
component: () => import('../components/Services.vue'),
},
{
path: '/portfolio',
name: 'portfolio',
component: () => import('../components/Portfolio.vue'),
},
{
path: '/portfolio/:portfoliotitle+',
component: () => import('../components/Portfolio.vue'),
},
{
path: '/schedule-a-call',
component: () => import('../components/ScheduleACall.vue'),
},
{
path: '/referral',
component: () => import('../components/Referral.vue'),
},
],
})
CI4 ROUTE DEFINITION
//Controllers
$routes->get('/', 'Home::index');
$routes->get('/home', 'Home::index');
$routes->get('/services', 'Services::index');
$routes->get('/about', 'About::index');
$routes->get('/referral', 'Referral::index');
$routes->get('/portfolio', 'Portfolio::index');
$routes->get('/contact-us', 'ContactUs::index');
$routes->get('/schedule-a-call', 'ScheduleACall::index');
//APIs
$routes->match(['POST'], 'contact-us', 'Api\ContactUsAPI::postData');
$routes->match(['POST'], 'schedule-a-call', 'Api\ScheduleACallAPI::postData');
$routes->match(['POST'], 'ask-a-question', 'Api\AskAQuestionAPI::postData');
$routes->match(['POST'], 'referral', 'Api\ReferralAPI::postData');
All CI4 Controllers (Home, Services, About, Referral, Portfolio, ContactUs, and ScheduleACall) points to vue_index.php as View.
The aforementioned View is here below
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="./assets/index-DwnnZfw5.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-lZAJRggg.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
My CI4 App.php and Cors.php are pointing to http://localhost/projectname/
While the public/ folder have assets, index.php, favicon.ico, and robbot.txt files.
The compiled ./assets/index-DwnnZfw5.js file lives in CI4 public/assets/ folder which points to other .js and .css files.
As you can see part of the ./assets/index-DwnnZfw5.js below
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Home-AU0wM7-
z.js","./Footer.vue_vue_type_script_setup_true_lang-Y86dSOYV.js","./Footer-
IVhMjwXc.css","./Home-tn0RQdqM.css","./About-BCsZ73Po.js","./ContactUs-
29znLrjd.js","./ScheduleMeetingForm-BHb023N1.js","./ScheduleMeetingForm-T9-
FRsjY.css","./Services-D12xIK6e.js","./Services-DcO_cA-q.css","./Portfolio-
CCN6DyBj.js","./ScheduleACall-CrLUARiJ.js","./ScheduleACall- BmBiMS34.css","./Referral-
DXwD2oe7.js","./Referral--QYvPw1w.css"])))=>i.map(i=>d[i]);
.......................................
........................................
............................................
function bp(e){return Ke(Ei)}const pp=dp({history:$h("/"),routes:
[{path:"/",component:()=>lt(()=>import("./Home-AU0wM7-
z.js"),__vite__mapDeps([0,1,2,3]))},{path:"/home",name:"home",component:
()=>lt(()=>import("./Home-AU0wM7-z.js"),__vite__mapDeps([0,1,2,3]))},
{path:"/about",name:"about",component:()=>lt(()=>import("./About-
BCsZ73Po.js"),__vite__mapDeps([4,1,2]))},{path:"/contact-
us",name:"contactus",component:()=>lt(()=>import("./ContactUs-
29znLrjd.js"),__vite__mapDeps([5,1,2,6,7]))},
{path:"/services",name:"services",component:()=>lt(()=>import("./Services-
D12xIK6e.js"),__vite__mapDeps([8,1,2,9]))},
{path:"/portfolio",name:"portfolio",component:()=>lt(()=>import("./Portfolio-
CCN6DyBj.js"),__vite__mapDeps([10,1,2]))},
{path:"/portfolio/:portfoliotitle+",component:()=>lt(()=>import("./Portfolio-
CCN6DyBj.js"),__vite__mapDeps([10,1,2]))},{path:"/schedule-a-call",component:
()=>lt(()=>import("./ScheduleACall-CrLUARiJ.js"),__vite__mapDeps([11,6,1,2,7,12]))},
{path:"/referral",component:()=>lt(()=>import("./Referral-DXwD2oe7.js"),
........................................................................
.......................................................................
From the look of things everything looks good and integrated into CI4, but when I run the server and open the page, it returns a blank page and with no error and the CI4 debugbar shows some information about the files loaded.
However, nothing is showing and I don't know why. I have tried to change the relative path URL on each of the compiled JS file to an absolute path, yet the page is blank.
Please I need help on how to solve this problem.