Vuetify with Laravel - Githubissues

T0miii commented 7 years ago

Install latest version of laravel 5.4 Install vuetify via npm. Create a master.blade.php layout file. Insite this file copy the default layout provided by vuetify. (the blue one with anymated toolbar https://vuetifyjs.com/layout/pre-defined) Create a Vue instance el: #app

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/vuetify.min.css') }}" rel="stylesheet">

    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
</head>
<body>
<v-app id="app" top-toolbar footer v-cloak>
    <v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer">
        <v-list class="pa-0">
            <v-list-item>
                <v-list-tile avatar tag="div">
                    <v-list-tile-avatar>
                        <img src="myimg.jpg" />
                    </v-list-tile-avatar>
                    <v-list-tile-content>
                        <v-list-tile-title>Tamás Barta</v-list-tile-title>
                    </v-list-tile-content>
                    <v-list-tile-action>
                        <v-btn icon @click.native.stop="mini = !mini">
                            <v-icon>chevron_left</v-icon>
                        </v-btn>
                    </v-list-tile-action>
                </v-list-tile>
            </v-list-item>
        </v-list>
        <v-list class="pt-0" dense>
            <v-divider></v-divider>
            <v-list-item v-for="item in items" :key="item">
                <v-list-tile>
                    <v-list-tile-action>
                        <v-icon>@{{ item.icon }}</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title><a href="/partners">@{{ item.title }}</a></v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
    <v-toolbar fixed class="primary darken-4" light>
        <v-toolbar-side-icon light @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-toolbar-title>PRM</v-toolbar-title>
    </v-toolbar>
    <main>
        <v-container fluid>
            @yield('content')
        </v-container>
    </main>
</v-app>

<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/prm.js') }}"></script>
</body>
</html>

Now create a file called partners.blade.php

@extends('layouts.master')

@section('content')
        <div class="container">
            <template>
                <div>
                    <v-data-table
                            v-bind:headers="headers"
                            v-bind:items="items"
                            v-bind:search="search"
                            v-bind:pagination.sync="pagination"
                            :total-items="totalItems"
                            :loading="loading"
                            class="elevation-1"
                    >
                        <template slot="headers" scope="props">
        <span v-tooltip:bottom="{ 'html': props.item.text }">
          @{{ props.item.text }}
        </span>
                        </template>
                        <template slot="items" scope="props">
                            <td>@{{ props.item.name }}</td>
                            <td  class="text-xs-right">@{{ props.item.calories }}</td>
                            <td  class="text-xs-right">@{{ props.item.fat }}</td>
                            <td  class="text-xs-right">@{{ props.item.carbs }}</td>
                            <td  class="text-xs-right">@{{ props.item.protein }}</td>
                            <td  class="text-xs-right">@{{ props.item.sodium }}</td>
                            <td  class="text-xs-right">@{{ props.item.calcium }}</td>
                            <td  class="text-xs-right">@{{ props.item.iron }}</td>
                        </template>
                    </v-data-table>
                </div>
            </template>
        </div>

    <script>

    </script>

@endsection

this is where i inserted the data table. My question is where i have to put the axios/ajax request that will populate my data table. I dont want to put it in the main #app vue instance, cause i will have a lot of pages with a lot of tables and with the time it will grow and get kinda messy.

Versions

Lates version of Vue, Vuetify. Using Chrome.

What is expected ?

If i click on the menu , the pages changes (new page reload cause its not a frontend application). And then the table is populated with data.

What is actually happening ?

Dont know how to fill the table with data.

Reproduction Link

nekosaur commented 7 years ago

This is more of a question than an issue (and one that concerns Laravel and Vue more than Vuetify) and so I would direct you to our Gitter instead, where someone might be able to help you. Otherwise I'd suggest you try the support channels for Laravel.

Trying to mix blades and Vue/Vuetify is in my personal opinion not the best idea and will most likely lead to a lot of headache down the road.

blogui91 commented 7 years ago

I dont know if i got your problem, but to populate the table with data you should encapsulate it in a new component with a prop to allow us to receive the data that laravel returns, for example

<my-table :laravel-data="{{$laravel_object->toJson()}}"></my-table>

in this way, you can manipulate the data easily.

codeitlikemiley commented 7 years ago

You need to decide if you want SPA or Multi page usig vuetify

If you opted for multi page , and will use laravel routing then you should do this

there is 2 type of vue build, if you try to use it directly all vuetify components with blade, you would like to use run time and compiler build of vue, you can do that by telling webpack to load it

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }

also you need to use script x-template


<script type="x-template" id="main">...</script>
<v-app id="app"></v-app> // your vuetify markup
// remember you should always encapsulate it with v-app 

<script>
new Vue({
  el: '#app',
  template: '#main',
  methods: {
 // define methods here
}
})
</script>

note you can use multiple instance of vue , you may use the most outer one as the template, then the other are instance of vue components

acacha commented 6 years ago

For people coming from Google maybe this can interest you:

https://github.com/laravel-frontend-presets/laravel-vuetify

A Vuetify frontend preset for the Laravel Framework

vuetifyjs / vuetify

Vuetify with Laravel #744

Versions

What is expected ?

What is actually happening ?

Reproduction Link