[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"blog-article-/blog/nuxt-show-message-when-offline":3,"blog-surround-/blog/nuxt-show-message-when-offline":232},{"id":4,"title":5,"body":6,"canonical":218,"date":219,"description":220,"extension":221,"featured":222,"image":223,"meta":224,"navigation":225,"ogImage":218,"path":226,"provider":227,"published":222,"seo":228,"stem":229,"tags":230,"url":218,"__hash__":231},"blog/blog/nuxt-show-message-when-offline.md","Show a message when your user is offline with $nuxt.isOffline",{"type":7,"value":8,"toc":216},"minimark",[9,18,25,31,125,128,131,134,141,206,209,212],[10,11,12,13,17],"p",{},"Did you know that ",[14,15,16],"code",{},"$nuxt.isOffline"," can be used to show your users content based on if they are online or not.",[10,19,20,21,24],{},"By using a ",[14,22,23],{},"v-if"," we can show content based on if a user is offline or online.",[10,26,27,28],{},"In your ",[14,29,30],{},"layouts/default.vue",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv v-if=\"$nuxt.isOffline\">You are offline\u003C/div>\n    \u003Cnuxt />\n  \u003C/div>\n\u003C/template>\n","html","",[14,39,40,56,67,93,105,115],{"__ignoreMap":37},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sVt8B","\u003C",[41,50,52],{"class":51},"s9eBZ","template",[41,54,55],{"class":47},">\n",[41,57,59,62,65],{"class":43,"line":58},2,[41,60,61],{"class":47},"  \u003C",[41,63,64],{"class":51},"div",[41,66,55],{"class":47},[41,68,70,73,75,79,82,86,89,91],{"class":43,"line":69},3,[41,71,72],{"class":47},"    \u003C",[41,74,64],{"class":51},[41,76,78],{"class":77},"sScJk"," v-if",[41,80,81],{"class":47},"=",[41,83,85],{"class":84},"sZZnC","\"$nuxt.isOffline\"",[41,87,88],{"class":47},">You are offline\u003C/",[41,90,64],{"class":51},[41,92,55],{"class":47},[41,94,96,98,102],{"class":43,"line":95},4,[41,97,72],{"class":47},[41,99,101],{"class":100},"s7hpK","nuxt",[41,103,104],{"class":47}," />\n",[41,106,108,111,113],{"class":43,"line":107},5,[41,109,110],{"class":47},"  \u003C/",[41,112,64],{"class":51},[41,114,55],{"class":47},[41,116,118,121,123],{"class":43,"line":117},6,[41,119,120],{"class":47},"\u003C/",[41,122,52],{"class":51},[41,124,55],{"class":47},[10,126,127],{},"Just by adding that line of code to your app and disabling the internet, either in dev tools or by turning off your internet connection, the message \"You are offline will appear\".",[10,129,130],{},"This won't work on page refresh and it only works when the page has loaded.",[10,132,133],{},"So what is it useful for? You could have a cool toast like message that pops out when the user loses internet and say something like \"ooopps looks like you just lost your internet connection\". This could very useful on payment pages or when filling out large forms for example. You still see the content of the page but are unaware that you have lost the connection.",[10,135,136,137,140],{},"Then you could have the ",[14,138,139],{},"$nuxt.isOnline"," to show a message that says \"yeah you are back online\".",[32,142,144],{"className":34,"code":143,"language":36,"meta":37,"style":37},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv v-if=\"$nuxt.isOnline\">Yeah you are online\u003C/div>\n    \u003Cnuxt />\n  \u003C/div>\n\u003C/template>\n",[14,145,146,154,162,182,190,198],{"__ignoreMap":37},[41,147,148,150,152],{"class":43,"line":44},[41,149,48],{"class":47},[41,151,52],{"class":51},[41,153,55],{"class":47},[41,155,156,158,160],{"class":43,"line":58},[41,157,61],{"class":47},[41,159,64],{"class":51},[41,161,55],{"class":47},[41,163,164,166,168,170,172,175,178,180],{"class":43,"line":69},[41,165,72],{"class":47},[41,167,64],{"class":51},[41,169,78],{"class":77},[41,171,81],{"class":47},[41,173,174],{"class":84},"\"$nuxt.isOnline\"",[41,176,177],{"class":47},">Yeah you are online\u003C/",[41,179,64],{"class":51},[41,181,55],{"class":47},[41,183,184,186,188],{"class":43,"line":95},[41,185,72],{"class":47},[41,187,101],{"class":100},[41,189,104],{"class":47},[41,191,192,194,196],{"class":43,"line":107},[41,193,110],{"class":47},[41,195,64],{"class":51},[41,197,55],{"class":47},[41,199,200,202,204],{"class":43,"line":117},[41,201,120],{"class":47},[41,203,52],{"class":51},[41,205,55],{"class":47},[10,207,208],{},"I am sure there are many other use cases for this and would love to hear if you have any suggestions or if anyone is actually using it and if so what for.",[10,210,211],{},"If you are not using it then go ahead and give it a try. In this example I have added it to the layout but you can add it to a page or even a component. Have fun.",[213,214,215],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":37,"searchDepth":58,"depth":58,"links":217},[],null,"2020-04-20","Did you know that `$nuxt.isOffline` can be used to show your users content based on if they are online or not.","md",false,"photo-1588064718670-764b8515b86e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&",{},true,"/blog/nuxt-show-message-when-offline","imgix",{"title":5,"description":220},"blog/nuxt-show-message-when-offline",[101],"DOhXE_D4bW25IsHK8_3YvMgaiptjBR86T5Mq8NnMqUQ",[233,237],{"title":234,"path":235,"stem":236,"children":-1},"Configure the Nuxt.js server to see your site on your mobile","/blog/nuxt-configure-server-to-see-site-on-mobile","blog/nuxt-configure-server-to-see-site-on-mobile",{"title":238,"path":239,"stem":240,"children":-1},"The Nuxt Loading Progress Bar","/blog/nuxt-loading-progress-bar","blog/nuxt-loading-progress-bar",1790839748356]