Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

    John LindquistJohn Lindquist

    Because Nuxt renders pages on the server, you should use the nuxt-link components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using nuxt-link and isClient to navigate and avoid reloading data.

    vueVue.js
    nuxtNuxt.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 To navigate to another page, let's say we add a nav up here, and then toss in some Nuxt links. This will go to/completed. We'll call this completed, and then I'll create a completed page, new file, completed.vue, and then basically just copy and paste this entire thing in here.

    00:21 The behavior we want is if I go to completed and it loads the data fine and I refresh, it should load the data fine. The unexpected behavior here is if I go back to home. Let me open up the dev tools to see the network. I'll go to completed, and you'll see it actually makes this request to load the to-dos again.

    00:38 We don't need that because we already have the to-dos stored in our store. In our Fetch, I'm going to add from the context the isClient, and if this is Client, I'm just going to return out of Fetch, meaning it'll just skip over all of this stuff.

    00:55 Now when I save and I go to home, I clear out the network and I go to completed, you'll see it doesn't make that request in the network to this service, but it still has the to-dos from the store.

    01:06 This way, I can navigate through my site without reloading the data each time, and I can even refresh. When I refresh, it makes that request on the server, but it never has to make that load on the client.

    01:17 What I can do because this Fetch function is being used across multiple pages now, the home and the completed, is I can cut it out of here, in my pages create a new file. I'll just call it shared.js, and I'll paste my code in here, and I'll just export an async function and rename this from Fetch to init just so it doesn't collide with the Fetch library.

    01:41 I'll format that a bit, and now in completed I can say, "Import init from shared," and I'll say Fetch is init and just do the same thing in my index where I import init from shared, and now Fetch is init.

    02:00 When I go home, you'll see I start redirecting to my error, and right away I notice that I have an imported axios here, so I can grab axios, drop that in my shared, hit save, and now I navigate back to home. Now home is using this shared, and completed is using this shared, as well.

    02:19 Let's go ahead and delete the import axios from here. Fetch is using init. Fetch is using init, so that as I navigate...On my completed page I'll navigate back to home. On my index page, I'll navigate to completed.

    02:33 You'll see that as I refresh, clear this out, I'll go to completed. I'll go to home, completed, that I never actually make another request to load this data. It's only loaded before the initial server render, and from there on out, we're operating on it on the client.

    02:50 From there on out, we've stored the data in the store, so we can just grab it from there instead of having to request it again.

    Discuss

    Discuss