Combining Laravel and VueJs for a Multi-Page Application (MPA)

I have recently developed a website using a combination of Laravel and VueJs.

However, I am facing some confusion regarding the most suitable routing architecture to implement. Currently, my application has the following setup:

  • The routing system is managed by Laravel;
  • The VueJs framework is integrated through separate Javascript files for each HTML page (for example, the products page loads products.js from the public/js folder).

This system seems to be working well as each web page successfully loads the lib.js file containing all necessary libraries and frameworks for the frontend - approximately 700KB in size when minified by Webpack. Additionally, there are smaller Javascript files (2-3 KB each) dedicated to individual pages, resulting in each page loading 2-3 Javascript files in total.

In summary, I am seeking advice on whether this current architecture is effective or if I should explore alternative structures for future projects. If this approach is not ideal, what would be the recommended choice and which technologies/plugins should I consider?

javascriptlaravelvue.js

Answer №1

For a SPA, I recommend the following:

  • Utilize Laravel routing for API integration
  • Incorporate vue-router for seamless application navigation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of async.series and async.each is not behaving as anticipated

I am currently working on developing a web scraping tool using nodeJS to extract image URLs from a website's HTML, store them in a cache, and then identify the largest image based on file size. However, I'm facing an issue where the function de ...

javascriptnode.jsasynchronousnode-async

Getting just the outer edges of intricate BufferGeometry in Three.js

Currently, I am immersed in a project that involves zone creation and collision detection using Three.js. The primary objective is for my application to effectively manage collisions and produce a BufferGeometry as the final output. My aim is to visually r ...

javascriptreactjstypescriptmaththree.js

The submission of the form is prevented upon updating the inner HTML

I am in the process of creating a website that will incorporate search, add, update, and delete functionalities all on a single webpage without any modals. The main focus of this webpage is facility maintenance. Adding facilities works smoothly; however, i ...

javascriptphphtml

Display modal popup only once the dropdown has been validated, with the validation focusing on criteria other than the dropdown itself

Looking for a way to validate dropdown values. Popup should only show if the dropdown values are selected; otherwise, the popup should remain hidden. Below is the code snippet: <div class="main-search-input-item location"> ...

javascriptjquery

Setting up PostCSS nesting with Vite: A beginner's guide

Here are the steps I have taken so far: I installed postcss-nesting using npm install postcss-nesting --save-dev I configured vite.config.js as follows: import { fileURLToPath, URL } from 'url'; import { defineConfig } from 'vite&apo ...

vue.jsvuejs3vitepostcss

Exploring the capabilities of Angular 2 and delving into inquiries regarding IIS

I'm diving into the world of Angular 2 as a beginner. Previously, I used to include JavaScript (like jQuery.js) in my HTML and then upload the finished page to my IIS website. Now that I'm learning Angular 2, I've had to install Node.js, NP ...

javascriptnode.jsangularnpmiis-7

Removing a modal div element in React after navigating

import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import Cookies from "js-cookie"; const LoginPage = () => { const [email, setEmail] = useState( ...

javascripthtmlreactjsbootstrap-5

Creating a dynamic star rating system using CSS

A unique code pen project showcasing a pure css star rating interface can be found at: https://codepen.io/yaworek/pen/JJpEaZ Below is the custom css part: /*** * Custom Pure CSS Star Rating Widget for Bootstrap 4 * * www.TheMastercut.co * ***/ ...

javascriptjqueryhtmlcss

Is it possible for a gradient to maintain the original width of the element to which it is added?

Is there a way to create a gradient that remains static and masks out certain visible parts? I want the countdown timer to darken as it nears the end. Currently, my gradient only reduces colors in between while keeping the left and right colors: (funct ...

javascripthtmlcss

Tips for managing the velocity of JavaScript navigation scrolling

Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed? functio ...

javascriptjqueryhtmlcss

How Can You Update the State of a Parent Component from a Child Component?

My Objective In the initial component, I retrieve items with a status of 2 and display them as checkboxes. In the subsequent component, I update the status of these items to 3. In the third component, a modal opens after the status change from the secon ...

javascriptreactjsreact-native

Retrieve the latest entry from a JSON file containing epoch timestamps

Currently, I am in the process of developing an app using angularjs. In my json data, I have timestamps and corresponding values like below: { "dps": { "1455719820": 0, "1455720150": 0, "1455720480": 0, "1455720810": 0, " ...

javascriptangularjsjson

Using jQuery's .html function to insert images

I have a unique counter that counts in currencies, such as Yen and Euro. Each number, as well as the currency sign and separator, are all displayed on the webpage using custom-designed icons. I utilize the display: flex; property in my container div and ap ...

javascriptjquerycss

What is the best way to incorporate the PUT method...?

Within the realm of programming, there exist three distinct files with specific roles - profiles.model.js, profiles.controller.js, and profiles.router.js. The focus now shifts towards implementing the PUT method across these three files. To begin, profiles ...

javascriptnode.jsmongodbexpress

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

javascripthtmlbillboard.js

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

Encapsulating data with JSON.stringify

I'm currently working on creating an object that has the following structure: let outputOut = { "_id": id[i], "regNum": code[i], "sd": sd[i], "pd": ptOut, "p": p[i], ...} //output fs.writeFile('./output/file.json', JSON ...

javascriptjsonstringify

Exploring the World of Vue.js Object Imports

I am currently encountering an issue involving the importing of Objects from App.vue into a component. To provide context, this project consists of a Navigation Drawer component and an App.vue file. The Navigation Drawer contains Vue props that can be dyna ...

javascriptarraysvue.jsobjectvue-cli

Utilizing NGINX as a reverse proxy for secure communication with Node.js

I'm currently running an NGINX server setup as a reverse-proxy server for a node application. I am now trying to enable HTTPS, but every time I attempt to access the site via HTTPS, I encounter a "502: Bad Gateway" error. server { listen 80; ...

javascriptnode.jsexpressnginx

Sending a file to the jqGrid handler

Currently, I am using Grails in combination with jqGrid and attempting to implement a rather unique feature. My goal is to allow users to upload a file which will then be sent to the jqGrid controller and used as a filter for the data displayed on the grid ...

javascriptjqueryajaxgrailsjqgrid