Laravel & Vue.js Step By Step
SSTEP:1
Make a Laravel New Project with auth .
Comand Line:
laravel new blog
composer require laravel/ui --dev
php artisan ui vue --auth
SSTEP:2
Intall npm
npm install
SSTEP:3
Install vue and
vue-router
npm install vue-router
SSTEP:4
Run npm watch
npm run watch
SSTEP:5
Run Model,Controller and Resource
php artisan make:model
Product -mcr
SSTEP:6
Change in routes/api
Route::get('/product/edit/{product}', 'productcontroller@edit')>name('product.edit'); Route::apiResource('/product', 'ProductController');
SSTEP:7
Paste it in View/home.blade.php
@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Dashboard</div> <div class="card-body"> @if (session('status')) <div class="alert alert-success" role="alert"> {{ session('status') }} </div> @endif You are logged in! <router-view></router-view> </div> </div> </div> </div> </div> @endsection
SSTEP:8
Change in Product Model
protected $fillable = [ 'name', 'cost' ];
SSTEP:9
Make Resource
Php artisan make:resource ProductResource
SSTEP:10
In ProductController.php change it.
<?php namespace App\Http\Controllers; use App\Http\Resources\ProductResource; use App\Product; use Illuminate\Http\Request; class ProductController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Resources\Json\AnonymousResourceCollection */ public function index() { $product= Product::all(); return ProductResource::collection($product); } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return ProductResource */ public function store(Request $request) { $product=new Product([ 'name'=>$request->get('name'), 'cost'=>$request->get('cost'), ]); $product->save(); return new ProductResource($product); } /** * Display the specified resource. * * @param \App\product $product * @return ProductResource */ public function show(product $product) { return new ProductResource($product); } /** * Show the form for editing the specified resource. * * @param \App\product $product * @return ProductResource */ public function edit(product $product) { return new ProductResource($product); } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param \App\product $product * @return ProductResource */ public function update(Request $request, product $product) { $product->name=$request->get('name'); $product->cost=$request->get('cost'); $product->save(); return new ProductResource($product); } /** * Remove the specified resource from storage. * * @param \App\product $product * @return ProductResource */ public function destroy(product $product) { $product->delete(); return new ProductResource($product); } }
SSTEP:11
Change product table
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateProductsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('products', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('cost'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('products'); } }
SSTEP:12
Migrate table in database
php artisan migrate
SSTEP:13
Change Layout/app.blade.php
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @guest <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> </li> @if (Route::has('register')) <li class="nav-item"> <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> </li> @endif @else <li class="nav-item"> <router-link :to="{name:'product_form'}" class="nav-link">Create Product</router-link> </li> <li class="nav-item"> <router-link :to="{name:'product'}" class="nav-link">Product</router-link> </li> </li> <li class="nav-item"> <router-link :to="{name:'visitor_form'}" class="nav-link">Create New Visitor</router-link> </li> <li class="nav-item"> <router-link :to="{name:'visitor'}" class="nav-link">Visitor</router-link> </li> </li> <li class="nav-item"> <router-link :to="{ name: 'example' }" class="nav-link">Example</router-link> </li> <li class="nav-item"> <router-link :to="{ name: 'home' }" class="nav-link">Home</router-link> </li> <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> <main class="py-4"> @yield('content') </main> </div> </body> </html>
SSTEP:14
In Resource/js/app.js
import Vue from 'vue' import router from './routers/routes' require('./bootstrap'); window.Vue = require('vue'); const app = new Vue({ router }).$mount('#app')
SSTEP:15
Make a Directory named routers and make a file
name routes.js
import Vue from 'vue' import VueRouter from 'vue-router' import ExampleComponent from '.././components/ExampleComponent.vue' import HomeComponent from '.././components/HomeComponent.vue' import ProductComponent from '.././components/ProductComponent.vue' import ProductEditFormComponent from '.././components/ProductEditFormComponent.vue' import ProductFormComponent from '.././components/ProductFormComponent.vue' Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'example', component: ExampleComponent }, { path: '/home', name: 'home', component: HomeComponent, }, { path: '/product', name: 'product', component: ProductComponent, }, { path: '/product/edit/form', name: 'product_edit_form', component: ProductEditFormComponent, }, { path: '/product/form', name: 'product_form', component: ProductFormComponent, }, ], });
SSTEP:16
Make a directory Resource/js/Components named as
Components
SSTEP:17
Make ProductComponent.vue in
resource/js/components
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Product Component</div> <div class="card-body"> <table border="1"> <tr> <th>Name</th> <th>Cost</th> <th>Action</th> </tr> <tr v-for="product in products" :key="product.id"> <td>{{ product.name }}</td> <td>{{ product.cost }}</td> <td> <!-- <router-link class="btn btn-info" :to="{name:'article',params:{id:product.id}}">Show</router-link>|| --> <router-link class="btn btn-info" :to="{name:'product_edit_form',params:{id:product.id}}">Update</router-link>|| <button class="btn btn-info" @click="deleteProduct(product.id)">DELETE</button> </td> </tr> </table> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { products: [] } }, created() { axios.get("http://localhost:8000/api/product").then(res => { this.products = res.data.data; console.log(res.data.data); }) }, methods: { deleteProduct(id){ axios.delete(`http://localhost:8000/api/product/${id}`).then(res => { this.products.splice(this.products.indexOf(id), 1); this.$router.push({name: "product"}); }) } } } </script>
SSTEP:18
ProductEditFormComponent.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Create Product</div> <div class="card-body"> <form @submit.prevent="updateProduct(product.id)"> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" placeholder="Entr ypur name" v-model="product.name" /> </div> <div class="form-group"> <label>Price</label> <input type="text" class="form-control" placeholder="Enter Price" v-model="product.cost" /> </div> <div class="form-group"> <button type="submit" class="btn btn-info">Save</button> </div> </form> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { product: {} }; }, created() { axios .get(`http://localhost:8000/api/product/edit/${this.$route.params.id}`) .then(res => { this.product = res.data.data; this.$router.push({ name: "product_edit_form" }); }); }, methods: { updateProduct(id) { axios .put(`http://localhost:8000/api/product/${id}`, this.product) .then(res => { this.$router.push({ name: "product" }); }); } } }; </script>
SSTEP:19
ProductFormComponent.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Create Product</div> <div class="card-body"> <form @submit.prevent="addProduct"> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" placeholder="Enter your name" v-model="product.name" /> </div> <div class="form-group"> <label>Price</label> <input type="text" class="form-control" placeholder="Enter Price" v-model="product.cost" /> </div> <div class="form-group"> <button type="submit" class="btn btn-info">Save</button> </div> </form> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { product: {} }; }, methods: { addProduct() { axios .post("http://localhost:8000/api/product", this.product) .then(res => { this.$router.push({ name: "product" }); }); } } }; </script>
Now at last run
php artisan serve
And go to
