Abiodun Solomon
Dec 12, 2022 ⋅ 8 min read

Creating a single-page app with Laravel and Vue

Abiodun Solomon I’m a software developer that is curious about modern technologies. I love contributing to the growth of knowledge for the betterment of humanity.

Recent posts:

Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new `defer` feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read

Using ElectricSQL to build a local-first application

ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.

Rahul Padalkar
Dec 1, 2023 ⋅ 11 min read
Using Rust And Leptos To Build Beautiful Declarative User Interfaces

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Eze Sunday
Nov 30, 2023 ⋅ 10 min read
5 Best JavaScript Multi-Dimensional Array Libraries

5 best JavaScript multidimensional array libraries

Learn more about the 5 best JavaScript libraries for dealing with multidimensional arrays, such as ndarray, math.js, and NumJs.

Pascal Akunne
Nov 30, 2023 ⋅ 4 min read
View all posts

10 Replies to "Creating a single-page app with Laravel and Vue"

  1. where shoud this be placed?

    import {createRouter, createWebHistory} from ‘vue-router’;

    const router = createRouter({
    history: createWebHistory(),
    routes: [
    path: ‘/’,
    component: () => import(‘./pages/Login.vue’)
    path: ‘/register’,
    component: () => import(‘./pages/Register.vue’)
    path: ‘/home’,
    component: () => import(‘./pages/Home.vue’)

  2. I would like to use this Tutorial with XAMPP instead of NGINX. But I dont now how to run ‘npm run dev’ and ‘php artisan serve’ at the same time. is there any config I have to change in XAMPP? Also I dont know where to put the App.vue file in Laravel structure.

    1. It should be in the parent directory, generated by Laravel,

      Here’s it
      import { defineConfig } from ‘vite’;
      import laravel from ‘laravel-vite-plugin’;
      import vue from ‘@vitejs/plugin-vue’

      export default defineConfig({
      plugins: [
      input: [‘resources/css/app.css’, ‘resources/js/app.js’],
      refresh: true,
      Note: We can’t add all the code in the article 😉. But you can always refer to the source code here https://github.com/iamhabbeboy/laravel-vue-demo

Leave a Reply