How to structure vue.js components inside laravel blade view

Question

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?

Answer 1

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, ie 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.

eg

<template>
    <div v-if="selectedAd">
        //display selected ad
    </div>
    <div v-else>
        //banner here
        <div v-for="(ad, index) in ads" :key="index">
            <a href='#' @click.prevent="selectedAd = ad">{{ ad.title }}</a>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ads: [],
            selectedAd: null,
        }
    }
}
</script>

Answer 2

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.

Answer 3

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.