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.
Related
I want to render a vue componet from sub directory. I am using laravel 9. I use Jetstream with vue and inertia. By default vue component shows from Pages Directory. I create another directory Admin and put dashboard component in Admin Directory. The problem is when rendering it's didn't show anything.
return Inertia::render('Admin/Dashboard');
I try to render this view. but it didn't show the result. Only show the componet when
return Inertia::render('Dashboard'); render without directory name. How to render a component like this Pages/Admin/Component.vue ?.
I use default configation that jetstream provide.
Im using Laravel 9 with inertia. The design of the project includes modals for creating, updating but i see that inertia doesnt have support for modals?
I have found a few projects for inertia modals but they dont seem to work.
Currently when you navigate using inertia, Laravel hits the route and then in the controller you render an inertia page and vue knows to find a specific page and then navigates to that new page (loads it in a new vue page)
I am wanting to do the same but instead of a new page loaded i want to remain on the same parent page and load the new route content into a modal.
Thanks
If you want a blade view to be loaded inside a modal in an Inertia page you can do:
$modalContent = view('your-blade-view-name', $modalData)->render();
return Inertia::render('inertia-page', $inertiaData);
I created a demo repository for this
this is a bit of an architecture question. I am fairly new to working with Vue and don't completely understand a good structure and architecture I need to use. I am using in within a Laravel application, if that helps.
I have a main file, index.php, where I have a Vue router instance. This has the following structure
<div>
<router-link to="/home"></router-link>
<router-link to="/about"></router-link>
<router-link to="/projects"></router-link>
<router-link to="/contact"></router-link>
</div>
<router-view></router-view>
This works fine and well. But, I want to extend the functionality. Each of these routes renders a corresponding component (ie HomeComponent, AboutComponent, etc). Within one component in particular (ProjectComponent) I want to have nested routes.
This is the nested route in question in my routes.js file:
{
path: '/projects',
component: ProjectComponent,
children: [
{
path: '/:project',
component: ProjectShowComponent,
}
]
},
So, when you click on the projects route and get to the ProjectComponent, you are presented with various projects that have their own router-link to that particular project. I thought because the ProjectComponent was an extension of the root Vue instance, that the router-link's within the file would still render the new component in the router-view, but that doesn't seem to work.
Am I totally off base with how I should architect something like this, or is there something in the routing that is off? Any help or thoughts would be appreciated. Thank you.
If you are using vue-router to do this then you'll have to have a look at passing props to the child component, here is the guide from vue router https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode
Another option would be to let laravel handle the routing of the application.
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.
I would require a little help here if this method will work out well.
Firstly, I have a backend API server created using Laravel and Laravel Passport. Secondly, I have also created the frontend with Vuejs within the same project. As such, I will be required to use both the api.php and web.php routes. I am also redirecting these routes using vue-router.
Backend
Inside the web.php routes, I have used two different routes because I want to display generic contents on my landing site and the other as an authentication required dashboard.
Example:
web.php
As above, this is to capture the routes which are 404 Not Found that are directly manipulated in the address bar to redirect correctly to their respective pages. I also ended up having two different blade templates named as dashboard.blade.php and home.blade.php respectively. Is this an okay practice for a Laravel-Vuejs project? Or are there ways that you would like to recommend?
dashboard.blade.php
home.blade.php
Login related problem with login page using the layout of the landing page into another layout of the dashboard page
The problem that I am faced with when doing an API login with the password grant is that the login page does not redirect to the dashboard page properly. The URL route does change but the page is rendered as blank.
The login using axios here:
I have managed to fix the problem.
In web.php, since we have
Route::get('/dashboard/{any?}', function () {
return view('dashboard');
})->where('any', '^(?!.*api).*$[\/\w\.-]*');
Inside of my Login.vue redirect handler, I use location.href = '/dashboard' instead of this.$router.push('dashboard').