CODEWITHSUNDEEP
phplaravelvue.js
user13729875
user13729875

Reputation:

Laravel routes to Vue.js routes

I have about 100 routes in my web.php route file, and right now i started using vue.js with laravel instead of blade, so should i write all my web.php routes in vue routes also ? what is the best way ?

this is my web.php laravel route:

Route::post('/dashboard/widget', 'AdminDashboardController@widget')->name('dashboard.widget');

    Route::get('clients/export/{status?}/{client?}', ['uses' => 'ManageClientsController@export'])->name('clients.export');
    Route::get('clients/create/{clientID?}', ['uses' => 'ManageClientsController@create'])->name('clients.create');
    Route::post('clients', ['uses' => 'ManageClientsController@store'])->name('clients.store');
    Route::resource('clients', 'ManageClientsController', ['expect' => ['create']]);
    ..... and much more ......

how i can represent this laravel routes in vue.js, since i have more than 100 route in my web.php

Thank you

Upvotes: 2

Views: 4852

Answers (3)

Najmul Hoq
Najmul Hoq

Reputation: 213

If I am not wrong, your question is to find a way to convert Laravel routes to Vue routes so that you can easily use them on your Vue components.

Step 1: first, you have to use the Laravel route to configure all Vue routes (web.php)

Route::get('{any}', function () {
  return view('layout.app');
})->where('any','.*');

Step 2: Your layout blade file (layout/app.blade.php)

<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@yield('title', $page_title ?? '')</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @yield('styles')
</head>
<body>
    <div id="app">
        <main>
            @yield('content')
        </main>
    </div>
    @yield('scripts')
</body>
<script src="{{asset('./js/app.js')}}"></script>

Step 3: Your Vue app file (./js/app.js)

require('./bootstrap');
window.Vue = require('vue')
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter);
Vue.use(middleware, router)
const app = new Vue({
    el: "#app",
router: new VueRouter(router),

})

Step 4: Create your Vue route file and import your component (route/index.js)

import Widget from "./js/components/dashboard/Widget.vue"
export default{
 mode: 'history',
 routes: [
    { path: '/dashboard/widget', name: "Widget",component: Widget, },       
 ]
}

Step 5: Use those Vue routes path in your layout navbar components that you create in step 2 by following way, (./js/components/Navbar.vue)

<template>
            <nav class="navbar navbar-expand-md navbar-light shadow-none">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto" id="menubar">
                            <li class="nav-item">
                                <router-link class="nav-link" to='/dashboard/widget'>Widget</routerlink>
                            </li>
                        </ul>
                    </div>
                </div>  
            </nav>
      </template>

Step 6 Create the widget component to show your design.(./js/components/dashboard/Widget.vue)

<template>
    <div>
        widget design goes here...
    </div>
</template>

I hope this answer will help you

Upvotes: -1

Antonio Sarosi
Antonio Sarosi

Reputation: 41

There's a library for that: https://github.com/tighten/ziggy

But it only works if your Vue components are loaded inside blade templates, not if you have a completely separate Vue client that uses a Laravel API. Assuming the first case, just install the library and add the @routes blade directive to your main blade file:

composer require tightenco/ziggy

resources/views/layouts/app.blade.php:

<head>
  <!-- ... -->

  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <title>{{ config('app.name', 'Laravel') }}</title>

  <!-- Routes -->
  @routes
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>

  <!-- ... -->
<head>

And then you'll have the route function available in your Javascript and Vue files, which works like the one provided by Laravel.

Upvotes: 4

AlejandRo Morales Gomez
AlejandRo Morales Gomez

Reputation: 1

write everything to a new file, when you query use promises so you can communicate with web.php, Watch out, just the views. The routes will only be useful to be able to have on a single page. It is just an advice.

Upvotes: 0

Related Questions