[NUXT] Navigate with Nuxt-link and Customize isclient Behavior in Nuxt and Vue.js

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

' Fetch ' can do server side rendering:

Async Fetch ({store, redirect, error}) {try  {    = await axios.get (' https:// Todos-cuvsmolowg.now.sh/todos ')    store.commit (' init ', res.data)  catch  (err {    Redirect ('/error ')  }}

Once it successfully store the data inside the store object, we don ' t need to fetch it again.

To avoid refetching the data, we can use ' isclient ' from the context.

fetch ({store, redirect, error, isclient}) {  if  (isclient) {    return   }   Try {    = await axios.get (' Https://todos-cuvsmolowg.now.sh/todos ')    store.commit (' init ') , Res.data)   Catch (err) {    Redirect ('/error ')  }}

Because This fetch method can is reused in elsewhere, so we can make it a sprated file:

Shared.js:

Import Axios from ' Axios 'function  init ({store, redirect, error, isclient}) {  if  (isclient) {    return  }  try  {    = await Axios.get (' Https://todos-cuvsmolowg.now.sh/todos ')    store.commit (' init ', Res.data)   catch  (err) {    Redirect ('/error ')  }}

Required it in side page:

<Template>  <Div>     <Nuxt-link  to= "/computed">computed</  Nuxt-link>     <articleclass= "Pa3 pa5-ns">      <ulclass= "List pl0 ml0 center mw6 ba b--light-silver br2">        <Liv-for= "Todo of Todos"class= "Ph3 pv3 bb b--light-silver">{{Todo.task}}</Li>      </ul>    </article>  </Div></Template><Script>Import {mapstate} from'Vuex'Import {init} from'./shared'Exportdefault{fetch:init, computed: {... mapstate ({todos: (state)=State.todos})}}</Script>

Here we use ' nuxt-link ' to the navigation.

Computed page should not load the Todos again, since we already has the data store in the store object.

Computed.vue:

<Template>  <Div>    <Nuxt-link to="/">Home</Nuxt-link>    <articleclass= "Pa3 pa5-ns">      <ulclass= "List pl0 ml0 center mw6 ba b--light-silver br2">        <Liv-for= "Todo of Todos"class= "Ph3 pv3 bb b--light-silver">{{Todo.task}}</Li>      </ul>    </article>  </Div></Template><Script>Import {mapstate} from'Vuex'Import {init} from'./shared'Exportdefault{fetch:init, computed: {... mapstate ({todos: (state)=State.todos})}}</Script>

[NUXT] Navigate with Nuxt-link and Customize isclient Behavior in Nuxt and Vue.js