Laravel SPA : Is Vue a requirement?

Is it possible to create a spa app using laravel without vue.js? I am new to laravel and I want to create admin panel and it should be SPA, but wondered to know if it is necessary to learn vue.js or I can create it using only blade.

Short Answer

Is it possible to create a spa app using laravel without vue.js

Definitely. Vuejs is a framework that supports SPA, and the laravel community prefers vuejs over other frameworks. But that does not mean you need to use the same

or I can create it using only blade

Using only blade might not be possible. You'll need some javascript somewhere to be able to handle page transitions and HTML updates on the client side. Usually it would be a lot more efficient to just stick to some framework like vue.

Long Answer

To expand on it a bit more, Typical Laravel applications using blade are server-rendered applications. When a user opens a link, a request will be sent to your server, which sends it to your Laravel application, your Laravel application will determine which route it is, and render a blade template for it ( the page rendering happens on the serverside ). For most applications, this would be a different blade template for each route. When a user clicks on some link on the page, a new page URL is loaded on the browser and this process is repeated. That is, your Laravel application will render a different blade template for this page.

For a Single page application, it would be slightly different. Typically, no matter which URL you open, it will always render the same HTML page. Then, your javascript code will determine the URL and determine what HTML it should render ( the page rendering happens on the client side ). When a user clicks on some links on the page, the javascript will determine which page it is, and then render the page, without requesting new HTML from the server.

A more formal definition of a single page application is ( Taken from MDN )

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

So essentially, to achieve a single page application, there should ideally be no page reloads, and HTML is updated by javascript. Frontend frameworks like React, Angular, Vue all support this by default using routing.

So if you wish to avoid using some framework, you will need to implement some kind of routing, ideally using javascript's History API so that whenever user clicks on a link on your page, instead of requesting a new HTML from the server, you would render the HTML client side using javascript.

Now there are many libraries out there that will help you achieve this ( or something similar ) without committing to a framework.

As someone who has attempted to do the same in the past, building a SPA without any framework, my personal advice would be to just stick to using a framework like vue, react, angular, svelte, etc. Unless it's for learning purposes, it just isn't worth the effort and will usually end up as a mess with lots of vulnerabilities unless you're willing to dedicate hours of work for this

Now that the warning is out of the way, here are some nice libraries you may want to try out if you wish to avoid learning vuejs (I've tried these before. I've not used Livewires upcoming SPA, but used livewire itself and its great)

• Barbajs will allow you to still use blade for rendering all your HTML. When a user clicks on a link, barba would send an HTTP request to get the HTML for the page, and render it on the client side without a full-blown page transition
• Prouter is a client-side router. You can define routes and callbacks for the routes. You will need to handle the HTML update yourself.
• Laravel Nova is a premium product by the Laravel team. It uses vuejs, but for most applications you would typically not need to touch any javascript, Nova will do it all for you. You would just need to write your PHP code ( by following nova's documentation )
• Livewire v3, a popular full-stack framework for laravel. It's v3 is planned to support SPA, so this might also be worth a try

There are a lot more libraries like these, but keeping it short for now. Do some research, and determine if you really would really need this. Cheers