I wonder how can i get my page parts such as sidebar or header with Vue way?
currently I get them like #include('admin.parts.header') which is blade template, but is it possible i move them to components (header.vue) and get them with vue way like <router-view name="header"></router-view> ?
The correct way to import via #include. You need to import vue components only with vue, blade with blade.
the solution was to have div with id around my sidebar.vue (eg) template and call that id instead of in my main component.
Related
everyone, I want to make a dormitory management system with laravel and vuejs but I don't know how to display my data instead of "welcome.blade.php" file but instead of "blade" use vue component if someone knows this please help me how to do this. I use API route for this
thanks everyone
You don't use it instead of blade you mostly use it with or inside blade.
Use Vue like normally would just treat your blade template as your plain HTML.
I'm still learning vue.js and building a laravel/vue.js Ad placement application. I structured my app such that the landing page (a laravel blade view) has a large banner introducing the app and beneath a list of the ads.When a user click on an ad, it takes him/her to the single page of the Ad(this will be a component). My challenge is that I want the app to be a single page application but don't want the banner to show while displaying the single page component. I placed a root component in the welcome view and then inside the component i used router-view to import the components.
My issue is that when I click an Ad, the single page component loads with the banner. How do I make this layout so that the banner doesn't load with the single page component?
One solution would be to put the banner in a vue page followed by the list of ads, then have another vue page without the banner for the ad (pages handled by vue-router)
Another approach would be to have the ad links going to a route that's handled by laravel, then laravel serves a blade template without a banner and with an embedded vue app that just shows the relevant ad.
Vue also supports nested views so if you need several pages with the banner at the top a nested view below the banner in one type of page, and then another type of page with just the ad.
Hope that gives you some ideas to help solve the task.
Further to this: if you're building the ad placement functionality as a tightly coupled part of a whole website, then you might want to have the navbar for the site generated by Vue rather than having it in Blade, i.e. another Vue component for the navbar.
On the other hand, if you're trying to build a reusable Laravel package to do ad placement on any Laravel website, then you'd need to leave the navbar out of your Vue templates, and in your ad module use v-if/v-else rather than Vue-router because you don't want your code to fight the Laravel site for control of the routes.
e.g.
<template>
<div v-if="selectedAd">
//display selected ad
</div>
<div v-else>
//banner here
<div v-for="(ad, index) in ads" :key="index">
{{ ad.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
ads: [],
selectedAd: null,
}
}
}
</script>
vue.js is spa framework not necessary do thing in blade all done inside vue.
search about vue router , vuex ,and do it easy good look.
You can use a v-on:click function of vue and set two variables for the ad and the other for the single page component.
Set the ad variable to true and the page component variable to false and when a use clicks on the ad the function switches the ad variable to false amd the page component variable to true.
I have seen some tutorial on how to include Vue.js into Laravel projects.
As far as I can see the tutorials are using Vue.js by creating templates and importing them into the blade-files. Is there anything "wrong" in just including the Vue javascript file directly into blade-files and using Vue directly like that? In other words just using:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
in the blade-files I want to use Vue.
The reason for this is that I just want Vue.js to replace some of the work that has been done by Jquery in the application. I have also been thinking about using React. But it seems like that goes the same way as Vue (creating templates, which then should be imported into the corresponding blade-files).
I use Laravel 5.6.
Thanks for any guidance!
Great, I will try to explain my approach of doing such kind of replacement work.
Laravel comes with assets directory containing js and css directory. If you explore more the js directory you'd see two files bootstrap.js and app.js.
bootstrap.js file is nothing but few handy stuffs like setting jQuery as global object so that it can be accessed in vue instance easily, setting axios default header to have X-CSRF-TOKEN while using axios in the project.
But the important part is app.js. It initialises the vue instance and binds it with a #app div which mostly the first div after <body> tag.
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
In the above file, you can see there vue instance is created and it is bound to a div whose id is app. Along with that Vue is also registering a component called example which is stored under js/components/ directory as Example.vue.
Now, based on your requirement you can go ahead and follow these steps to create components to replace some of jQuery codes without having any conflicts.
• Make sure to bind the the vue instance to root div so that you can use the component in the blade file this way.
<div id="something">
<example></example>
</div>
• If you Laravel mix, make sure you compile the app.js
mix.js('resources/assets/js/app.js', 'public/js')
I have worked on projects have similar required modifications, I followed the way I just mentioned and worked quite well for me.
Feel free to ask any question you have. Cheers!
Im not entirely sure I fully understand what you are trying to achieve, but you will have to new Vue in every blade file then since you have a classic page reload when you switch from one blade file to the next (if they're not included in each other). I imagine that this is going to give you a lot of trouble sharing data between your various vue instances.
I'm developing a website using Laravel and I will need a mix between Blade templates and Vuejs components.
Basically the requirements of the project state that in the customer pages we can only use Blade but in the admin pages we are free to use anything, so we will use Blade + Vuejs.
I know is possible to create a form in Blade, and then require or #include that form in any other Blade file. Is it also possible require that form inside a Vuejs component?
For example, Is it possible to do something like this:
<my-form-component>
#include('path/to/blade/form')
</my-form-component>
If you want just use vue js in blade template, you can definetely use,
Hope you aware that blade and vue share similar syntax {{ }} for variable interpolation, to avoid vue and blade conflicting, you should add # notations ex: #{{ .. }} so blade engine will skip it,
But if you want to use vuejs component and blade template mixing, you shouldnot do it..
I have a set of components, some components include other components via #include('my-sub-component')
The issue is that when I want to use vue I have to put the entire component in the vue.js file inside the template tags.
But inside the template I want to use the #include so I can include some sub components. This does not work.
How can I include blade components inside a vue component?
As far as I know, it's impossible. You can't use PHP (Laravel Blade) .blade.php tags inside Vue Component .js, of course Vue can't execute PHP script in this case. The possible use case is you use the Vue Component inside Laravel Blade.
The closest thing you can get to this is to use inline templates. You can't access blade directives it if you are writing your templates in single file components and compiling them with webpack or something because they are not being rendered with PHP.
You could put the style and scripts components in the SFC though and but in order to use blade directives the template would need to be in a .blade.php file