search

LinusBorg / portal-vue

A feature-rich Portal Plugin for Vue 3, for rendering DOM outside of a component, anywhere in your app or the entire document. (Vue 2 version: v2.portal-vue.linusb.org)
http://portal-vue.linusb.org
MIT License
3.89k stars 188 forks source link

Use case: display dynamic VueJS content on server generated DOM content #69

Closed yannick-milanetto closed 6 years ago

yannick-milanetto commented 7 years ago

Hi !! First thanks a lot for this amazing Vue component. I would like to share my use case as it took me a while on finding how addressing it. I've a website which serves 2 ads and I discovered one thing about ads: they don't work pretty well with SPA.

One of the main issue I was struggling on is that the Ads providers often calculate the ad visibility (how often an Ad is displayed on a website above the fold, e.g without the user having to scroll down the page). This KPI is VERY important as it is used to define how much serving the Ad on your website will cost to the advertisers (and so how much you will earn from it as publisher).

The thing is that the different Ads providers are not able to calculate properly this KPI when the Ads are being served dynamically by a JS framework such as VueJS. Their bots are not smart enough to see where the Ad is positionned when it's not served directly from your server template file.

So i had to create a server template layout (i'm using Laravel & Blade) which contains 4 main parts:

However my sidebar does not contain only the Ad. It does contain many other widgets such as last Tweets, statistics, etc. Most of these widgets were created using VueJS and share some data with the Main Content thanks to Vuex. So I was really frustrated knowing that I could not use my lovely VueJS / Vuex components to display many useful information, just because I have to serve the Ad from Laravel.

Until I discovered this PortalVue component. Now I'm able to generate the sidebar widgets in my root VueJS application and display them on my Laravel generated sidebar. It works perfectly and it also updates automatically when Vuex data are changed within my VueJS app !! I love it !!

I'm not sure if I can share some links, (if not please edit and remove them). Here you can find some examples of this use case. They are both displayed out of my VueJS root node, but they come from VueJS app and use PortalVue:

LinusBorg commented 7 years ago

Happy that you found it useful :)

I will take a closer look at your examples free my vacaction.