CODEWITHSUNDEEP
vue.jsnuxt.jsserver-side-renderingnoty
Jakub Saleniuk
Jakub Saleniuk

Reputation: 445

Nuxt - How can I run a code in client-side after server-side-rendering?

I created a plugin injecting a noty (https://ned.im/noty/#/) so I can use it globally, it looks like this:

export default ({ app }, inject) => {

    const notify = function (options = {}) {
        if (process.client) {
            new Noty(options).show();
        }
    }

    app.$notify = notify;
    inject('notify', notify);

}

This plugin shows a noty only on the client-side. On the server-side a noty does not appear, cause it can be displayed only in browser. I have a page with product details and I am receiving data in asyncData method. When the product was not found I would like to show a noty with proper message and redirect user to a product list page. When I change a route in client-side everything works awesome. However on the first page load (eg. I change an url manually in the browser) which happens on the server-side a noty does not appear, only a redirect works. My question is: how to show a noty in this case? How to create a noty in the browser after SSR or what is the best other solution to my problem?

Is there any way to run some code after client-side is already rendered (after server-side-rendering)?

Upvotes: 5

Views: 7065

Answers (4)

user22106200
user22106200

Reputation: 1

in Nuxt 3:

<script setup>
console.log('run in server-side.');
onMounted(() => {
    console.log('run in client-side.');
});
</script>

Upvotes: 0

zia
zia

Reputation: 278

it's not possible right know (nuxt <= 2.14.0 when i answering) but you can combine client plugin and client middleware to achieve that please take a look at this link:

https://github.com/nuxt/nuxt.js/issues/2653#issuecomment-390588837

Upvotes: 0

Jakub Saleniuk
Jakub Saleniuk

Reputation: 445

Okay, I found a module for that: https://github.com/potato4d/nuxt-client-init-module

Upvotes: 1

Aldarund
Aldarund

Reputation: 17621

You could just disable ssr for that plugin.

plugins: [
   ...,
   { src: '~plugins/yourplugin.js', ssr: false }
]

Upvotes: 2

Related Questions