Ruoting with Laravel and Vuejs

Question

I’m starting with Laravel and Vue and I’m having an absurd difficulty finding something that shows or teaches how to routing using Laravel and vuejs. I want to create a simple SPA app with Laravel and Vuejs but I don’t know how to do it.

Answer 1

I answered something similar here in the first question of another member. I will try to help with what I know:

First you will need an editor, such as Atom or Vscode, or any other that supports and has resources for both languages. Next, you must have the php, recommend using the most up-to-date. It is necessary to use Composer if you do not have it installed, you can check in getcomposer (if you don’t know about Composer, it is a php dependency manager, find out more).

• Laravel:

"Go to the documentation of Larable and select the best way to create a new project, recommend by Composer with the command composer create-project --prefer-dist laravel/laravel api (the last parameter is the folder name). Do this, to run the application on a local server use the command php artisan serve. It will run a local server on port 8000." (informed in the other question).

In the case of routes, there is an Routes folder with the api.php file. In it will be your entire route system. To create a new one, just add a new one Route::metodoHTTPQueDeseja('pathDaApi','Controller@metodoDoController');. On the Laravel, there’s something called Resource, where the syntax is like this: Route::resource('photos', 'PhotoController');. It already creates all the methods that are usually used in CRUDS with only one line, ie it is the equivalent of creating a get route to Tod

To not create all routes, you can specify with the array only for only these methods or except to delete some methods. Example below:

Route::resource('photo', 'PhotoController', ['only' => [ 'index', 'show' ]]);

Route::resource('photo', 'PhotoController', ['except' => [ 'create', 'store', 'update', 'destroy' ]]);

All Resource methods according to the Laravel documentation:

When calling on the front end a request that accesses a route, a method and the controller is specified, so you should always have the controller created. To create a controller, the command is php artisan make:controller NomeDoController --resource ("--Resource" is to speed up if you intend to use the Resource route described above). So you will be able to access the commands.

To perform a CRUD, you need a database, a model the controller will work on, and an Migration. To create a model use the command php artisan make:model NomeDaClasse -m ("-m" is for creating Migration that will communicate with database). Now it is enough to implement each of the methods created. Do not forget to return in response outside an object, the HTTP state code correctly for each situation.

Try to read the documentation too if you have problems. Also find out more about Model Binding, Collections and validation of Requests if you don’t know. It’s something that makes development easier and faster. It is also interesting that in the future apply tests and TDD, probably using the phpunit and classes of Factory.

• Vuejs2

In the case of Vuejs2, first you need to have the Nodejs/npm. To install a new project, run the commands according to the Vuejs2 documentation:

install vue-cli
$ npm install --global vue-cli
create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Vuejs2 by itself is just a component-based front-end framework. However, with the use of vue-cli, it already comes with the vue-router, in the case of the route system consisting of its main doubt. Where my-project is written, it is the name of the project. npm run dev will run the local application. I recommend using the Vuetify. It is a framework for Vuejs2 with material design with great documentation, always updating, and very simple and great to use in my humble opinion. If you choose to use, you should initialize with Vuetify or install via npm and import it into your App.Vue or any other configuration file .js.

In the case of the route system, it is located in the path src/Routes/index.js. Below is an example:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/primeiraRota',
      name: 'PrimeiraRota',
      component: PrimeiraRota
    }
  ]
})

The attribute name is optional. Can also be passed props for the component in the routes and access with some other parameter, for this the path must contain path: '/primeiraRota/:parametro'. A component that has its path on a route can also have "children", and its children can have other children, and so on. Below is an example:

{
  path: '/',
  redirect: 'teste',
  component: Teste,
  children: [
    {
      path: '/testeFilho',
      component: TesteFilho,
      props: { teste: 'name' },
      children: [
        {
          path: '/',
          component: Tabela
        },
        {
          path: 'novo',
          component: Formulario
        },
        {
          path: 'edicao/:id',
          component: Modal
        }
      ]
    },
  ]
}

The operation is as follows, when accessing by the browser on a route, for example localhost:8080/#/primeiraRota it will "call" the component "First route" and run its Lifecycle (created, Mounted, etc). This because of the <router-view></router-view> that is in your App.vue. Can be used several router-view within the same project, according to its needs and architecture used.

There is as well as a component directly access by links directly in html, as in the example below:

<router-link :to="variavelNoData">Link para rota</router-link>

The :to can be both a variable that exists in your data (), which is dynamically filled with the desired "path", or without the ":" and only the "path" directly as a string.

Observing: There may be some errors because I did not perform the whole procedure, I just typed without the prior check, so I ask you to always check the documentation when performing the process, and if something is wrong, please correct me.

Even a basic application, I have no way of knowing its level of knowledge both in programming and in these languages, and it becomes a long process. I tried to keep it as dry as possible by focusing more on the routes but it got a little long.

I hope I’ve helped.