I am trying to integrate a vue 3 project into CodeIgniter 4, so that each View in Codeigniter 4 app/View folder will point to the corresponding view files in .src/views.
I created the vue 3 project named ijaw-wari with the command below
npm create vue@latest
Then I installed CodeIgniter 4 into the Vue 3 project with the following command below
cd ijaw-wari
composer require codeigniter4/framework
I followed the following instruction to install CodeIgniter 4 into existing project
1. Copied the app, public (since Vue 3 project already has public I copied the files in the public into that of Vue 3 public), tests and writable folders from vendor/codeigniter4/framework to the project root which is ijaw-wari/
-
Copy the env, phpunit.xml.dist and spark files, from vendor/codeigniter4/framework to the project root which is ijaw-wari/
-
Adjusted the $systemDirectory property in app/Config/Paths.php to refer to the vendor one, which is DIR . '/../../vendor/codeigniter4/framework/system'.
Now my project root ijaw-wari/ looks this way below
app,
composer.json,
composer.lock,
cypress,
cypress.config.ts,
env,
env.d.ts,
eslint.config.js,
node_modules,
package.json,
package-lock.json,
phpunit.xml.dist,
public,
README.md,
spark,
src,
tests,
tsconfig.app.json,
tsconfig.json,
tsconfig.node.json,
tsconfig.vitest.json,
vendor,
vite.config.ts,
vitest.config.ts,
writable,
.editorconfig,
.gitignore,
.prettierrc.json,
.vscode
This is not yet the final integration, so I moved the entire Vue 3 project into the public/vue3 then my project root looks this 
and my 
and 
directories looks this way respectively
I have created an HomeViewController in app/Controllers folder to load index_vue.php view file in app/Views
//HomeViewController.php
<?php
namespace App\Controllers;
class HomeViewController extends BaseController
{
public function index(): string
{
return view('index_vue');
}
}
//index_vue.php
<!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>
</head>
<body>
<div id="app"></div>
<script type="module" src="<?= base_url('vue3/src/main.js') ?>"></script>
</body>
</html>
Now all set :) to run php server with the command below
php spark serve
When I run, http://localhost:8080 on my browser I am having the following error
main.js:2 Uncaught ReferenceError: exports is not defined
at main.js:2:1
To solve this problem I have converted main.ts to main.js and replaced main.ts to main.js, yet I cannot integrate Vue3 project to CodeIgniter 4.
I want the CodeIgniter index_vue.php vue file to load main.ts, and let Vue take over the show but I can't solve this problem, Please I need someone to help me on how to solve this problem.