2022-12-12
2301
#laravel#vue
Abiodun Solomon
145913
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:

SOLID series: The Open-Closed Principle

Today, we’ll be exploring the Open-Closed Principle: from the criticisms around it, its best use cases, and common misapplication.

Oyinkansola Awosan
May 16, 2025 ⋅ 11 min read
Simplifying E2E Testing With Open Source AI Testing Tools

AI-powered e2e testing: Getting started with Shortest

Explore how AI-driven testing tools like Shortest, Testim, Mabl, and Functionize are changing how we do end-to-end testing.

Jude Miracle
May 16, 2025 ⋅ 11 min read
profit center vs. cost center: How company structure affects engineering

Profit center vs. cost center: How company structure affects engineering

Examine the difference between profit vs. cost center organizations, and the pros and cons these bring for the engineering team.

Marie Starck
May 15, 2025 ⋅ 4 min read
How to pass a TypeScript function as a parameter

How to pass a TypeScript function as a parameter

Explore how to pass functions and structured objects as parameters in TypeScript, including use cases, syntax, and practical scenarios.

Kealan Parr
May 15, 2025 ⋅ 10 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: [
      vue(),
      laravel({
      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