Closed T0miii closed 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.
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.
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
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
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
Now create a file called partners.blade.php
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