Laravel 9 and Vue JS 3 | Vue Router Installation - Ubuntu 20.04 LTS - 2022

Summary

In this tutorial, Afizoolamasudi guides viewers through the process of installing Vue Router for Vue 3 in a Laravel 9 project. The video covers essential steps, including navigating the terminal, adding Vue Router via Yarn, and configuring routing for components like 'Home' and 'About'. He explains the setup of routes, imports, and the creation of components in Vue 3. Additionally, Afizoolamasudi demonstrates how to configure the app.js file, resolve routing issues with the 'welcome' view, and ensure the single-page application functions seamlessly. By the end, viewers learn how to successfully integrate Vue Router into their Laravel project.

Takeaways

• 😀 Vue.js 3 and Laravel 9 integration is demonstrated in this tutorial for setting up Vue Router.
• 😀 To install Vue Router in a Laravel 9 project, first ensure Vue 3 is installed; a link to a previous tutorial is provided.
• 😀 The tutorial walks through the steps of installing Vue Router using Yarn with the command: yarn add vue-router@4.
• 😀 Once Vue Router is installed, the next step is configuring routes by defining path-component pairs.
• 😀 A key part of the setup is creating a 'router-view' in the Blade template to display components dynamically.
• 😀 To configure Vue Router, you must import it into the `app.js` file and set up routes using `createRouter` with `webHistory` mode.
• 😀 The routes configuration includes defining the paths for home and about components and linking them to their respective components.
• 😀 The About component is created with a simple title property in the script section using Vue 3's Composition API.
• 😀 The Vue app is built and then run using `yarn run watch` to compile the changes without errors.
• 😀 When the routes are tested in the browser, Vue Router is confirmed to work with both the Home and About pages.
• 😀 The tutorial also addresses potential issues, such as refreshing the page and the need to modify the Laravel routes file to avoid 404 errors for dynamic routes.

Q & A

What is the main objective of the video?

The main objective of the video is to show how to install and set up Vue Router version 4 with Vue 3 in a Laravel 9 project, as well as how to configure it to create a working single-page application (SPA).

Which version of Laravel and Vue.js is being used in the tutorial?

The tutorial uses Laravel 9 and Vue 3.

How do you install Vue Router for Vue 3?

To install Vue Router, you run the command `yarn add vue-router@4` in the terminal, which installs the latest version (4.x) of Vue Router.

Why is the `createWebHistory()` function used in the router configuration?

The `createWebHistory()` function is used to remove the hash (`#`) from the URL, which provides cleaner, more SEO-friendly URLs for the application.

What is the purpose of the `router-link` component in Vue?

The `router-link` component is used to create navigation links that users can click to navigate between different routes within a single-page application (SPA), without reloading the page.

What happens if you refresh the page on the About route?

If you refresh the page on the About route, an error may occur, saying 'Not Found,' because the Laravel server is not configured to handle Vue Router's client-side routing. This can be fixed by updating the `routes/web.php` file to redirect all routes to the main `welcome` view.

What do you need to do in `app.js` to set up Vue Router properly?

In `app.js`, you need to import Vue Router, define the routes (with paths and components), create the router instance using `createRouter()`, and then use `app.use(router)` to register the router with the Vue instance.

How do you handle component imports in `app.js`?

In `app.js`, components are imported using the `import` statement. For example, to import the About component, you would use `import AboutComponent from './components/AboutComponent.vue';`.

What is the issue with Laravel routes when using Vue Router, and how can it be fixed?

The issue arises when trying to access a route directly in the browser (e.g., `/about`), as Laravel does not recognize Vue Router routes by default. The fix is to update the `routes/web.php` file to return the `welcome` view for any route, allowing Vue Router to take control of the routing on the client side.

How do you test whether the Vue Router setup is successful?

To test the setup, you need to run `yarn run watch` to compile the changes, refresh the browser, and check whether the navigation between routes (e.g., Home and About) works without errors, and if you can refresh the page on those routes without encountering a 'Not Found' error.