I will write an article about setting up the Laravel + Vue.js + Vue-Router+Vuetify environment.

What is Vue Router?

At First

First of all, in a Single Page Application (SPA), the page is changed using Javascript targeting the display with id "app".

Vue makes it very easy and understandable to create such components.

Role of Vue Router

However, issues arise such as "the problem of the same URL (path)", "unable to enter from outside by specifying the URL (path)", and "hard to understand".

Vue-Router solves these problems by allowing you to specify the URL (path) and the file to be displayed (.vue file).

For example,

const routes = [
  {
    path: "/foo",
    component: Foo,
  },
  {
    path: "/bar",
    component: Bar,
  },
]

you can specify routes in this way.

You can create separate components for foo and bar pages.

I think many people are reading various articles and in the part where you specify a component with <vue-router>, other parts like the Header and Footer are placed common.

Link to the official page

What is Vuetify?

Vuetify is a UI Material Component.

Similar to Bootstrap in HTML + CSS, it is designed exclusively for use with Vue.js.

It provides a large number of pre-built components, allowing customization by passing props as per the documentation.

Buttons, sliders, menu bars, etc. can be easily created.

Official Page

Setting Up the Environment

php @7.4
laravel v6.8

Creating Laravel Project with Commands

composer create-project laravel/laravel your-project-name--prefer-dist
composer require laravel/ui
php artisan ui vue
npm install && npm install vue-router vuetify

That's it for the commands.

Brief explanation of what was done:

composer create-project laravel/laravel your-project-name--prefer-dist

1. Created a Laravel project.

composer require laravel/ui

2. Installed the laravel/ui package.

php artisan ui vue

3. Used the vue package in the laravel/ui package.

npm install && npm install vue-router vuetify

4. npm install is a command that needs to be run after creating a Laravel project.
5. Installed VueRouter and Vuetify.

Starting the Local Server

npm run watch
php artisan serve

Note: If you are using MAMP or a similar local server, the display will not change. It is recommended to run the local server in this way.

...

(Continues in the next message)