Projet d'inertie Laravel 9 Vue 3

Question

Je construis un SPA en utilisant Laravel avec Vue.js et vite, et j'ai un autre projet CMS utilisant Laravel Breeze et Inertia js. Comment puis-je fusionner ces deux projets en un seul ? Je pourrais donc avoir un projet SPA avec un CMS, comme une page d'administration, que vous pourriez configurer via le routage. Est-il possible?

Voici app.js de mon projet CMS

importer '../css/app.css';

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

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

créerInertiaApp({
    titre : (titre) => `${title} - ${appName}`,
    résoudre : (nom) => résoudrePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ élément, application, accessoires, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plug-in)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progrès: {
        couleur : '#4B5563',
    },
});</pré>
<p>Voici app.js de mon projet SPA</p>
<pre class="brush:php;toolbar:false;">importer '../css/navbar.css';
importer '../css/home.css';
importer '../css/kenapa.css';
importer '../css/ceritakami.css';
importer '../css/karir.css';
importer '../css/lowongan.css';
importer '../css/media.css';
importer '../css/gabung.css';
importer '../css/mitra.css';
importer '../css/download.css';
importer '../css/footer.css';

importer { createApp } depuis 'vue' ;
importer l'application depuis './layouts/app.vue' ;

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

J'ai essayé de copier la page dans le CMS et vice versa mais cela me donne toujours l'erreur.

Je suis un débutant et je n'arrive tout simplement pas à comprendre en utilisant l'inertie car dans mon projet SPA, j'utilise App.vue comme mise en page pour appeler d'autres pages comme celle-ci :

<NavbarVue/>
    <Accueil/>
    ≪Kenapa/>
    <Cerita/>
    <Karir/>
    <Lowongan/>
    <Média/>
    ≪Gabung/>
    <Mitra/>
    <Télécharger/>
    <Pied de page/>
    </modèle>
    
    <configuration du script lang="ts">
    importer NavbarVue depuis '../components/Navbar.vue' ;
    importer Home depuis '../pages/Home.vue';
    importer des médias depuis '../pages/Media.vue' ;
    importer Kenapa depuis '../pages/Kenapa.vue' ;
    importer Cerita depuis '../pages/Cerita.vue' ;
    importer Lowongan depuis '../pages/Lowongan.vue' ;
    importer Karir depuis '../pages/Karir.vue' ;
    importer Gabung depuis '../pages/Gabung.vue' ;
    importer Mitra depuis '../pages/Mitra.vue' ;
    importer le téléchargement depuis '../pages/Download.vue' ;
    importer le pied de page depuis '../components/Footer.vue' ;
    
    </script>

Mais je n'y arrive pas dans l'inertie, quelqu'un peut-il m'éclairer ?

Answer 1

Migrer

Créez un nouveau projet Laravel 9 et suivez les instructions pour installer Breeze w/Inertia nad Vue.

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

Vous déplacerez ensuite les fichiers *.vue vers le nouveau projet et les analyserez de manière appropriée.

Par exemple, vous pouvez obtenir des données via les appels Axios à Spa. Avec Inertia, vous pouvez transmettre des données directement depuis le contrôleur.

De plus, vous devez importer le contrôleur et tous les fichiers PHP associés dans le nouveau projet et les analyser pour être cohérents avec la structure de conception Inertia.

Test

Si vous ne l'avez pas déjà fait, je vous recommande fortement de commencer à tester avec PHPUnit. Un code correctement testé peut rendre la migration des fichiers d'un référentiel à un autre moins fastidieuse.

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

Conclusion

Dans l’ensemble, cela va être un projet colossal qui prendra probablement plusieurs mois. Cependant, si vous envisagez de fusionner deux projets complètement différents en un seul, la complexité l'exigera, surtout si aucun des deux projets n'a été testé.