Laravel 9 Vue 3 Inertia Project

Question

I'm building a SPA using Laravel with Vue.js and vite, and I have another CMS project using Laravel Breeze and Inertia js. How can I merge these two projects into one? So I could have a SPA project with a CMS, like an admin page, that you could set up via routing. is it possible?

This is app.js from my CMS project

import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

This is app.js from my SPA project

import '../css/navbar.css';
import '../css/home.css';
import '../css/kenapa.css';
import '../css/ceritakami.css';
import '../css/karir.css';
import '../css/lowongan.css';
import '../css/media.css';
import '../css/gabung.css';
import '../css/mitra.css';
import '../css/download.css';
import '../css/footer.css';

import { createApp } from 'vue';
import App from './layouts/app.vue';

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

I tried copying the page into the CMS and vice versa but it always gives me the error.

I'm a beginner and I just can't figure it out using inertia because in my SPA project I'm using App.vue as a layout to call other pages like this:

<NavbarVue/>
    <Home/>
    <Kenapa/>
    <Cerita/>
    <Karir/>
    <Lowongan/>
    <Media/>
    <Gabung/>
    <Mitra/>
    <Download/>
    <Footer/>
    </template>
    
    <script setup lang="ts">
    import NavbarVue from '../components/Navbar.vue';
    import Home from '../pages/Home.vue';
    import Media from '../pages/Media.vue';
    import Kenapa from '../pages/Kenapa.vue';
    import Cerita from '../pages/Cerita.vue';
    import Lowongan from '../pages/Lowongan.vue';
    import Karir from '../pages/Karir.vue';
    import Gabung from '../pages/Gabung.vue';
    import Mitra from '../pages/Mitra.vue';
    import Download from '../pages/Download.vue';
    import Footer from '../components/Footer.vue';
    
    </script>

But I can't do it in inertia, can someone enlighten me?

Answer 1

migrate

Create a new Laravel 9 project and follow the instructions to install Breeze w/ Inertia nad Vue.

• https://laravel.com/docs/9 .x/starter-kits#breeze-and-inertia

You will then move the *.vue files to the new project and parse them appropriately.

For example, you can get data through Axios calls in Spa. Using Inertia you can pass data directly from the controller.

Additionally, you must import the controller and all related PHP files into the new project and parse them to be consistent with the Inertia design structure.

test

If you haven't done so already, I highly recommend you start testing with PHPUnit. Properly tested code can make migrating files from one repository to another less cumbersome.

• https://laravel.com/docs/9.x/testing

in conclusion

Overall, this will be a massive project that may take several months. However, if you plan to merge two completely different projects into one, the complexity will require it, especially if neither project has been tested.