From 277fa82295a8b58ada1001cfc828269864c02430 Mon Sep 17 00:00:00 2001 From: soroush ebadi Date: Sun, 6 Feb 2022 16:09:47 +0330 Subject: [PATCH 1/2] feat(add persian content): add persian content to directory structure --- content/fa/_collections/design/colors.md | 13 + content/fa/_collections/design/logos.md | 19 + content/fa/_collections/design/monogram.md | 16 + content/fa/_collections/events/2019.md | 47 + content/fa/_collections/events/2020.md | 80 ++ content/fa/_collections/events/2021.md | 48 + content/fa/_collections/events/index.md | 3 + content/fa/_collections/navigations/footer.md | 55 ++ content/fa/_collections/navigations/header.md | 103 ++ content/fa/_collections/teams/1.framework.md | 51 + content/fa/_collections/teams/2.community.md | 240 +++++ content/fa/_collections/teams/index.md | 3 + content/fa/_collections/testimonials/index.md | 85 ++ .../0.nuxt-static-improvements.md | 169 ++++ .../fa/announcements/1.going-full-static.md | 173 ++++ ...erstanding-how-fetch-works-in-nuxt-2-12.md | 336 +++++++ .../3.nuxtjs-from-terminal-to-browser.md | 55 ++ .../4.introducing-smart-prefetching.md | 31 + content/fa/announcements/5.nuxt3-beta.md | 84 ++ content/fa/announcements/index.md | 9 + content/fa/case-studies/0.github.md | 55 ++ content/fa/case-studies/1.livementor.md | 56 ++ content/fa/case-studies/2.stores.md | 46 + content/fa/case-studies/3.parent-scheme.md | 60 ++ content/fa/case-studies/4.line.md | 56 ++ .../fa/case-studies/5.404-place-vendome.md | 44 + content/fa/case-studies/6.komercia.md | 46 + .../case-studies/7.new-york-public-radio.md | 46 + content/fa/case-studies/index.md | 9 + content/fa/contribution-guide/index.md | 105 ++ content/fa/deployments/0.vercel.md | 70 ++ content/fa/deployments/1.netlify.md | 73 ++ content/fa/deployments/2.layer0.md | 75 ++ content/fa/deployments/21yunbox.md | 61 ++ content/fa/deployments/amazon-web-services.md | 413 ++++++++ content/fa/deployments/azure-portal.md | 157 +++ .../fa/deployments/azure-static-web-apps.md | 121 +++ content/fa/deployments/bip.md | 60 ++ content/fa/deployments/cleavr.md | 53 + content/fa/deployments/cloudflare.md | 26 + content/fa/deployments/digital-ocean.md | 63 ++ content/fa/deployments/dokku.md | 67 ++ content/fa/deployments/fume.md | 44 + content/fa/deployments/github-pages.md | 293 ++++++ content/fa/deployments/google-appengine.md | 76 ++ content/fa/deployments/google-cloud-run.md | 127 +++ content/fa/deployments/heroku.md | 57 ++ content/fa/deployments/hostman.md | 85 ++ content/fa/deployments/index.md | 8 + content/fa/deployments/koyeb.md | 128 +++ content/fa/deployments/nginx.md | 252 +++++ content/fa/deployments/platformsh.md | 39 + content/fa/deployments/pm2.md | 65 ++ content/fa/deployments/qovery.md | 70 ++ content/fa/deployments/stormkitio.md | 60 ++ content/fa/deployments/surge.md | 54 + content/fa/design/index.md | 75 ++ .../docs/4.directory-structure/4.content.md | 286 ++++++ content/fa/events/index.md | 7 + .../fa/examples/1.routing/1.hello-world.md | 21 + .../1.routing/2.active-link-classes.md | 25 + .../fa/examples/1.routing/3.dynamic-pages.md | 25 + .../fa/examples/1.routing/4.nested-pages.md | 25 + content/fa/examples/1.routing/index.md | 5 + content/fa/examples/10.modules/1.local.md | 23 + content/fa/examples/10.modules/2.axios.md | 30 + content/fa/examples/10.modules/index.md | 5 + .../examples/2.data-fetching/1.async-data.md | 25 + .../examples/2.data-fetching/2.fetch-hook.md | 29 + content/fa/examples/2.data-fetching/index.md | 5 + .../3.assets-management/1.pre-processors.md | 29 + .../3.assets-management/2.webpack-assets.md | 29 + .../fa/examples/3.assets-management/index.md | 5 + .../examples/4.transitions/1.transitions.md | 24 + content/fa/examples/4.transitions/index.md | 5 + content/fa/examples/5.seo/1.html-head.md | 29 + content/fa/examples/5.seo/2.twitter-og.md | 29 + content/fa/examples/5.seo/index.md | 5 + .../6.loading/1.customize-nuxt-loading.md | 23 + .../2.customize-loading-indicator.md | 24 + .../6.loading/3.custom-loading-component.md | 25 + content/fa/examples/6.loading/index.md | 5 + .../fa/examples/7.miscellaneous/1.layouts.md | 23 + .../2.lazy-loading-components.md | 28 + .../examples/7.miscellaneous/3.vuex-store.md | 23 + .../fa/examples/7.miscellaneous/4.helpers.md | 29 + content/fa/examples/7.miscellaneous/index.md | 5 + content/fa/examples/8.middlewares/1.router.md | 27 + content/fa/examples/8.middlewares/2.named.md | 27 + .../fa/examples/8.middlewares/3.anonymous.md | 23 + content/fa/examples/8.middlewares/index.md | 5 + content/fa/examples/9.plugins/1.vue.md | 27 + .../fa/examples/9.plugins/2.client-only.md | 23 + .../examples/9.plugins/3.external-packages.md | 31 + content/fa/examples/9.plugins/4.custom.md | 34 + content/fa/examples/9.plugins/index.md | 5 + content/fa/examples/index.md | 11 + content/fa/index.md | 282 ++++++ content/fa/modules/index.md | 20 + content/fa/partners/index.md | 36 + content/fa/releases/index.md | 6 + content/fa/showcases/index.md | 25 + content/fa/sponsors/index.md | 27 + content/fa/support/index.md | 70 ++ content/fa/teams/index.md | 36 + content/fa/testimonials/index.md | 7 + content/fa/themes/index.md | 45 + .../fa/tutorials/0.creating-a-nuxt-module.md | 433 ++++++++ .../1.creating-blog-with-nuxt-content.md | 935 ++++++++++++++++++ ...veloper-experience-with-nuxt-components.md | 440 +++++++++ .../3.going-dark-with-nuxtjs-color-mode.md | 493 +++++++++ ...ng-from-nuxtjs-dotenv-to-runtime-config.md | 287 ++++++ ....build-dev-to-clone-with-nuxt-new-fetch.md | 586 +++++++++++ content/fa/tutorials/index.md | 6 + content/fa/video-courses/index.md | 64 ++ 115 files changed, 9677 insertions(+) create mode 100644 content/fa/_collections/design/colors.md create mode 100644 content/fa/_collections/design/logos.md create mode 100644 content/fa/_collections/design/monogram.md create mode 100644 content/fa/_collections/events/2019.md create mode 100644 content/fa/_collections/events/2020.md create mode 100644 content/fa/_collections/events/2021.md create mode 100644 content/fa/_collections/events/index.md create mode 100644 content/fa/_collections/navigations/footer.md create mode 100644 content/fa/_collections/navigations/header.md create mode 100644 content/fa/_collections/teams/1.framework.md create mode 100644 content/fa/_collections/teams/2.community.md create mode 100644 content/fa/_collections/teams/index.md create mode 100644 content/fa/_collections/testimonials/index.md create mode 100644 content/fa/announcements/0.nuxt-static-improvements.md create mode 100644 content/fa/announcements/1.going-full-static.md create mode 100644 content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md create mode 100644 content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md create mode 100644 content/fa/announcements/4.introducing-smart-prefetching.md create mode 100644 content/fa/announcements/5.nuxt3-beta.md create mode 100644 content/fa/announcements/index.md create mode 100644 content/fa/case-studies/0.github.md create mode 100644 content/fa/case-studies/1.livementor.md create mode 100644 content/fa/case-studies/2.stores.md create mode 100644 content/fa/case-studies/3.parent-scheme.md create mode 100644 content/fa/case-studies/4.line.md create mode 100644 content/fa/case-studies/5.404-place-vendome.md create mode 100644 content/fa/case-studies/6.komercia.md create mode 100644 content/fa/case-studies/7.new-york-public-radio.md create mode 100644 content/fa/case-studies/index.md create mode 100644 content/fa/contribution-guide/index.md create mode 100644 content/fa/deployments/0.vercel.md create mode 100644 content/fa/deployments/1.netlify.md create mode 100644 content/fa/deployments/2.layer0.md create mode 100644 content/fa/deployments/21yunbox.md create mode 100644 content/fa/deployments/amazon-web-services.md create mode 100644 content/fa/deployments/azure-portal.md create mode 100644 content/fa/deployments/azure-static-web-apps.md create mode 100644 content/fa/deployments/bip.md create mode 100644 content/fa/deployments/cleavr.md create mode 100644 content/fa/deployments/cloudflare.md create mode 100644 content/fa/deployments/digital-ocean.md create mode 100644 content/fa/deployments/dokku.md create mode 100644 content/fa/deployments/fume.md create mode 100644 content/fa/deployments/github-pages.md create mode 100644 content/fa/deployments/google-appengine.md create mode 100644 content/fa/deployments/google-cloud-run.md create mode 100644 content/fa/deployments/heroku.md create mode 100644 content/fa/deployments/hostman.md create mode 100644 content/fa/deployments/index.md create mode 100644 content/fa/deployments/koyeb.md create mode 100644 content/fa/deployments/nginx.md create mode 100644 content/fa/deployments/platformsh.md create mode 100644 content/fa/deployments/pm2.md create mode 100644 content/fa/deployments/qovery.md create mode 100644 content/fa/deployments/stormkitio.md create mode 100644 content/fa/deployments/surge.md create mode 100644 content/fa/design/index.md create mode 100644 content/fa/docs/4.directory-structure/4.content.md create mode 100644 content/fa/events/index.md create mode 100644 content/fa/examples/1.routing/1.hello-world.md create mode 100644 content/fa/examples/1.routing/2.active-link-classes.md create mode 100644 content/fa/examples/1.routing/3.dynamic-pages.md create mode 100644 content/fa/examples/1.routing/4.nested-pages.md create mode 100644 content/fa/examples/1.routing/index.md create mode 100644 content/fa/examples/10.modules/1.local.md create mode 100644 content/fa/examples/10.modules/2.axios.md create mode 100644 content/fa/examples/10.modules/index.md create mode 100644 content/fa/examples/2.data-fetching/1.async-data.md create mode 100644 content/fa/examples/2.data-fetching/2.fetch-hook.md create mode 100644 content/fa/examples/2.data-fetching/index.md create mode 100644 content/fa/examples/3.assets-management/1.pre-processors.md create mode 100644 content/fa/examples/3.assets-management/2.webpack-assets.md create mode 100644 content/fa/examples/3.assets-management/index.md create mode 100644 content/fa/examples/4.transitions/1.transitions.md create mode 100644 content/fa/examples/4.transitions/index.md create mode 100644 content/fa/examples/5.seo/1.html-head.md create mode 100644 content/fa/examples/5.seo/2.twitter-og.md create mode 100644 content/fa/examples/5.seo/index.md create mode 100644 content/fa/examples/6.loading/1.customize-nuxt-loading.md create mode 100644 content/fa/examples/6.loading/2.customize-loading-indicator.md create mode 100644 content/fa/examples/6.loading/3.custom-loading-component.md create mode 100644 content/fa/examples/6.loading/index.md create mode 100644 content/fa/examples/7.miscellaneous/1.layouts.md create mode 100644 content/fa/examples/7.miscellaneous/2.lazy-loading-components.md create mode 100644 content/fa/examples/7.miscellaneous/3.vuex-store.md create mode 100644 content/fa/examples/7.miscellaneous/4.helpers.md create mode 100644 content/fa/examples/7.miscellaneous/index.md create mode 100644 content/fa/examples/8.middlewares/1.router.md create mode 100644 content/fa/examples/8.middlewares/2.named.md create mode 100644 content/fa/examples/8.middlewares/3.anonymous.md create mode 100644 content/fa/examples/8.middlewares/index.md create mode 100644 content/fa/examples/9.plugins/1.vue.md create mode 100644 content/fa/examples/9.plugins/2.client-only.md create mode 100644 content/fa/examples/9.plugins/3.external-packages.md create mode 100644 content/fa/examples/9.plugins/4.custom.md create mode 100644 content/fa/examples/9.plugins/index.md create mode 100644 content/fa/examples/index.md create mode 100644 content/fa/index.md create mode 100644 content/fa/modules/index.md create mode 100644 content/fa/partners/index.md create mode 100644 content/fa/releases/index.md create mode 100644 content/fa/showcases/index.md create mode 100644 content/fa/sponsors/index.md create mode 100644 content/fa/support/index.md create mode 100644 content/fa/teams/index.md create mode 100644 content/fa/testimonials/index.md create mode 100644 content/fa/themes/index.md create mode 100644 content/fa/tutorials/0.creating-a-nuxt-module.md create mode 100644 content/fa/tutorials/1.creating-blog-with-nuxt-content.md create mode 100644 content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md create mode 100644 content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md create mode 100644 content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md create mode 100644 content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md create mode 100644 content/fa/tutorials/index.md create mode 100644 content/fa/video-courses/index.md diff --git a/content/fa/_collections/design/colors.md b/content/fa/_collections/design/colors.md new file mode 100644 index 0000000000..db0a6754dd --- /dev/null +++ b/content/fa/_collections/design/colors.md @@ -0,0 +1,13 @@ +--- +colors: +- + name: Green Default + bg_color: bg-primary + hexa: '#00DC82' + rgb: '0 220 130' +- + name: Sky Darker + bg_color: bg-secondary-darker + hexa: '#002E3B' + rgb: '0 46 59' +--- diff --git a/content/fa/_collections/design/logos.md b/content/fa/_collections/design/logos.md new file mode 100644 index 0000000000..5c4646b06c --- /dev/null +++ b/content/fa/_collections/design/logos.md @@ -0,0 +1,19 @@ +--- +logos: +- + type: Text colored + logoImg: '/design-kit/colored-text' + color: dark +- + type: Text black + logoImg: '/design-kit/black-text' + color: dark +- + type: Text white + logoImg: '/design-kit/white-text' + color: light +- + type: Text colored & white + logoImg: '/design-kit/colored-white-text' + color: light +--- diff --git a/content/fa/_collections/design/monogram.md b/content/fa/_collections/design/monogram.md new file mode 100644 index 0000000000..82c505b59a --- /dev/null +++ b/content/fa/_collections/design/monogram.md @@ -0,0 +1,16 @@ +--- +logos: +- + type: Logo colored + logoImg: '/design-kit/colored-logo' + color: dark +- + type: Logo black + logoImg: '/design-kit/black-logo' + color: dark +- + type: Logo white + logoImg: '/design-kit/white-logo' + color: light +- +--- diff --git a/content/fa/_collections/events/2019.md b/content/fa/_collections/events/2019.md new file mode 100644 index 0000000000..90a2e2fafe --- /dev/null +++ b/content/fa/_collections/events/2019.md @@ -0,0 +1,47 @@ +--- +events: + - + name: 'ReactiveConf 2019' + title: 'Be Lazy, Be Smart, Be Nuxt' + speaker: 'Sébastien Chopin' + description: 'Sebastien demonstrates how to create a web application quickly by using Nuxt and explaining how it works under the hood. Giving you confidence for your next Vue applications.' + logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg' + eventLogo: 'reactive_conf.svg' + eventLink: 'https://reactiveconf.com/' + link: 'https://youtu.be/vbsPXHCu8Xg' + date: '30/10/2019' + lang: 'en' + - + name: 'VueJS Amsterdam' + title: 'Nuxt 2019' + speaker: 'Sébastien Chopin' + description: 'Sébastien gives an overview of Nuxt in 2019' + logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/m0UtuJoigvQ' + date: '20/02/2019' + lang: 'en' + - + name: 'Vue Day Alicante 2019' + title: 'Deep Dive into Nuxt internals' + speaker: 'Sébastien Chopin' + description: 'Ever wondered how Nuxt works? Sebastien, creator of Nuxt will explain how the framework works internally. Giving you the knowledge to enjoy the full power of Nuxt and its module ecosystem.' + logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg' + eventLogo: 'vue_day.svg' + eventLink: 'https://vueday.org/' + link: 'https://youtu.be/mxJlUMFC9Ns' + date: '14/06/2019' + lang: 'en' + - + name: 'VueConf Toronto' + title: 'Leave your legacy code behind and go Nuxt' + speaker: "Debbie O'Brien" + description: "A case study on how Debbie and her team built their client's site, what they used and how they made it as performant as possible and were able to deliver better results to their clients and how now they have left the legacy code behind and have fully gone Nuxt." + logo: 'https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg' + eventLogo: 'vueconf_toronto.svg' + eventLink: 'https://www.vuetoronto.com/' + link: 'https://youtu.be/FBEOIuDUZh4' + date: '20/11/2019' + lang: 'en' +--- diff --git a/content/fa/_collections/events/2020.md b/content/fa/_collections/events/2020.md new file mode 100644 index 0000000000..ea9cd58030 --- /dev/null +++ b/content/fa/_collections/events/2020.md @@ -0,0 +1,80 @@ +--- +events: + - + name: 'VueConf Toronto' + title: 'The state of Nuxt' + description: 'Sébastien presents the state of Nuxt in 2020 at the VueConf Toronto' + speaker: 'Sébastien Chopin' + logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg' + eventLogo: 'vueconf_toronto.svg' + eventLink: 'https://www.vuetoronto.com/' + link: 'https://youtu.be/LMONTMOc1zI' + date: '08/11/2020' + lang: 'English' + - + name: 'Vuejs Global' + title: 'Nuxt Architecture' + description: "Discover the framework architecture and what's coming with Nuxt3 with Pooya" + speaker: 'Pooya Parsa' + logo: 'https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/oZtsiw2rBgQ' + date: '21/10/2020' + lang: 'English' + - + name: 'Vuejs Amsterdam' + title: 'Deep dive into Nuxt' + speaker: 'Pooya Parsa' + description: 'Learn how Nuxt is built under the hood to make it modular and accomodate a large set of use-cases' + logo: 'https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/n2JQ0-BWRV8' + date: '20/02/2020' + lang: 'English' + - + name: 'Vue.js fwdays' + title: 'Nuxt and the Composition API' + speaker: 'Alexander Lichter' + description: 'Alexander demonstrates how you can use the composition API in Nuxt starting today, and what benefits it can bring.' + logo: 'https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg' + eventLogo: 'vuejs_fwdays.svg' + eventLink: 'https://fwdays.com/' + link: 'https://youtu.be/iheIYq5ZlsE' + date: '28/11/2020' + lang: 'English' + - + name: 'GOTOpia Europe 2020' + title: 'Going Static in a Dynamic World with Hasura and Nuxt' + speaker: "Debbie O'Brien" + description: 'Debbie covers how to use Nuxt SSG with Hasura, from setting up your endpoint, adding the query to Nuxt to display your data with Apollo and GraphQL, how to setup a hook so that it triggers a deploy of your site on content change as static sites need to be redeployed on content change.' + logo: 'https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg' + eventLogo: 'gotopia.svg' + eventLink: 'https://gotopia.eu/' + link: 'https://youtu.be/1j9DIX32GpY' + date: '15/12/2020' + lang: 'English' + - + name: 'VueConf US 2020' + title: 'Nuxt js + Netlify CMS' + speaker: 'Daniel Kelly' + description: 'Daniel talks to us about how he creates a surprisingly dynamic static site by using Nuxt and Netlify CMS.' + logo: 'https://pbs.twimg.com/profile_images/1419775557475184643/Vx7ZKWL5_400x400.jpg' + eventLogo: 'vuejs.svg' + eventLink: 'https://us.vuejs.org/' + link: 'https://youtu.be/1bAeI2GPG44' + date: '15/05/2020' + lang: 'English' + - + name: 'Jamstack Paris' + title: 'Nuxt Live Coding: Full Static et Live Preview avec Strapi' + speaker: 'Sébastien Chopin' + description: "Dans ce talk à la Jamstack Paris, Sébastien explique tout sur le full static avec Nuxt, et l'utilisation du live preview mode" + logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg' + eventLogo: 'jamstack_paris.svg' + eventLink: 'https://jamstack.paris/' + link: 'https://youtu.be/orKv4jhpbtw' + date: '10/08/2020' + lang: 'French' +--- diff --git a/content/fa/_collections/events/2021.md b/content/fa/_collections/events/2021.md new file mode 100644 index 0000000000..52aea9cfde --- /dev/null +++ b/content/fa/_collections/events/2021.md @@ -0,0 +1,48 @@ +--- +events: + - + name: 'Vuejs Amsterdam' + title: 'Nuxt3 in Action' + speaker: 'Sébastien Chopin' + description: 'Get a first glance at what Nuxt3 looks like from a user perspective with this demo from Sébastien' + logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/ClF9BvKCVwY' + date: '26/02/2021' + lang: 'English' + - + name: 'Vuejs Amsterdam' + title: 'State of Nuxt3' + speaker: 'Pooya Parsa' + description: 'In this talk, Pooya recaps how Nuxt works, and gives details about what Nuxt3 brings to the table, including Nitro, Nuxt Kit and the new CLI.' + logo: 'https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/_-wqph-IaAw' + date: '26/02/2021' + lang: 'English' + - + name: 'Vuejs Amsterdam' + title: 'Edge-rendering with Nuxt' + speaker: 'Daniel Roe' + description: 'Take a sneak peek at the next-generation rendering engine that will power Nuxt 3 and Nuxt 2. Look at how this revolutionises building SSR Vue apps, and what you need to do to use this today.' + logo: 'https://pbs.twimg.com/profile_images/1326211963614007302/UJyvtK2f_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/ApUPE8b-m04' + date: '26/02/2021' + lang: 'English' + - + name: 'Strapi Conf' + title: 'Nuxt + Strapi + Composition API' + speaker: 'Alexander Lichter' + description: 'In this session, Alexander builds the fitting frontend for a Strapi CMS backend by leveraging the Composition API and ensure it is performant and fast. Get insights into the world of Vue and Nuxt, useful patterns for the Composition API and possibly some sneak peaks' + logo: 'https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg' + eventLogo: 'strapi.jpeg' + imgUrl: '/img/events/light/strapi-conf-alexander-lichter.png' + eventLink: 'https://conf.strapi.io/' + link: 'https://youtu.be/WZI5lt607ww' + date: '06/05/2021' + lang: 'English' +--- diff --git a/content/fa/_collections/events/index.md b/content/fa/_collections/events/index.md new file mode 100644 index 0000000000..dc762ec9a6 --- /dev/null +++ b/content/fa/_collections/events/index.md @@ -0,0 +1,3 @@ +--- +navigation: false +--- diff --git a/content/fa/_collections/navigations/footer.md b/content/fa/_collections/navigations/footer.md new file mode 100644 index 0000000000..8d2f1a5bdc --- /dev/null +++ b/content/fa/_collections/navigations/footer.md @@ -0,0 +1,55 @@ +--- +links: + - title: 'About' + items: + - title: 'Contact us' + href: 'mailto:hello@nuxtjs.com' + - title: 'Enterprise support' + to: '/support' + - title: 'NuxtLabs company' + href: 'https://nuxtlabs.com/' + - title: 'Open Source Software' + href: 'https://github.com/nuxt' + - title: 'Partnerships' + to: '/partners' + - title: 'Telemetry' + href: 'https://github.com/nuxt/telemetry' + - title: 'Ecosystem' + items: + - title: 'Announcements' + to: '/announcements' + - title: 'Contribute' + to: '/contribution-guide' + - title: 'Chat with us' + href: 'https://discord.nuxtjs.org/' + - title: 'Events' + to: '/events' + - title: 'Sponsors' + to: '/sponsors' + - title: 'Teams' + to: '/teams' + - title: 'Tutorials' + to: '/tutorials' + - title: 'Video courses' + to: '/video-courses/' + - title: 'Resources' + items: + - title: 'Design' + to: '/design' + - title: 'Documentation' + to: '/docs' + - title: 'Examples' + to: '/examples' + - title: 'Deployments' + to: '/deployments' + - title: 'Master courses' + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite' + - title: 'Modules' + href: 'https://modules.nuxtjs.org' + - title: 'Releases' + to: '/releases' + - title: 'Showcases' + to: '/showcases' + - title: 'Themes' + to: '/themes' +--- diff --git a/content/fa/_collections/navigations/header.md b/content/fa/_collections/navigations/header.md new file mode 100644 index 0000000000..06b630e502 --- /dev/null +++ b/content/fa/_collections/navigations/header.md @@ -0,0 +1,103 @@ +--- +links: + - title: 'Discover' + items: + - title: 'Showcases' + subtitle: 'Selection of websites built with Nuxt' + slug: 'showcases' + to: '/showcases' + icon: 'showcases.svg' + color: 'bg-sand' + - title: 'Case studies' + subtitle: 'How companies use Nuxt' + slug: 'case-studies' + to: '/case-studies' + icon: 'case-studies.svg' + color: 'bg-sand-dark' + - title: 'Testimonials' + subtitle: 'What they think about us' + slug: 'testimonials' + to: '/testimonials' + icon: 'testimonials.svg' + color: 'bg-sand-darker' + - title: 'Learn' + items: + - title: 'Docs' + subtitle: 'Create fast websites easily' + slug: 'docs' + to: '/docs' + icon: 'docs.svg' + color: 'bg-green-500' + + - title: 'Examples' + subtitle: 'Understand everything in Nuxt' + slug: 'examples' + to: '/examples' + icon: 'examples.svg' + color: 'bg-green-600' + - title: 'Tutorials' + subtitle: 'Learn with concrete cases' + slug: 'tutorials' + to: '/tutorials' + icon: 'tutorials.svg' + color: 'bg-green-700' + - title: 'Master courses' + subtitle: 'Learn more with experts' + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite' + icon: 'master-courses.svg' + color: 'bg-green-800' + - title: 'Explore' + items: + - title: 'Deployments' + subtitle: 'How to Deploy Nuxt' + slug: 'deployments' + to: '/deployments' + icon: 'deployments.svg' + color: 'bg-indigo-light' + - title: 'Modules' + subtitle: 'Extend the power of Nuxt' + href: 'https://modules.nuxtjs.org' + icon: 'modules.svg' + color: 'bg-indigo' + - title: 'Themes' + subtitle: 'Get started with themes' + slug: 'themes' + to: '/themes' + icon: 'themes.svg' + color: 'bg-indigo-dark' + - title: 'Video Courses' + subtitle: 'Learn step by step' + slug: 'video-courses' + to: '/video-courses' + icon: 'video-courses.svg' + color: 'bg-indigo-darker' + - title: 'Community' + items: + - title: 'Announcements' + subtitle: 'Latest news about Nuxt' + slug: 'announcements' + to: '/announcements' + icon: 'announcements.svg' + color: 'bg-mint-lighter' + - title: 'Teams' + subtitle: 'They are Nuxt' + slug: 'teams' + to: '/teams' + icon: 'teams.svg' + color: 'bg-mint-light' + - title: 'Releases' + subtitle: 'All the code we have released' + slug: 'releases' + to: '/releases' + icon: 'releases.svg' + color: 'bg-mint' + - title: 'Sponsors' + subtitle: 'They trust us' + slug: 'sponsors' + to: '/sponsors' + icon: 'sponsors.svg' + color: 'bg-mint-dark' + - title: 'Partners' + slug: 'partners' + to: '/partners' +--- diff --git a/content/fa/_collections/teams/1.framework.md b/content/fa/_collections/teams/1.framework.md new file mode 100644 index 0000000000..84dda91bca --- /dev/null +++ b/content/fa/_collections/teams/1.framework.md @@ -0,0 +1,51 @@ +--- +members: + - + avatarUrl: 'https://github.com/alexchopin.png' + name: 'Alexandre Chopin' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/alexchopin' + - twitter: 'https://twitter.com/iamnuxt' + - linkedIn: 'https://www.linkedin.com/in/alexchopin/' + - + avatarUrl: 'https://github.com/atinux.png' + name: 'Sebastien Chopin' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/Atinux' + - twitter: 'https://twitter.com/Atinux' + - linkedIn: 'https://www.linkedin.com/in/atinux/' + - + avatarUrl: 'https://github.com/pi0.png' + name: 'Pooya Parsa (پویا پارسا)' + location: 'Haarlem, Netherlands' + socials: + - gitHub: 'https://github.com/pi0' + - twitter: 'https://twitter.com/_pi0_' + - linkedIn: 'https://www.linkedin.com/in/pooyaparsa/' + - + avatarUrl: 'https://github.com/danielroe.png' + name: 'Daniel Roe' + location: 'Durham, UK' + socials: + - gitHub: 'https://github.com/danielroe' + - twitter: 'https://twitter.com/danielroe' + - linkedIn: 'https://www.linkedin.com/in/daniel-roe/' + - + avatarUrl: 'https://github.com/clarkdo.png' + name: 'Clark Du (杜欣)' + location: 'Dublin, Ireland' + socials: + - gitHub: 'https://github.com/clarkdo' + - twitter: 'https://twitter.com/ClarkDu_' + - linkedIn: 'https://www.linkedin.com/in/clark-du/' + - + avatarUrl: 'https://github.com/antfu.png' + name: 'Anthony Fu' + location: 'Hangzhou, China' + socials: + - gitHub: 'https://github.com/antfu' + - twitter: 'https://twitter.com/antfu7' + - website: 'https://antfu.me/' +--- diff --git a/content/fa/_collections/teams/2.community.md b/content/fa/_collections/teams/2.community.md new file mode 100644 index 0000000000..4defd98b68 --- /dev/null +++ b/content/fa/_collections/teams/2.community.md @@ -0,0 +1,240 @@ +--- +members: + - + avatarUrl: 'https://github.com/manniL.png' + name: 'Alexander Lichter' + location: 'Leipzig, Germany' + socials: + - gitHub: 'https://github.com/manniL' + - twitter: 'https://twitter.com/TheAlexLichter' + - website: 'https://blog.lichter.io' + - + avatarUrl: 'https://github.com/aldarund.png' + name: 'Dmitry Molotkov' + location: 'Gomel, Belarus' + socials: + - gitHub: 'https://github.com/aldarund' + - twitter: 'https://twitter.com/aldarund' + - stackOverflow: 'https://stackoverflow.com/users/239354/aldarund' + - + avatarUrl: 'https://github.com/pimlie.png' + name: 'Pim' + location: 'The Netherlands' + socials: + - gitHub: 'https://github.com/pimlie' + - + avatarUrl: 'https://github.com/ricardogobbosouza.png' + name: 'Ricardo Gobbo de Souza' + location: 'The Netherlands' + socials: + - gitHub: 'https://github.com/ricardogobbosouza' + - twitter: 'https://twitter.com/gobbo_ricardo' + - website: 'https://datalogix.com.br' + - + avatarUrl: 'https://github.com/Krutie.png' + name: 'Krutie Patel' + location: 'Brisbane, Australia' + socials: + - gitHub: 'https://github.com/Krutie' + - twitter: 'https://twitter.com/KrutiePatel' + - website: 'https://krutiepatel.com/' + - + avatarUrl: 'https://github.com/hecktarzuli.png' + name: 'Josh Deltener' + location: 'North Dakota, USA' + socials: + - gitHub: 'https://github.com/hecktarzuli' + - twitter: 'https://twitter.com/JoshDeltener' + - website: 'https://deltener.com' + - + avatarUrl: 'https://github.com/mayashavin.png' + name: 'Maya Shavin' + location: 'Israel' + socials: + - gitHub: 'https://github.com/mayashavin' + - twitter: 'https://twitter.com/MayaShavin' + - website: 'https://mayashavin.com/' + - + avatarUrl: 'https://github.com/f3ltron.png' + name: 'Giraud Florent' + location: 'Montreal, Canada' + socials: + - gitHub: 'https://github.com/f3ltron' + - twitter: 'https://twitter.com/giraud_florent' + - website: 'https://florent.dev' + - + avatarUrl: 'https://github.com/Dawntraoz.png' + name: 'Alba Silvente' + location: 'Amsterdam, NL' + socials: + - gitHub: 'https://github.com/Dawntraoz' + - twitter: 'https://twitter.com/dawntraoz' + - website: 'https://www.dawntraoz.com' + - + avatarUrl: 'https://github.com/timbenniks.png' + name: 'Tim Benniks' + location: 'Paris, France' + socials: + - gitHub: 'https://github.com/timbenniks' + - twitter: 'https://twitter.com/timbenniks' + - website: 'https://timbenniks.dev' + - + avatarUrl: 'https://github.com/lauragift21.png' + name: 'Gift Egwuenu' + location: 'Amsterdam, NL' + socials: + - gitHub: 'https://github.com/lauragift21' + - twitter: 'https://twitter.com/lauragift_' + - website: 'https://www.giftegwuenu.com/' + - + avatarUrl: 'https://github.com/bencodezen.png' + name: 'Ben Hong' + location: 'Washington D.C., USA' + socials: + - gitHub: 'https://github.com/bencodezen' + - twitter: 'https://twitter.com/bencodezen' + - website: 'https://www.bencodezen.io/' + - + avatarUrl: 'https://github.com/farnabaz.png' + name: 'Ahad Birang' + location: 'Tehran, Iran' + socials: + - gitHub: 'https://github.com/farnabaz' + - twitter: 'https://twitter.com/a_birang' + - linkedIn: 'https://www.linkedin.com/in/ahadbirang' + - + avatarUrl: 'https://github.com/bdrtsky.png' + name: 'Sergey Bedritsky' + location: 'Kiev, Ukraine' + socials: + - gitHub: 'https://github.com/bdrtsky' + - twitter: 'https://twitter.com/sergeybedritsky' + - linkedIn: 'https://www.linkedin.com/in/sergey-bedritsky' + - + avatarUrl: 'https://github.com/clemcode.png' + name: 'Clement Ollivier' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/clemcode' + - twitter: 'https://twitter.com/clemcodes' + - linkedIn: 'https://www.linkedin.com/in/clementollivier1' + - + avatarUrl: 'https://github.com/Flosciante.png' + name: 'Florent Delerue' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/Flosciante' + - twitter: 'https://twitter.com/Flosciante' + - linkedIn: 'https://www.linkedin.com/in/florent-delerue-84b24a83' + - + avatarUrl: 'https://github.com/R-mooon.png' + name: 'Vincent Rodriguez' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/R-mooon' + - twitter: 'https://twitter.com/RodrigodelaNoch' + - linkedIn: 'https://www.linkedin.com/in/vincent-rodriguez-rmoon' + - + avatarUrl: 'https://github.com/Tahul.png' + name: 'Yaël Guilloux' + location: 'Nantes, France' + socials: + - gitHub: 'https://github.com/Tahul' + - linkedIn: 'https://www.linkedin.com/in/yaelguilloux' + - + avatarUrl: 'https://github.com/benjamincanac.png' + name: 'Benjamin Canac' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/benjamincanac' + - twitter: 'https://twitter.com/benjamincanac' + - linkedIn: 'https://www.linkedin.com/in/benjamincanac' + - + avatarUrl: 'https://github.com/geminii.png' + name: "Jimmy Jouanne" + location: 'Le Havre, France' + socials: + - gitHub: 'https://github.com/geminii' + - linkedIn: 'https://www.linkedin.com/in/jimmy-jouanne-7b218a62/' + - + avatarUrl: 'https://github.com/debs-obrien.png' + name: "Debbie O'Brien" + location: 'Palma de Mallorca, Spain' + socials: + - gitHub: 'https://github.com/debs-obrien' + - twitter: 'https://twitter.com/debs_obrien' + - website: 'https://debbie.codes' + - + avatarUrl: 'https://github.com/kazupon.png' + name: "Kazuya Kawaguchi" + location: 'Tokyo, Japan' + socials: + - gitHub: 'https://github.com/kazupon' + - twitter: 'https://twitter.com/kazu_pon' + - + avatarUrl: 'https://github.com/farzadso.png' + name: "Farzad Soltani" + location: 'Tehran, Iran' + socials: + - gitHub: 'https://github.com/farzadso' + - twitter: 'https://twitter.com/farzadso' + - + avatarUrl: 'https://github.com/lihbr.png' + name: "Lucie Haberer" + location: 'Paris, France' + socials: + - gitHub: 'https://github.com/lihbr' + - twitter: 'https://twitter.com/li_hbr' + - website: 'https://lihbr.com' + - + avatarUrl: 'https://github.com/lupas.png' + name: "Pascal Luther" + location: 'Zurich, Switzerland' + socials: + - gitHub: 'https://github.com/lupas' + - linkedIn: 'https://www.linkedin.com/in/pascalluther/' + - + avatarUrl: 'https://github.com/NicoPennec.png' + name: "Nicolas PENNEC" + location: 'Zurich, Switzerland' + socials: + - gitHub: 'https://github.com/NicoPennec' + - twitter: 'https://twitter.com/NicoPennec' + - website: 'https://pennec.io' + - + avatarUrl: 'https://github.com/JoaoPedroAS51.png' + name: "João Pedro Antunes Silva" + location: 'Brazil' + socials: + - gitHub: 'https://github.com/JoaoPedroAS51' + - + avatarUrl: 'https://github.com/NozomuIkuta.png' + name: "Nozomu Ikuta" + location: 'Japan' + socials: + - gitHub: 'https://github.com/NozomuIkuta' + - twitter: 'https://twitter.com/NozomuIkuta' + - + avatarUrl: 'https://github.com/kissu.png' + name: "Konstantin BIFERT" + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/kissu' + - stackOverflow: 'https://stackoverflow.com/users/8816585/kissu' + - website: 'https://www.kissu.io/' + - + avatarUrl: 'https://github.com/rchl.png' + name: "Rafał Chłodnicki" + location: 'Oslo, Norway' + socials: + - gitHub: 'https://github.com/rchl' + - linkedIn: 'https://www.linkedin.com/in/rafa%C5%82-ch%C5%82odnicki-1307b0b7/' + - + avatarUrl: 'https://github.com/kevinmarrec.png' + name: "Kévin Marrec" + location: 'Rennes, France' + socials: + - gitHub: 'https://github.com/kevinmarrec' + - twitter: 'https://twitter.com/K_Marrec' + - website: 'https://marrec.io/' +--- diff --git a/content/fa/_collections/teams/index.md b/content/fa/_collections/teams/index.md new file mode 100644 index 0000000000..dc762ec9a6 --- /dev/null +++ b/content/fa/_collections/teams/index.md @@ -0,0 +1,3 @@ +--- +navigation: false +--- diff --git a/content/fa/_collections/testimonials/index.md b/content/fa/_collections/testimonials/index.md new file mode 100644 index 0000000000..73bf33acbd --- /dev/null +++ b/content/fa/_collections/testimonials/index.md @@ -0,0 +1,85 @@ +--- +testimonials: + - + testimonial: 'Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake.' + author: 'Evan You' + authorIcon: 'evan' + authorUrl: 'https://twitter.com/youyuxi' + job: 'Creator of Vue.js' + jobIcon: 'vue' + jobUrl: 'https://vuejs.org' + - + testimonial: + 'Nuxt has outstanding developer productivity, experience, and performance right out of the gate!
There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications.' + author: 'Sarah Drasner' + authorIcon: 'sarah' + authorUrl: 'https://twitter.com/sarah_edo' + job: 'Core Team of Vue.js' + jobIcon: 'vue' + jobUrl: 'https://vuejs.org' + - + testimonial: + 'Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX.' + author: 'Addy Osmani' + authorIcon: 'addy' + authorUrl: 'https://twitter.com/addyosmani' + job: 'Chief Engineer of Chrome' + jobIcon: 'chrome' + jobUrl: 'https://www.google.com/chrome/' + - + testimonial: + 'Nuxt has been an incredible source of innovation and inspiration for developers and framework authors alike. It’s been amazing to see its growth in web projects of all sizes on the web.' + author: 'Guillermo Rauch' + authorIcon: 'guillermo' + authorUrl: 'https://twitter.com/rauchg' + job: 'Founder of Vercel' + jobIcon: 'vercel-light' + jobIconDark: 'vercel-dark' + jobUrl: 'https://vercel.com' + - + testimonial: + 'Nuxt has a unique approach of combining a great developer experience with reusable, fully integrated features that speed up the development and performance of your next website or application.' + author: 'Dominik Angerer' + authorIcon: 'dominik' + authorUrl: 'https://twitter.com/domangerer' + job: 'Founder of Storyblok' + jobIcon: 'storyblok' + jobUrl: 'https://www.storyblok.com' + - + testimonial: + 'Nuxt is our primary choice for offering a seamless website development experience to our users. Its simplicity and progressive learning curve makes it our ideal choice for SliceMachine.' + author: 'Sadek Drobi' + authorIcon: 'sadek' + authorUrl: 'https://twitter.com/Sadache' + job: 'Founder of Prismic' + jobIcon: 'prismic' + jobUrl: 'https://prismic.io' + - + testimonial: + "Every serious full stack development team needs to stop take a look at Nuxt. Vue's developer productivity combined with Nuxt's server side rendering, is the foundation for instant loading web sites that delight users and improve team velocity." + author: 'Ajay Kapur' + authorIcon: 'ajay' + authorUrl: 'https://www.linkedin.com/in/ajaykapur/' + job: 'Founder of Layer0' + jobIcon: 'layer0-light' + jobIconDark: 'layer0-dark' + jobUrl: 'https://www.layer0.co/' + - + testimonial: + 'Nuxt has an ideal balance of approachability for developers new to JAMstack, and power for experienced teams working on complex applications. The modules and first-class integration with the rest of the Vue ecosystem makes for a superb DX.' + author: 'Dave Loneragan' + authorIcon: 'dave' + authorUrl: 'https://twitter.com/paper_tokyo' + job: 'Co-founder of Swell' + jobIcon: 'swell' + jobUrl: 'https://swell.is' + - + testimonial: + 'The moment I used Nuxt for the first time I felt in love with it. Apart from its scalability, performance and developer experience, the team behind of it is also fantastic. Thanks for developing such a great framework and making our lives much easier!' + author: 'Savas Vedova' + authorIcon: 'savas' + authorUrl: 'https://www.linkedin.com/in/savas-vedova/' + job: 'Founder of Stormkit' + jobIcon: 'stormkit' + jobUrl: 'https://www.stormkit.io/' +--- diff --git a/content/fa/announcements/0.nuxt-static-improvements.md b/content/fa/announcements/0.nuxt-static-improvements.md new file mode 100644 index 0000000000..07a0417028 --- /dev/null +++ b/content/fa/announcements/0.nuxt-static-improvements.md @@ -0,0 +1,169 @@ +--- +template: post +title: Nuxt Static Improvements +description: With Nuxt version 2.13, the full-static mode has been introduced. In addition, a new command nuxt export was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... until now. +imgUrl: blog/nuxt-static-improvements/main.jpeg +imgCredits: Naresh Bojja +imgCreditsUrl: https://unsplash.com/@nareshbojja +date: 2020-07-27 +authors: + - name: Alexander Lichter + avatarUrl: https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg + link: https://twitter.com/TheAlexLichter + - name: Sébastien Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/atinux + - name: Pooya Parsa + avatarUrl: https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg + link: https://twitter.com/_pi0_ +tags: + - release + - full-static + - framework +category: Release +--- + +## Introduction + +With Nuxt version 2.13, the [full-static mode](/announcements/going-full-static) has been introduced. In addition, a new command `nuxt export` was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... **until now.** + +- [Introduction](#introduction) +- [Faster Static Deployments](#faster-static-deployments) +- [Generate time: cache vs full webpack build](#generate-time-cache-vs-full-webpack-build) +- [Using in your projects](#using-in-your-projects) + - [Excluding Files from Cache](#excluding-files-from-cache) + - [Module Authors](#module-authors) +- [How it works](#how-it-works) + - [Back to old school commands](#back-to-old-school-commands) +- [What to do next](#what-to-do-next) + +## Faster Static Deployments + +With v2.14, `nuxt generate` will **automagically skip webpack build step when no code has been changed** and use the previous build using cache. This will help to drastically improve static deployments time by avoiding unnecessary builds which is usually the most time-consuming part of generation process. Cache support is **platform-agnostic** and works on Netlify, Vercel, or any other CI/CD setup that is caching `node_modules`. + +::video-player +--- +sources: +- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.webm + type: video/webm +- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.mp4 + type: video/mp4 +- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.ogv + type: video/ogg +poster: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.jpg +--- +:: + +## Generate time: cache vs full webpack build + +See the comparison in seconds between two `nuxt generate`: + +- `Build` is when a webpack build is required +- `Cache` is only when the content has changed (webpack build skipped) + + + +::alert{type="next"} +The static site generation of our projects on content changes are now **~3.6x times** faster 🚀 +:: + +Project links: [Basic](https://github.com/pi0/nuxt-static-demo), [Strapi Module Docs](https://github.com/nuxt-community/strapi-module/tree/master/docs), [Content Module Docs](https://github.com/nuxt/content/tree/master/docs) and [Nuxt Docs](https://github.com/nuxt/nuxtjs.org). + +## Using in your projects + +1. Update `nuxt` to the latest minor version, which is v2.14. + +::code-group +```bash [Yarn] +yarn upgrade nuxt +``` +```bash [NPM] +npm update +``` +:: + +2. Ensure `target` is `static` inside your `nuxt.config` + +```js{}[nuxt.config.js] +export default { + target: 'static' + // ... +} +``` + +`nuxt generate` will behave as before to avoid breaking changes and provide legacy compatibility if you keep `target: ‘server’` or don't specify target. + +3. That’s it 🙌 + +Now, the `nuxt generate` command will build the project only if necessary, which is the case when files inside the project have been changed. It will always re-render your routes to static HTML files, like `nuxt export` is doing already. + +Now you only have to change your build command back from `nuxt build && nuxt export` to `nuxt generate` on the platform you are using. If you are using a CI, ensure that you are properly caching `node_modules`. + +### Excluding Files from Cache + +By default, nuxt ignores these directories so if any change happens inside them, build will not be triggered: + +- Build directory (`.nuxt/`) +- Static directory (`static/`) +- Generate dist (`dist/`) +- `node_modules` +- `README.md` +- Hidden dotfiles (like `.npmrc`) + +You can add more patterns using [generate.cache.ignore](/docs/configuration-glossary/configuration-generate#cache) option in `nuxt.config`: + +```js{}[nuxt.config.js] +export default { + generate: { + cache: { + ignore: [ + // When something changed in the docs folder, do not re-build via webpack + 'docs' + ] + } + } +} +``` + +It is also possible to use a function for `ignore` option to override default ignore entries. + +### Module Authors + +What if you are developing a nuxt module that is working with files that should not trigger a rebuild? The best example is for [@nuxt/content](https://content.nuxtjs.org) module that reads markdown files from the repository. In this case, these files are used within a runtime module, which is the case when using `@nuxt/content`, the module itself can tell nuxt to ignore these files for you already so you don't have to do anything! Module authors can use the new `generate:cache:ignore` hook to do so: + +```js +nuxt.hook('generate:cache:ignore', ignore => ignore.push('content')) +``` + +## How it works + +When using the new `nuxt generate` with `static` target, a snapshot including checksum of non-ignored project files as well as nuxt version and some other configuration will be written `.nuxt/build.json`. In addition, we also move the build directory to `node_modules/.cache/nuxt`. Because `node_modules` is cached by all major platforms (Netlify, Vercel, ...) and common CI/CD scripts, this solution works out of the box without additional configuration. + +When `nuxt generate` is called subsequently, it will again create a checksum based on your project files and then compare it to the existing one inside `node_modules/.cache/nuxt/build.json`. + +If they match, it means that nothing is changed that needs rebuild so we can directly start rendering pages. + +If a mismatch is detected, it means that a full rebuild would be necessary. You can also see what file caused rebuild by checking console logs. After the build, nuxt generate will save the new checksum inside `.nuxt/build.json`. You can check full implementation [here](https://github.com/nuxt/nuxt.js/pull/7712). + +### Back to old school commands + +With Nuxt v2.13, we introduced `nuxt export` and `nuxt serve` specially designed for the static target. With Nuxt v2.14, they are deprecated as `nuxt generate` and `nuxt start` is smart to detect the target and build when necessary. + +Server target: + +- `nuxt dev` = development server +- `nuxt build` = build your application for production +- `nuxt start` = start the production server (use it for Node.js hosting like Heroku, Digital Ocean, etc) + +Static target: + +- `nuxt dev` = development server +- `nuxt generate` = build if needed and statically export to `dist/` +- `nuxt start` = serve the `dist/` directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying + +## What to do next + +- Upgrade your project to [nuxt@2.14.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.14.0) +- Use `nuxt generate` instead of `nuxt export` +- Use `nuxt start` instead of `nuxt serve` +- Enjoy fast deployments 🤙 diff --git a/content/fa/announcements/1.going-full-static.md b/content/fa/announcements/1.going-full-static.md new file mode 100644 index 0000000000..d06dd4c381 --- /dev/null +++ b/content/fa/announcements/1.going-full-static.md @@ -0,0 +1,173 @@ +--- +template: post +title: 'Going Full Static' +description: 'Long awaited features for JAMstack fans has been shipped in v2.13: full static export, improved smart prefetching, integrated crawler, faster re-deploy, built-in web server and new target option for config ⚡️' +imgUrl: blog/going-full-static/main.jpeg +imgCredits: Vincent Ledvina +imgCreditsUrl: https://unsplash.com/@vincentledvina +date: 2020-06-18 +authors: + - name: Sebastien Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/Atinux +tags: + - Nuxt + - Static + - Crawler + - Live Preview +category: Release +--- + +## Too long to read + +1. Upgrade nuxt to `2.14.0` +2. Set `target: 'static'` in your `nuxt.config.js` +3. Run `nuxt generate` +4. That's it ✨ + +_Bonus: you can run `nuxt start` to run a local server serving your generated static application._ + +::video-player +--- +sources: +- src: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.webm + type: video/webm +- src: https://res.cloudinary.com/nuxt/video/upload/v1592503417/nuxt-full-static_rnnbvm.mp4 + type: video/mp4 +- src: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.ogv + type: video/ogg +poster: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.jpg +--- +:: + +

+ +Note: in this video we are using `nuxt export` which has been deprecated in favor of `nuxt generate`. + +

+ +## Table of Contents + +- [Too long to read](#too-long-to-read) +- [Table of Contents](#table-of-contents) +- [History](#history) +- [Current issues](#current-issues) +- [New config option: `target`](#new-config-option-target) +- [Smarter `nuxt generate`](#smarter-nuxt-generate) + - [Crazy fast static applications](#crazy-fast-static-applications) + - [Crawler integrated](#crawler-integrated) + - [Faster re-deploy](#faster-re-deploy) +- [Smarter `nuxt start`](#smarter-nuxt-start) +- [Preview mode](#preview-mode) +- [Commands](#commands) + - [What to do next](#what-to-do-next) + +## History + +Nuxt had the static generation feature with `nuxt generate` since [v0.3.2](https://github.com/nuxt/nuxt.js/releases/tag/v0.3.2) (November 2016), since then we have improved it in multiple ways but never achieved full static generation. Today I am excited to announce that full static export is now possible with Nuxt 2.13. + +## Current issues + +`nuxt generate` is mostly pre-rendering, when you navigate client-side, `asyncData` and `fetch` are called, _making a request to your API_. A lot of users asked to support a "full static" mode, meaning to not call these 2 hooks on navigation, since the next page has been already pre-rendered. + +Also, the developer experience is not optimal: + +- You have access to `req` or `res` on SSR but not when running `nuxt generate` +- `process.static` is `true` only when running `nuxt generate`, making it slow to develop Nuxt modules or plugins for static generation +- You have to specify all your [dynamic routes](/docs/features/file-system-routing#dynamic-routes) in `generate.routes`, making it harder since you don't have access to nuxt modules there. +- You cannot test the [SPA fallback](/docs/concepts/static-site-generation#spa-fallback) in development, the fallback is a client-only version of your Nuxt application that loads when hitting a 404 page +- `nuxt generate` runs `nuxt build` by default, making it slower to generate your website if only your content changed + +Note that it was possible to have full static support with [nuxt-payload-extractor](https://github.com/DreaMinder/nuxt-payload-extractor) module but it was more verbose to use and had limitations. + +## New config option: `target` + +To improve the user experience as well as telling Nuxt that you want to export your application to static hosting, we are introducing a `target` option in your `nuxt.config.js`: + +```js{}[nuxt.config.js] +export default { + target: 'static' // default is 'server' +} +``` + + + +Full static doesn't work with `ssr: 'false'` (which is the same as the deprecated `mode: 'spa'`) as this is used for client-side rendering only (Single Page Applications). + + + +Running `nuxt dev` with the static target will improve the developer experience: + +- Remove `req` & `res` from context +- Fallback to client-side rendering on 404, errors and redirects (see [SPA fallback](/docs/concepts/static-site-generation#spa-fallback)) +- `$route.query` will always be equal to `{}` on server-side rendering +- `process.static` is `true` + +We are also exposing `process.target` for modules author to add logic depending on the user target. + +## Smarter `nuxt generate` + +Now with `v2.14.0`, you can use `nuxt generate`, it will smartly know if it has to build or not. + +### Crazy fast static applications + +`nuxt generate` with `target: 'static'` will pre-render all your pages to HTML and save a payload file in order to mock `asyncData` and `fetch` on client-side navigation, this means **no** **more HTTP calls to your API on client-side navigation.** By extracting the page payload to a js file, **it also reduces the HTML size** served as well as preloading it (from the in the header) for optimal performance. + +We also improved the [smart prefetching](/announcements/introducing-smart-prefetching) when doing full static, it will also fetch the payloads, making navigation instant 👀 + +### Crawler integrated + +On top of that, it also has a crawler inside, detecting every relative link and generating it: + +If you want to exclude a bunch of routes, use the [generate.exclude](/docs/configuration-glossary/configuration-generate#exclude). You can keep using [generate.routes](/docs/configuration-glossary/configuration-generate#routes) to add extra routes that the crawler could not detect. + +To disable the crawler, set `generate.crawler: false` in your `nuxt.config.js` + +### Faster re-deploy + +By separating `nuxt build` and `nuxt export`, we are opening a new range of improvements: pre-render your pages only if you content has changed, this means: no webpack build → faster re-deployments. + +## Smarter `nuxt start` + +Once you statically generated your Nuxt app into `dist/`, use `nuxt start` to start a production HTTP server and serve your static app, supporting [SPA Fallback](/docs/concepts/static-site-generation#spa-fallback). + +This command is perfect to locally test your static application before pushing to your favorite static hosting provider. + +## Preview mode + +We do support live preview out of the box to keep calling your API: + +```js{}[plugins/preview.client.js] +export default async function ({ query, enablePreview }) { + if (query.preview) { + enablePreview() + } +} +``` + +It will automatically refresh the page data (calling `nuxtServerInit`, `asyncData` and `fetch`). + +When the preview mode is activated, `asyncData` and `fetch` original methods will be called. + +## Commands + +Depending of the `target`, you can run these commands. + +- `server` + - `nuxt dev`: Start the development server + - `nuxt build`: Bundle your Nuxt application for production + - `nuxt start`: Start the production server +- `static` + - `nuxt dev`: Start the development server (static aware) + - `nuxt generate`: Bundle your Nuxt application for production if needed (static aware) and export your application to static HTML in `dist/` directory + - `nuxt start`: Serve your production application from `dist/` + +### What to do next + +::alert{type="next"} +To learn more about how to move from @nuxtjs/dotenv to runtime config check out [this article](/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config). +:: + +::alert{type="next"} +[Subscribe to the newsletter](#subscribe-to-newsletter) to not miss the upcoming articles and resources. +:: diff --git a/content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md b/content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md new file mode 100644 index 0000000000..65afefda84 --- /dev/null +++ b/content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md @@ -0,0 +1,336 @@ +--- +template: post +title: 'Understanding how fetch works in Nuxt 2.12' +description: Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications. +imgUrl: blog/understanding-how-fetch-works-in-nuxt-2-12/main.jpeg +imgCredits: Rahul Bhosale +imgCreditsUrl: https://unsplash.com/@rahul_design +date: 2020-04-06 +authors: + - name: Krutie Patel + avatarUrl: https://pbs.twimg.com/profile_images/780651635932434432/YtbSkumD_400x400.jpg + link: https://twitter.com/KrutiePatel +tags: + - Nuxt + - Fetch + - Asynchronous Data Fetching + - API +category: Release +--- + +Nuxt introduces a new `fetch` with the latest release of version 2.12. Fetch provides a brand new way to bring data into Nuxt applications. + +In this post, we will explore different features of the fetch hook and try to understand how it works. + +## Fetch Hook and Nuxt Lifecycle + +In terms of Nuxt lifecycle hooks, `fetch` sits within Vue lifecycle after `created` hook. As we already know that, all Vue lifecycle hooks are called with their `this` context. The same applies to `fetch` hook as well. + +![New fetch in Nuxt lifecycle](/blog/understanding-how-fetch-works-in-nuxt-2-12/new-fetch-lifecycle-hooks.png) + +Fetch hook is called after the component instance is created on the server-side. That makes `this` context available inside the `fetch`. + +```js +export default { + fetch() { + console.log(this) + } +} +``` + +Let’s see what this could mean for page components. + +### Page Components + +With the help of `this` context, fetch is able to mutate component’s data directly. It means we can set the component’s local data without having to dispatch Vuex store action or committing mutation from the page component. + +As a result, Vuex becomes optional, but not impossible. We can still use `this.$store` as usual to access Vuex store if required. + +## Availability of fetch hook + +With `fetch`, we can prefetch the data asynchronously **in any Vue components**. It means, other than page components found in `/pages` directory, every other `.vue` components found in `/layouts` and `/components` directories can also benefit from the fetch hook. + +Let's see what this could mean for layout and building-block components. + +### Layout Components + +Using new `fetch`, now we can make API calls directly from the layout components. This was impossible prior to the release of v2.12. + +**Possible use cases** + +- Fetch config data from the back-end in Nuxt layouts to generate footer and navbar dynamically +- Fetch user related data (i.e. user profile, shopping-cart item count) in the navbar +- Fetch site relevant data on `layouts/error.vue` + +### Building-block (Child/Nested) Components + +With `fetch` hook available in child components as well, we can off-load some of the data-fetching tasks from page-level components, and delegate them over to nested components. This was also impossible prior to the release of v2.12. + +This reduces the responsibility of route-level components to a great extent. + +**Possible use case -** We can still pass props to child components, but if the child components need to have their own data-fetching logic, now they can! + +## Call order of multiple fetch hooks + +Since each component can have its own data-fetching logic, you may ask what would be the order in which each of them are called? + +Fetch hook is called on server-side once (on the first request to the Nuxt app) and then on client-side when navigating to further routes. But since we can define one fetch hook for each component, fetch hooks are called in sequence of their hierarchy. + +### Disabling fetch on server-side + +In addition, we can even disable fetch on the server-side if required. + +```js +export default { + fetchOnServer: false +} +``` + +And this way, the fetch hook will only be called on client-side. When `fetchOnServer` is set to false, `$fetchState.pending` becomes `true` when the component is rendered on server-side. + +## Error Handling + +New `fetch` handles error at component level. Let’s see how. + +Because we’re fetching data asynchronously, the new fetch() provides a `$fetchState` object to check whether the request has finished and progressed successfully. + +Below is what the `$fetchState` object looks like. + +``` +$fetchState = { + pending: true | false, + error: null | {}, + timestamp: Integer +}; +``` + +We have three keys, + +1. **Pending -** lets you display a placeholder when fetch is being called on client-side +2. **Error -** lets you show an error message +3. **Timestamp -** shows timestamp of the last fetch which is useful for caching with `keep-alive` + +These keys are then used directly in the template area of the component to show relevant placeholders during the process of fetching data from the API. + +```html + +``` + +When error occurs at **component-level**, we can set HTTP status code on server-side by checking `process.server` in fetch hook and follow it up with `throw new Error()` statement. + +```js +async fetch() { + const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`) + .then((res) => res.json()) + + if (post.id === this.$route.params.id) { + this.post = post + } else { + // set status code on server and + if (process.server) { + this.$nuxt.context.res.statusCode = 404 + } + // use throw new Error() + throw new Error('Post not found') + } +} +``` + +Setting the HTTP status code this way **is useful for correct SEO**. + +## Fetch as a method + +New fetch hook also acts as a method that can be invoked upon user interaction or invoked programmatically from the component methods. + +```html + + +``` + +```js +// from component methods in script section +export default { + methods: { + refresh() { + this.$fetch() + } + } +} +``` + +## Making Nuxt pages more performant + +We can use `:keep-alive-props` prop and `activated` hook to make Nuxt page components more performant using a new fetch hook. + +Nuxt allows **caching a certain number of pages** in the memory along with their fetched data. And also allows **adding a number of seconds** before we can re-fetch the data. + +For any of the above methods to work, we have to use the `keep-alive` prop in generic `` and ` components. + +```html{}[layouts/default.vue] + +``` + +In addition, we can pass `:keep-alive-props` to `` component to cache a number of pages along with their fetched data. + +`:keep-alive-props` prop allow us to indicate the maximum number of pages that should be kept in the memory while we navigate elsewhere within the site. + +```html{}[layouts/default.vue] + +``` + +Above is one way to boost page performance which is more high-level and generic, while the next one drills down to optimize the fetch request calls by using the `timestamp` property of `$fetchState` and comparing it against the number of seconds delay before it re-fetches the data. + +Vue’s `activated` hook is used here with Nuxt's `keep-alive` prop to re-fetch the data. + +```js +export default { + activated() { + // Call fetch again if last fetch more than a minute ago + if (this.$fetchState.timestamp <= Date.now() - 60000) { + this.$fetch() + } + } +} +``` + +## asyncData vs Fetch + +As far as page components are concerned, new `fetch` seems way too similar to `asyncData()` because they both deal with the local data. But there are some key differences worth taking note of as below. + +As of Nuxt 2.12, `asyncData` method is still an active feature. Let’s examine some of the key differences between `asyncData` and new `fetch`. + +### asyncData + +1. `asyncData` is limited to only page-level components +2. `this` context is unavailable +3. Adds payload by **returning** the data + +```js +export default { + async asyncData(context) { + const data = await context.$axios.$get( + `https://jsonplaceholder.typicode.com/todos` + ) + // `todos` does not have to be declared in data() + return { todos: data.Item } + // `todos` is merged with local data + } +} +``` + +### New Fetch + +1. `fetch` is available in all Vue components +2. `this` context is available +3. Simply **mutates** the local data + +```js +export default { + data() { + return { + todos: [] + } + }, + async fetch() { + const { data } = await axios.get( + `https://jsonplaceholder.typicode.com/todos` + ) + // `todos` has to be declared in data() + this.todos = data + } +} +``` + +## Fetch before Nuxt 2.12 + +If you have been working with Nuxt for a while, then you’ll know that the previous version of `fetch` was significantly different. + +> **Is this a breaking change?** + +> No, it isn't. Actually, the old fetch can still be used by passing the `context` as the first argument to avoid any breaking changes in your existing Nuxt applications. + +Here’s the list of notable changes in `fetch` hook compared with **before** and **after** v2.12. + +### 1. Call order of `fetch` hook + +**Before -** `fetch` hook was called before initiating the component, hence `this` wasn’t available inside the fetch hook. + +**After -** `fetch` is called after the component instance is created on the server-side when the route is accessed. + +### 2. `this` vs `context` + +**Before -** We had access to the Nuxt `context` on page-level components, given that the `context` is passed as a first parameter. + +```js +export default { + fetch(context) { + // … + } +} +``` + +**After -** We can access `this` context just like Vue client-side hooks without passing any parameters. + +```js +export default { + fetch() { + console.log(this) + } +} +``` + +### 3. Availability of `fetch` hook + +**Before -** Only page (route-level) components were allowed to fetch data on the server-side. + +**After -** Now, we can prefetch the data asynchronously in any Vue components. + +### 4. Call order of `fetch` hook + +**Before -** `fetch` could be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. + +**After -** New `fetch` is the same as an old fetch, but… + +…since we can have one `fetch` for each component, `fetch` hooks are called in sequence of their hierarchy. + +### 5. Error Handling + +**Before -** We used the `context.error` function that showed a custom error page when an error occurred during API calls. + +**After -** New `fetch` uses the `$fetchState` object to handle errors in the template area during API calls. + +Error handling is performed at component level. + +> **Does this mean we cannot show users a custom error page like we did prior to Nuxt 2.12?** + +Yes we can, but only with `asyncData()` when it's about page-level component data. When using `fetch`, we can utilize `this.$nuxt.error({ statusCode: 404, message: 'Data not found' })` to show a custom error page. + +## Conclusion + +New fetch hook brings a lot of improvements and provides more flexibility in fetching data and organizing route-level & building-block components in a whole new way! + +It will certainly make you think a little differently when you plan and design your new Nuxt project that requires multiple API calls within the same route. + +I hope this article has helped you get acquainted with the new `fetch` feature. I'd love to see what you build with it. + +## What's next + +::alert{type="next"} +Read [Sergey Bedritsky's article](/tutorials/build-dev-to-clone-with-nuxt-new-fetch) to see new `fetch` hook in action as he shows how to build a dev.to clone! +:: + +::alert{type="next"} +Already missed March newsletter? [Subscribe to Nuxt newsletter](#subscribe-to-newsletter) and get latest articles and resources delivered right into your inbox. +:: diff --git a/content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md b/content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md new file mode 100644 index 0000000000..84feef4094 --- /dev/null +++ b/content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md @@ -0,0 +1,55 @@ +--- +template: post +title: 'Nuxt: From Terminal to Browser' +description: How we changed the developer experience to stop switching between the terminal and browser. +imgUrl: blog/nuxtjs-from-terminal-to-browser/main.jpeg +imgCredits: Dave Ruck +imgCreditsUrl: https://unsplash.com/@daveruck +date: 2019-06-04 +authors: + - name: Sébastien Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/atinux +tags: + - webpack + - DX +category: Release +--- + +> Nuxt is a Vue.js framework to create different kind of web applications with the **same directory structure & conventions**: Universal, Single Page, PWA or Static Generated. + +_ℹ️ These features are all available with [v2.8.0 release](https://github.com/nuxt/nuxt.js/releases/tag/v2.8.0)._ + +## [](#problems)Problems + +1. Developing JavaScript applications with Webpack or any bundler requires to switch between your browser and terminal for debugging purpose. +2. Using `console.log` to debug when the app is server rendered requires to remember that logs will be displayed on the terminal when refreshing the page. + +## [](#solutions)Solutions + +1. Forwarding Webpack build state right in the browser and display them in a fancy manner. + +![foward-webpack-build-state](https://res.cloudinary.com/practicaldev/image/fetch/s--1u6wSHPt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58880743-ec7a3280-86d8-11e9-8856-8d9d22b89b70.gif) + +2. Same for Hot Module Replacement (really useful when the project gets bigger and takes more time to re-build). + +![nuxt-build-indicator-hmr](https://res.cloudinary.com/practicaldev/image/fetch/s--faVtF222--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58547105-129a6100-8207-11e9-9c61-a93956a17727.gif) + +3. Forwarding SSR logs to the browser in development mode + +![nuxt-ssr-logs-forwarding](https://res.cloudinary.com/practicaldev/image/fetch/s--bwQ8iEq2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58566291-a3396700-8230-11e9-9dd6-09c3ff8578d2.gif) + +## [](#nuxtjs-vision)Nuxt Vision + +The purpose to these changes is to use the terminal for commands only. + +Now you can focus right on your code and its visual result 🙂 + +> Be lazy, be smart, be Nuxt. + +Links: + +- Documentation: [https://nuxtjs.org](https://nuxtjs.org) +- GitHub: [https://github.com/nuxt/nuxt.js](https://github.com/nuxt/nuxt.js) +- Loading Screen source code: [https://github.com/nuxt/loading-screen](https://github.com/nuxt/loading-screen) +- Twitter: [https://twitter.com/nuxt_js](https://twitter.com/nuxt_js) diff --git a/content/fa/announcements/4.introducing-smart-prefetching.md b/content/fa/announcements/4.introducing-smart-prefetching.md new file mode 100644 index 0000000000..e2f2edf3b6 --- /dev/null +++ b/content/fa/announcements/4.introducing-smart-prefetching.md @@ -0,0 +1,31 @@ +--- +template: post +title: Introducing Smart Prefetching +description: 'Starting from Nuxt v2.4.0, Nuxt will automagically prefetch the code-splitted pages linked with a nuxt-link when visible in the viewport by default.' +imgUrl: blog/introducing-smart-prefetching/main.jpeg +imgCredits: Mateus Maia +imgCreditsUrl: https://unsplash.com/@mateusmaia +date: 2019-01-28 +authors: + - name: Sébastien Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/atinux +tags: + - framework + - feature + - performance +category: Release +--- + +## Introducing Smart prefetching ⚡️ + +Starting from [Nuxt v2.4.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.4.0), Nuxt will automagically prefetch the code-splitted pages linked with `` when visible in the viewport **by default**. This hugely improves the end user performances, inspired by [quicklink](https://github.com/GoogleChromeLabs/quicklink). + +![nuxt-prefetch-comparison](https://res.cloudinary.com/practicaldev/image/fetch/s--jP7Crsw7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/51692960-4158be80-1ffe-11e9-9299-61881d06412e.gif) + +Demos are online and we recommend you to try it out to feel the difference: + +- No prefetching (v2.3): [https://nuxt-no-prefetch.surge.sh](https://nuxt-no-prefetch.surge.sh) +- With prefetching (v2.4): [https://nuxt-prefetch.surge.sh](https://nuxt-prefetch.surge.sh) + +You can learn more about this feature in the [``](/docs/features/nuxt-components#the-nuxtlink-component) section of the documentation. diff --git a/content/fa/announcements/5.nuxt3-beta.md b/content/fa/announcements/5.nuxt3-beta.md new file mode 100644 index 0000000000..0f7b6efabd --- /dev/null +++ b/content/fa/announcements/5.nuxt3-beta.md @@ -0,0 +1,84 @@ +--- +template: post +title: Introducing Nuxt 3 Beta +description: "468 days after the first commit, the Nuxt 3 beta has finally arrived. Discover what's inside and what to expect from it. Yes, it includes Vue 3 and Vite ⚡️" +imgUrl: blog/nuxt3-beta/main.jpg +date: 2021-10-12 +authors: + - name: Sébastien Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/atinux + - name: Pooya Parsa + avatarUrl: https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg + link: https://twitter.com/_pi0_ + - name: Daniel Roe + avatarUrl: https://pbs.twimg.com/profile_images/1326211963614007302/UJyvtK2f_400x400.jpg + link: https://twitter.com/danielcroe + - name: Alexandre Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1255027239458091009/qMp_q8vy_400x400.jpg + link: https://twitter.com/IAmNuxt +tags: + - framework + - release + - beta +category: Release +--- + +We are excited to open source Nuxt 3 after more than a year of intense development. The repository is available on GitHub on [nuxt/framework](https://github.com/nuxt/framework) under the [MIT](https://github.com/nuxt/nuxt.js/blob/dev/LICENSE) license. + +::alert{type=success} +The documentation is available on https://v3.nuxtjs.org. +:: + +## A new foundation + +On top of supporting [Vue 3](https://v3.vuejs.org) or [Vite](https://vitejs.dev), Nuxt 3 contains a new [server engine](https://v3.nuxtjs.org/concepts/server-engine), unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern cloud hosting providers. + +In production, it builds your Vue application and server into one universal `.output` directory. This output is light: minified and without any other Node.js dependencies (except polyfills). You can deploy this output on any system supporting JavaScript, whether Node.js, Serverless, Workers, Edge-side rendering or purely static. + +**Bonus:** this server engine can be used on existing Nuxt 2 projects with [Nuxt Bridge](https://v3.nuxtjs.org/getting-started/bridge) 🚀 + +Head over the [Nuxt 3 homepage](https://v3.nuxtjs.org) to learn more about Nuxt Nitro and Nuxt Bridge. + +## Important notes + +Nuxt 3 is currently in beta, so expect things to break (and be fixed quickly). We have [plenty of work left](https://github.com/nuxt/framework/issues) but we want to open it publicly to gather feedback and contributions from the community 💚 + +**Do not use it for production until we reach the first release candidate.** + +During the beta, almost every commit will [trigger a new npm release](https://github.com/nuxt/framework/blob/main/.github/workflows/ci.yml#L111-L119); you may want to look at the [merged pull requests](https://github.com/nuxt/framework/pulls?q=is%3Apr+is%3Amerged) until we begin generating automated changelogs in the documentation. + +We are working every day to improve the documentation, explaining as much as possible all the concepts, features and usage of Nuxt 3. + +Check out the community section of the Nuxt 3 website for [getting help](https://v3.nuxtjs.org/community/getting-help), [reporting bugs](https://v3.nuxtjs.org/community/reporting-bugs) or [contributing to the framework](https://v3.nuxtjs.org/community/contribution). + +## Timeline + +Here some major milestones we've achieved on the way to Nuxt 3: + +::list +- **Jul 2, 2020**: Nuxt 3 first commit with full TypeScript rewrite +- **Aug 7, 2020**: Webpack 5 support +- **Sep 15, 2020**: [`pages/`](https://v3.nuxtjs.org/docs/directory-structure/pages) support +- **Oct 29, 2020**: [Vue 3](https://v3.vuejs.org) support with bundle-renderer +- **Nov 2, 2020**: [Nuxt Nitro](https://v3.nuxtjs.org/concepts/server-engine) initial work +- **Jan 22, 2021**: Initial [Vite](https://vitejs.dev) support +- **Feb 4, 2021**: Nuxt can deploy on [major serverless platforms](https://v3.nuxtjs.org/docs/deployment) +- **Mar 6, 2021**: [UnJS](https://github.com/unjs) organisation created on GitHub +- **Mar 28, 2021**: Init Nuxt Kit and Nuxt CLI ([nuxi](https://v3.nuxtjs.org/getting-started/commands)) +- **May 20, 2021**: [`app.vue`](https://v3.nuxtjs.org/docs/directory-structure/app) support (`pages/` becomes optional) +- **Jun 30, 2021**: [`layouts/`](https://v3.nuxtjs.org/docs/directory-structure/layouts) support +- **Jul 15, 2021**: Native ESM support +- **Aug 10, 2021**: Auto import of composables and components +- **Sep 5, 2021**: Init [Nuxt Bridge](https://v3.nuxtjs.org/getting-started/bridge) for improving Nuxt 2 experience +- **Sep 7, 2021**: Support Vite build for production +- **Oct 11, 2021**: Add [`useState`](https://v3.nuxtjs.org/docs/usage/state) and [`useFetch`](https://v3.nuxtjs.org/docs/usage/data-fetching#usefetch) composables +:: + +So far, we've merged [385 pull requests](https://github.com/nuxt/framework/pulls?q=is%3Apr+is%3Amerged), closed [229 issues](https://github.com/nuxt/framework/issues?q=is%3Aissue+is%3Aclosed) and made [925+ commits](https://github.com/nuxt/framework/commits/main). + +We are excited to hear your thoughts and we thank you for your patience. + +Now you can go over the [Nuxt 3 documentation](https://v3.nuxtjs.org) 😊 + +Don't forget to follow us on [Twitter](https://twitter.com/nuxt_js) to get the latest news about Nuxt! diff --git a/content/fa/announcements/index.md b/content/fa/announcements/index.md new file mode 100644 index 0000000000..2457826bb3 --- /dev/null +++ b/content/fa/announcements/index.md @@ -0,0 +1,9 @@ +--- +template: blog +title: Announcements +description: Discover articles from Nuxt team. +blogPostList: true +sortBy: + field: 'date' + direction: 'desc' +--- diff --git a/content/fa/case-studies/0.github.md b/content/fa/case-studies/0.github.md new file mode 100644 index 0000000000..c07e2ebc71 --- /dev/null +++ b/content/fa/case-studies/0.github.md @@ -0,0 +1,55 @@ +--- +template: post +title: GitHub Stars +description: "GitHub Stars recognises those folks who are going above and beyond in helping others in the developer world. These exceptional folks are not only maintaining projects but they are going out there to educate. They are inspiring people and influencing people, both online and offline in everyday things that they do. It's for this purpose that GitHub created the GitHub Stars program." +imgUrl: img/case-studies/github/cover.png +headingImg: + hidden: true +--- +![Github Stars homepage](img/case-studies/github/main.png){width=736 height=370} + +## What is GitHub? + +GitHub is the home for millions of developers. We have over 65 million developers and essentially it's a place where developers can go and create, share and make their best code possible. We try and make it easy for developers to meet developers, work together, solve challenging problems and create the world's most important technologies. Our community is made up from a diverse set of people from students to hobbyists, enterprise professionals, partners and executives, and the list goes on. GitHub is not just code, it is much more than code, it's the home of open source collaboration. It's where new developers can come and get started. It's where experienced developers can expand their knowledge with developers solving the unsolvable and testing the limits of what software can do. + +## Is GitHub open sourced? + +It is an idea that is worth considering and there are parts of GitHub across infrastructure tooling that are already open source. At github.com/github you will be able to see all of the open source projects that we have there. Two notable examples are: + + The [GitHub load balancer](https://github.blog/2018-08-08-glb-director-open-source-load-balancer/) which we open sourced back in 2018. It is our scalable load balancer solution for the bare metal data centres and it powers the majority of GitHub's web and git traffic as well as it is fronting some of the principal intel systems. + + [GitHub Docs](https://github.blog/2020-10-14-how-we-open-sourced-docs-github-com/) which we open sourced in mid October 2020. With this effort, we're able to source new ideas from a broader and diverse set of individuals, especially from those who are experts in the community and GitHub. + +## What is GitHub Stars? + +[GitHub Stars](http://stars.github.com/) recognises those folks who are going above and beyond in helping others in the developer world. These exceptional folks are not only maintaining projects but they are going out there to educate. They are inspiring people and influencing people, both online and offline in everyday things that they do. It's for this purpose that we created the [GitHub Stars program](http://stars.github.com/). + +It's our way to say thank you to these amazing people. It gives Stars a platform to showcase their work, enable them to reach more people and help everyone benefit from the vast amount of knowledge, excitement and expertise that they have. A lot of these folks are doing what they are doing because they love it and it's all without an expectation of a reward. So they do things like podcasts, videos, blogs, meetups etc, to share their stories and best practices, their work and their learnings around GitHub. + +We [officially launched the program in September 2020](https://github.blog/2020-09-03-introducing-the-github-stars-program/), and have already seen more than 12k nominations. It has been very exciting to see the sheer amount of nominations, which is a good problem to have, but it is a lot of nominations that we need to go through and review with strict criteria. We want to make sure we are rewarding these folks by giving them a platform so they can continue doing what they are doing and go out to help others. It has been a fantastic journey, difficult but very exciting, and we could not have done it without the help from Josep Jaume Rey and his team at [Codegram](https://www.codegram.com/). It has been great to put the website together and everything that has gone around that has really put the cherry on the top of the cake. + +## How is the GitHub Stars website built? + +At the very beginning we were planning on having a fully static website. The idea was to replicate what we did on the GitHub Hackaton website. The way people contributed to it was to send a pull request and when the pull request got merged the website would get re-generated. This was the initial idea to have it full static and rely on the GitHub repository but we figured that there were some interactions that were not that straight forward to do, such as nominating. This could be potentially a little bit risky to do it on the GitHub repo because we didn't know how many nominations there would be and it turns out it was a good call. Instead, we created a full static website with some refinements around the nomination part. For nominations, this hits an API which then talks to a GraphQL API that is built on top of an Apollo server and Prisma, which all synchronises with Airtable as an admin interface. + +## Why did you choose Nuxt as your frontend framework? + +Nuxt was the perfect candidate because of the fact that it can play well as a full static website but you can progressively change it to a fully dynamic website. We thought that maybe in the future, we might not be happy about having a bit of a delay due to having to regenerate the site when changes are made in the admin dashboard. We already loved Vue and Nuxt but this feature in particular was very helpful. We had the assurance that at any particular moment we could change the approach. + +## Are you using dynamic or static rendering? Why? + +GitHub Stars is a statically generated website hosted on GitHub Pages and it gets redeployed and regenerated every 15 minutes. The nominations are sent to a Postgres database which gets stored there until the next redeploy. We don't need it in real-time as the nominations are not shown anywhere on the public website, so everything goes to the nominations database that gets synchronised to Airtable. From there, the GitHub team decides who gets awarded as a GitHub Star, which is then published on the website. + +![Github Stars page](img/case-studies/github/1.png){width=736 height=382} + +## What is your favorite feature? + +The full static mode and the way URLs are automatically crawled so you don't have to manually list them anymore. It was a really cool idea to solve that particular problem and things are faster now because of the pre-loading. We were able to remove a lot of code we had for generating URLs. We love that feature. + +Another great feature is the folder structure because for non-developers it makes it easier as they know exactly where to go and understand where to find things. I think the folder structure is genius. + +And the fact that Nuxt is open source - and at GitHub we <3 open source, is definitely one of the things we love about Nuxt. As one of our top 100 open source projects, we work closely with Nuxt and take feedback to understand how we can improve GitHub. + +## Would you recommend Nuxt? + +Yes! We pride ourselves on providing a first-class developer experience. We’re developers too, and we love how the framework is simple, yet powerful. diff --git a/content/fa/case-studies/1.livementor.md b/content/fa/case-studies/1.livementor.md new file mode 100644 index 0000000000..636e7b7368 --- /dev/null +++ b/content/fa/case-studies/1.livementor.md @@ -0,0 +1,56 @@ +--- +template: post +title: LiveMentor +description: LiveMentor is one of the world's leading education companies focused on entrepreneurship. They decided to migrate their existing front-end to Nuxt. We met with Romain and Alexandre to talk about their journey. +imgUrl: img/case-studies/livementor/cover.png +headingImg: + hidden: true +--- + +![Livementor dashboard](img/case-studies/livementor/mockup-m1-3.png){width=736 height=404} + +## What is LiveMentor? + +LiveMentor is one of the world's leading education companies focused on entrepreneurship. We help creators to go from the idea stage to being able to make a living from their projects. So basically being profitable. We have been doing online courses for almost 10 years now, and trying a lot of different ways to teach online. We have tried what we called CBC (cool-off based courses), soft courses, courses with only content and eventually we decided four years ago to focus on one-on-one mentoring. Our three months' training is powered by a messaging app where you can chat with your mentor. We have trained more than 10,000 people so far and we are now on track to train 10,000 people per year. + +Our platform combines technology with storytelling, teachers and community integration. We teach the topics that are most important for someone who's starting a business: sales, marketing, hiring, financing, business planning, and all the basics that you need when you are creating a company. + +We focus on helping you start a business, quit your day job and make a living from your own business. We have students in 30 countries, but all our lessons are in French, so many of them are French people living abroad. We have 100 people working at LiveMentor. + +## How did you discover Nuxt? + +We started LiveMentor as a monolithic app on a Rails stack, which allowed us to iterate quickly during the first few years. Two years ago, we decided to solidify our codebase, and chose VueJS for a rich client-side experience. + +To make the transition progressively, we began by building micro Vue apps functioning at the page level, with a wrapper rendered by Rails. But loading times kept going up, and we knew we had to go a step further. + +We found Nuxt at this time, via [Twitter](https://twitter.com/nuxt_js), and made a Proof of Concept project that went very well. Since then, we have been moving all our pages to Nuxt progressively. + +## So you're making a progressive transition? + +Yes, and we're now close to the end. We really wanted to reduce that transition phase, so we extracted features "as-is" to Nuxt. **It's important to say that Nuxt made it really easy to make this progressive transition, it all fits together very simply.** + +Regarding deployments, Nuxt also helps a lot by abstracting the Node parts. We're using Heroku, and with a well configured Docker, it was seamless. + +## Are you using dynamic or static rendering? Why? + +We use dynamic rendering because our pages are not static and we have a lot of content updated constantly, so we use SSR to do this because it's not really a static site. + +We are focused like crazy on reactivity because all our pedagogical experience, all the learning experience is based on the messaging app between the mentor and the students. We had trouble with our previous messaging system, latency and messages not showing up. + +The Firebase plus Nuxt combo made it much better. + +## What is your favorite feature? + +The first feature that made us choose Nuxt was the project's architecture. Be it file-based routing or folder separation, it all fits in an intuitive way. Just dropping a file in your [pages/](/docs/directory-structure/pages) folder without having to configure a router is a must. + +At the moment, we use Vuex a lot, but we're thinking about moving a little bit away from it by leveraging the Composition API. + +## Do you have performance benchmarks before & after using Nuxt? + +On the migrated pages, **we managed to cut our loading time in half**. When we launched the new messaging, one of the first comments we had from our users was "Wow this is really fast!" + +We also noticed that the team velocity increased, as we can now have people who only focus on the front-end, and others on the API. There's a big bonus in development time. But we still work with cross-functional teams, where we're allowed to do Pull Requests in all repositories! So the teams are not siloed by technologies, but more focused. + +## Would you recommend Nuxt? + +Yes, of course. We have no doubts about the framework's future, it's well maintained by a [solid team](/teams). The community is reactive to our messages and we believe Nuxt will keep growing in the coming years. diff --git a/content/fa/case-studies/2.stores.md b/content/fa/case-studies/2.stores.md new file mode 100644 index 0000000000..7fc1e6a4c8 --- /dev/null +++ b/content/fa/case-studies/2.stores.md @@ -0,0 +1,46 @@ +--- +template: post +title: Stores.jp +description: "stores.jp is an e-commerce platform which allows users to create their own e-commerce website. It focuses on users who don't have their own e-commerce site yet. That's why most of the features are designed so users can change the style and functionality easily without having any technical background knowledge." +imgUrl: img/case-studies/stores/cover.png +headingImg: + hidden: true +--- + +![Stores.jp homepage](img/case-studies/stores/main.png){width=736 height=382} + +## What is Stores.jp? + +[stores.jp](http://stores.jp) is an e-commerce platform which allows users to create their own e-commerce website. It focuses on users who don't have their own e-commerce site yet. That's why most of the features are designed so users can change the style and functionality easily without having any technical background knowledge. + +In the store dashboard the shop owner can change the style, layout or add a banner etc by easily dragging and dropping. Stores.jp has the same features as the well known platform Shopify but it is specially designed for beginners. Most of the features can be enabled or disabled by simply clicking. + +## How did you discover Nuxt? + +We considered what is the best stack for us by researching articles and meetup sessions which are written and spoken in Japanese and that is how we found Nuxt. We considered all other choices like React, Angular JS, Angular 2 and Vue.js. For us it is very important to have the documentation in Japanese language as English is difficult especially for beginners. + +## Why did you choose Nuxt as your frontend framework? + +When we started we were just one frontend developer and one designer and sometimes the designer needed to edit HTML so in that case Vue.js single file components are the best. Contrary to React, Nuxt is easy to understand even for designers. At the time Nuxt was the only framework based on Vue.js. + +The old version of [stores.jp](http://stores.jp) was made in Angular JS. As our site grew bigger, our team of developers grew too. We needed to unify our codebase. When we want to add the logic we don't want to discuss if it should be an angular service or a factory so that is why we thought we need a framework instead of a library and that is why we chose Nuxt instead of just using Vue.js. + +## Are you using dynamic or static rendering? Why? + +The frontend of the store and then a dashboard with server rendered pages. The storefront is still in Angular JS but we want to migrate to Nuxt in the future. The dashboard was also made with Angular JS but we are currently working on replacing it with Nuxt. At the moment 20% of it is working on Nuxt using client side rending. Server side rendering, dynamic rendering is good for performance. Nuxt has a great option to switch between client side and server side rendering. The Angular JS dashboard was originally setup to work as an SPA so we can't change the architecture of this and we want to focus only on replacing the library which is why currently the dashboard is working with client side rendering. + +Then we have the main website which is built with Nuxt using SSR and target static. We choose static site generation because SEO is very important for those kind of pages and they don't have any dynamic content. + +## What is your favorite feature? + +We have 3 favorite features. The first is the plugins. This is our favorite feature. The mechanism which injects this into the context, it totally makes sense for Vue.js and is easy to use which is why we like the plugin architecture. The next is page components, generating page routing based on page component directory structure as it is so easy to understand. The last one is the mode, compared to other frameworks I think that Nuxt is an all in one framework. In React we needed to choose a framework based on the architecture, which means if we want to use an SPA we needed to use create-react-app and if we want server side rendering Next.js is better and if we want to use Static Site Generation then Next.js or Gatsby is better. On the other hand if you use Vue.js all you have to do is choose Nuxt as you can switch the architecture later. This is why the mode is my favourite option. + +![Stores.jp showcase](img/case-studies/stores/1.png){width=736 height=267} + +## Do you have performances benchmarks before & after using Nuxt? + +We haven't had any performance benchmarks yet because of our priority. It has been 8 years since we created [stores.jp](http://stores.jp) and now we are working hard at upgrading it to Nuxt so we don't have any time to look at performance margins. But we are interested in performance so sometimes if our service is slow we will check the lighthouse and try to modify our code. But currently we don't look at any metrics for performance. + +## Would you recommend Nuxt? + +Yes of course we would especially for a startup companies. As I mentioned earlier the fact you can change the strategy later to have client side rendering or server side rendering or static site generation based on the business requirements. That is why Nuxt is good for startups. And also for Japanese companies the fact that the Nuxt documentation is in Japanese is a big advantage. If there is no Japanese documentation it would be an obstacle for them to get started which is the case of Next.js diff --git a/content/fa/case-studies/3.parent-scheme.md b/content/fa/case-studies/3.parent-scheme.md new file mode 100644 index 0000000000..2d3a81457d --- /dev/null +++ b/content/fa/case-studies/3.parent-scheme.md @@ -0,0 +1,60 @@ +--- +template: post +title: Parent Scheme +description: "Parent Scheme is a UK-based start-up that works globally with organisations to help them support working parents. It offers livestreams, resources, articles, videos and coaching through an interactive platform." +imgUrl: img/case-studies/parent-scheme/cover.png +headingImg: + hidden: true +--- + +![Parent Scheme homepage](img/case-studies/parent-scheme/main.png){width=736 height=318} + +## What is Parent Scheme? + +Parent Scheme is a UK-based start-up that works globally with organisations to help them support working parents. It offers livestreams, resources, articles, videos and coaching through an interactive platform. Parent Scheme is wholly inclusive and makes no assumptions about the gender, age, ethnicity and family circumstances of their users to allow them to find the right approach and solutions for their context. This is reflected in the graphic-based design. Parent Scheme also completely preserves users' privacy enabling them to customise the platform, favourite articles and save notes and coaching answers without having to worry their employer may see. All content on the platform is current and based on expert advice, covering topical challenges for every stage of the working parent lifecycle, from pregnancy and parental leave, through childcare options and the school years, to teens and young people starting university. There are sections for managers and HR as well. + +2020 has been a challenging year for everyone, but it created unique challenges for working parents with schools and childcare settings closing, leaving them having to juggle remote working and helping their kids with homeschooling. As a company, Parent Scheme had to respond quickly to provide users with relevant support in constantly changing circumstances. We had to update and adapt content on an ongoing basis as the pandemic progressed. We were able to work together with experts in healthcare, psychology, education and HR to create a livestream programme addressing some of the most pressing questions for working parents and those that manage them. + +Our team has worked incredibly hard this year. And even though we've had to close our offices and move entirely to remote working, we've really thrived as a company. One of the things we're proud of is that within three days of the first UK lockdown being announced, we were able to release a completely new, fully branded, free site with huge amounts of functionality and topical articles to answer some of the most immediate questions for working parents. Within the first 24 hours the site received 15.000 visitors - just through organic sharing - and was then recommended by UK government departments. + +## How did you discover Nuxt? + +My initial involvement with Parent Scheme was running the creative agency asked to build the MVP (minimum viable product). We were asked to build it in WordPress but we refused. We believed in the project and said this is something that is going to be big and you don't want an MVP in Wordpress. We asked, 'how are you going to manage changing this as it becomes big? You are not going to be able to scale that.' + +The client had no idea what Nuxt was so we described it to them as the kind of web technologies that companies like Google and Facebook use to build interactive apps, because talking to them about JavaScript frameworks would have been a step too far. + +So we managed to persuade them to choose Nuxt from the beginning and we have never looked back. We then went on to acquire them and have now shut down our design agency. + +With Nuxt we were able to build a mobile app just by using the same codebase because it was a progressive web app and we were able to seamlessly turn that into something that could be installed on the Google play store. That would never have been possible if we had built this on something like Wordpress. It is really good to have something solid as a foundation for the tech stack. + +For our content we initially used a markdown based CMS, Netlify CMS, which we self hosted and stored all content in a git repository. That was great, it was simple and easy to use and we ended up building a Jest test suite just for the content. We needed to ensure things like links weren't broken, external links were valid and adherence to our style guide especially for certain phrases that weren't our style. + +That worked really well for us but recently we transitioned to using Sanity as our headless CMS, which has been fantastic. Sanity allows us to put our validation in at the editing level so that when someone is actually editing a file it will tell them right as they are typing something. If it doesn't meet our style guide it tells the user and advises them what to use instead, which is something our editors love. + +## Are you using dynamic or static rendering? Why? + +We have a number of different sites all running in Nuxt, our public client facing website, an account dashboard micro site that lets people manage their billing which is integrated with stripe, a type form clone which allows people answer surveys and our actual app. Our main enterprise app is server rendered and runs a Vercel serverless function which works really well for us. For us the dynamic side of things is really important because authentication is important and all of our content is gated so we can't pre-render that content and if were to pre-render it on the users browser it could potentially take longer to render with lots of API calls having to be made at that point. + +Having a server rendered framework is a huge plus for user experience, which is a massive deal for us and therefore time to interaction and being able to serve fully rendered HTML to the browser so that from the first moment there is something visually interesting on the screen is really important for us. If we were doing entirely client side rendering we would lose seconds of users ability to see the information requested on first load. + +We use server side rendering for our main app, although there are very interesting developments happening with regards to Nuxt and serverless, so we may actually end up slightly changing how we do that. For all our other sites we use static. We use the Nuxt Fetch hook, which is phenomenal, and allows us to do really useful thinks like for example, getting our payment plan details from Stripe at generate time without then embedding that private key in our build files. + +## What is your favorite feature? + +The Nuxt modules. The ability to hook into how Nuxt works and make pretty profound changes and add new features. A lot of modules are from the Nuxt team and community and being able to add significant features by just adding a line in your config and installing a module is just incredible. If we want to hook in and change the behaviour of our own app in a testable way, we can build our own module which can then be used across multiple sites. + +The full static mode and having fetched payloads is incredible as well. + +## Do you have performances benchmarks? + +We have a fairly big app and have lovely green performance scores, about 95% in performance. We also have a progressive web app as we use the PWA module which is really good for performance and we care a lot about that. + +## Would you recommend Nuxt? + +Absolutely I would. Nuxt works out of the box but you can customize and change anything you need to, which means that there is no down side because you get the ease of use but you are never in a position where you can't tinker under the hood with any setting that you need. I would recommend Nuxt to everyone. + +We have talked to some really high up people at really big companies who have basically said the things that we are able to do with the Nuxt website are phenomenal. Nuxt means that we, as a small start up company, are able to pitch way above our weight in terms of offering something that is solid and a core part of our company. + +We had to pivot quite quickly. Our product has been through so many different features that we have released or rolled back and turned in a different direction and the codebase is still clean, which is incredible, and it is because of how it is built, as a Nuxt project which has enabled us to do things really quickly + +We have absolutely loved using Nuxt, I remember in the early days taking one of my developers who had only ever used Wordpress at that point and basically he had already started the work on building a Wordpress version and I told him were were going to be using Nuxt for this. His agony at the time, he said "I have never used it, I don't have any idea how to get into this new thing that I have never used before." But it took him very little time to pick it up and figure out how things worked and he has never looked back or touched a single line of code in a Wordpress site at any point after that. Something like Nuxt, the framework, the support it offers, it's really hard to go back once you have used it. diff --git a/content/fa/case-studies/4.line.md b/content/fa/case-studies/4.line.md new file mode 100644 index 0000000000..1da2061af8 --- /dev/null +++ b/content/fa/case-studies/4.line.md @@ -0,0 +1,56 @@ +--- +template: post +title: Line +description: "LINE is a worldwide messaging platform with its main focus being in Asia and especially in Japan, where there are more than 86 million monthly active users, which is equivalent to about 70% of the Japanese population." +imgUrl: img/case-studies/line/cover.png +headingImg: + hidden: true +--- + +![Line homepage](/img/case-studies/line/main.png){width=736 height=400} + +## What is Line ? + +LINE is a worldwide messaging platform with its main focus being in Asia and especially in Japan, where there are more than 86 million monthly active users, which is equivalent to about 70% of the Japanese population. + +LINE provides many different services including messaging, news, financial services and more. It makes extensive use of front-end technology in mini-apps which exist within the main app. More than 100 front-end engineers have developed more than 50 applications built with React, Vue, Nuxt, and other frameworks. + +Line uses Nuxt in HR applications such as its careers app, media applications such as apps for blogs and podcasts as well as in house applications. + +## How did you discover Nuxt? + +Before I joined LINE, I encountered Nuxt when I was simultaneously involved in many different job applications. + +Nuxt has all the elements necessary so that you don't have a chaotic Vue.js application architecture, and we continue to be impressed by it. + +We have been using Nuxt ever since, and LINE as a whole has been using Nuxt in various cases such as in its careers app, media applications such as apps for blogs and podcasts as well as in house applications. + +## Why did you choose Nuxt as your frontend framework? + +Nuxt provides the foundation for cleaner and amazing application architectures like never seen before ever. Nuxt’s convention not only makes engineers more productive, but also prevents noisy bikeshed discussions. We use Nuxt to deliver valuable products to our customers rapidly. + +![Line Healthcare](img/case-studies/line/1.png) + +## Are you using dynamic or static rendering? Why? + +We use both. When our products require realtime generation of HTML meta attribute (e.g. SEO, OGP), we use dynamic rendering using SSR. If not, we use static rendering using Single Page Application mode. + +In addition, for internal documents, we use the nuxt/content module with static site generation. Using this we have been able to create efficient documentation for our developers which has been much more readable than just writing markdown in Github. + +## What is your favorite feature? + +I really like how Nuxt gives you Convention over Configuration which makes it very efficient, but among the inherent features, I like the plugin system and the versatile build options. + +In Vue 2.x application development, managing global objects independent of the Vuex Store was always a headache for us. The Provide/Inject feature solved a lot of problems because of its easy-to-use and type friendly API. + +Nuxt is also packed with successfully managed plugins and modules, and the features that they have are indispensable for us. + +On the other hand, the versatile build options are also a great attraction. With Nuxt, we can ensure that we are writing universal JavaScript naturally, and we can smoothly switch from Single Page Applications to dynamic rendering or full static generation as needed. + +## Do you have performances benchmarks before & after using Nuxt? + +Sorry, we’re mainly using Nuxt for new development, so we can’t make a direct comparison with Vue.js. However, we are sure that Nuxt is bringing great value to us. + +## Would you recommend Nuxt? + +Of course. Nuxt is the option for all Vue.js application developers. If you’re reading this interview and you haven’t used Nuxt yet, you should try it now. It will surely help you solve many of the challenges you are having and help your product bring value to the market faster. diff --git a/content/fa/case-studies/5.404-place-vendome.md b/content/fa/case-studies/5.404-place-vendome.md new file mode 100644 index 0000000000..d38141a1ca --- /dev/null +++ b/content/fa/case-studies/5.404-place-vendome.md @@ -0,0 +1,44 @@ +--- +template: post +title: "404 Place Vendôme" +description: "404 Place Vendôme is a jewellery company which was created in 2016 by two people. One of the founders father was a founder of gold and metals." +imgUrl: img/case-studies/404-place-vendome/cover.png +headingImg: + hidden: true +--- + +![404 Place Vendôme homepage](img/case-studies/404-place-vendome/main.png){width=736 height=388} + +## What is 404 Place Vendôme ? + +404 Place Vendôme is a jewellery company which was created in 2016 by two people. One of the founders father was a founder of gold and metals. I joined the team, a few months after at the beginning of 2016. They asked for me to make, a configurator of products for the jewellery design. And then I made the website using 3JS and 3D and vanilla JS. At the time I didn't knew about, react or Vue. I showed them the concept I made with my godfather, and they were really impressed. + +## How did you discover Nuxt? + +I discovered Nuxt in 2018 after a year and a half of JavaScript fatigue. It took a long time to discover Nuxt through reading a lot of [medium articles](https://medium.com/vue-mastery/10-reasons-to-use-nuxt-js-for-your-next-web-application-522397c9366b) and then one of our developers who had just joined us told me Nuxt is great and was really enthusiastic about Nuxt. Then I discovered Next.js and [Guillermo Rauchs article](https://rauchg.com/2014/7-principles-of-rich-web-applications) from 2014 about what the web should be. It's a very old article about React and Next but it was really interesting and some of the principles in this article were not being applied to our website. I think there are a lot of things to learn from reading this. + +## Why did you choose Nuxt as your frontend framework? + +We first made the websites with React. We decided to make the back-office of the application first. Then we decided to switch to Vue, just to try for one day if the front of this website needs to be in Vue. And in one day we were so in love with Vue that I said, okay, let's make the front face with Vue, which is nonsense for a CTO because you have a front end with Vue and a backend app in React. Usually you use same technology for the back and the front office. We took a bet on the future to use Vue and it was so comfortable as a technology. Vue is really nice to learn, really easy. + +So we started to make the font face using Vue, and I separated all the JS and CSS and HTML in separate files. We released a first version of the website In 2017. Then we asked ourselves about how we could make the website faster especially on the homepage. The problem with the homepage was that it's a SPA and it was really huge. When it loads, it loads on the browser so it was really slow. It was really difficult. So we tried to look at code splitting. We searched a lot. By the time of 2018 . I think the first reason was the SEO and also because of the nature of the 3D configurator, which is a one MB package, we could not make the websites as an SPA if we wanted to have good performance. + +We were very happy to use Nuxt because there is a layer of learning and maintaining which is really time demanding that you don't have to deal with. For me Nuxt really is a great technology. + +## Are you using dynamic or static rendering? Why? + +We decided to use static rendering because a page, with a lot of content, it's way better to have static rendering. Also you can just deploy to Amazon for free for your whole site. + +![404 Place Vendôme internal page](img/case-studies/404-place-vendome/1.png){width=736 height=339} + +## What is your favorite feature? + +Being performant by default is one of the best features. If you use threeJS or big libraries, you will need to code split so it will be way faster. Code splitting by default is a great feature, but there is also the progressive nature of the Nuxt framework. If you want to use a SCSS then in less than a minute, you install Sass as a package. And if you don't install it Nuxt will tell me there's a missing package. You don't have to think about technical problems, you think about creation. Nuxt is really easy to use. + +## Do you have performances benchmarks before & after using Nuxt? + +We used to have a really bad page speed. At the time it was 10 and with Nuxt it was 70. + +## Would you recommend Nuxt? + +Yes, definitively. I think Nuxt is really simple to use and I have recommend Nuxt to other friends and they all said, It's really easy and they were very happy to use it. I will be using it myself on future projects. I have worked on web technologies for a long time and I remember when I discovered Vue.js, I felt comfortable making websites for the first time and I was so happy to use the technology. diff --git a/content/fa/case-studies/6.komercia.md b/content/fa/case-studies/6.komercia.md new file mode 100644 index 0000000000..2696994ff5 --- /dev/null +++ b/content/fa/case-studies/6.komercia.md @@ -0,0 +1,46 @@ +--- +template: post +title: Komercia +description: "Komercia is a platform from Columbia. They create online shops so people with no developer skills or who don't have a team of developers can easily create and add products to their shops." +imgUrl: img/case-studies/komercia/cover.png +headingImg: + hidden: true +--- + +![Komercia homepage](img/case-studies/komercia/main.png){width=736 height=407} + +## What is Komercia ? + +Komercia is a platform from Columbia and we wanted to be known as the Shopify for Latin America. We create online shops so people with no developer skills or who don't have a team of developers can easily create and add products to their shops. Our focus is on small and medium sized companies which many don't have the knowledge or tools to go online. So we built a platform that now has now created 6,000 online shops which are all built with Nuxt. + +80% of our users are in Columbia and we also have a lot of users in Chile and Mexico as well as a small percentage of users in other countries. We have users who have set up shops from their garages and are now able to have an online shop with a delivery service which comes to their door to collect these products that are then delivered to their clients. + +At Komercia we are a small team with only 5 people all working remotely. + +## How did you discover Nuxt? + +We first started off using Vue as a Single Page Application and we loved it. But we needed to go a step further and have server side rendering and quicker page loads as well as search engine optimization. We had to find another alternative and as we were already using Vue the easiest way to get all this was to implement Nuxt. + +I heard about Nuxt at the end of 2019 but we didn't start using it until the March/April of 2020, the start of the Pandemia, when we started to get so many new users that we had to accelerate the migration of sites from Vue to Nuxt without the user even noticing. The only thing our users noticed was that the pages were loading faster, which is of course a good thing. + +## Why did you choose Nuxt as your frontend framework? + +We chose Nuxt for various reasons. The main one being performance and we saw a huge change when we migrated the stores to Nuxt. + +The other important factor is Search Engine Optimization especially for those clients who want their shops to be well positioned in search engines. + +Nuxt uses Vue under the hood which we love because the learning curve is lower meaning it is really quick to learn. As our team already knew Vue it was very easy for them to move to Nuxt. + +## What is your favorite feature? + +There are many things we like. The main one is probably the meta tags and how Nuxt manages SEO. When clients share their products with users on Facebook or Whatsapp it is really important for them that the meta tags are setup correctly with the title and description of each product. + +We also love the layouts as it allows us to create various sites in one place. We use the layouts to create a Whatsapp Catalog so we have a page and components specifically for this layout and we are working on a template builder so our users can easily have different layouts. They layouts features saves us lots of time as we don't need to have various different projects when we want to have multiple layouts. + +## Do you have performances benchmarks before & after using Nuxt? + +Our clients were really impressed when we migrated to Nuxt and some even thought we had changed the servers because their sites were loading so fast. + +## Would you recommend Nuxt? + +Of course. I would highly recommend it. We need that the Nuxt community gets bigger because we need more Nuxt developers to help us create more templates, modules. Nowadays if you look online you won't find many people who are creating ecommerce templates in Nuxt and we therefore need to train a lot of people or university students. The first thing of course is to learn Vue and Nuxt. We also plan to create more communities in Latin America so we can connect with and find more Nuxt developers. I believe Nuxt is going to become even more popular and there are huge advantages to using Nuxt. diff --git a/content/fa/case-studies/7.new-york-public-radio.md b/content/fa/case-studies/7.new-york-public-radio.md new file mode 100644 index 0000000000..b0f848fe76 --- /dev/null +++ b/content/fa/case-studies/7.new-york-public-radio.md @@ -0,0 +1,46 @@ +--- +template: post +title: New York Public Radio +description: "New York Public Radio is a nonprofit member network of National Public Radio. They recently rebuilt the WNYC radio page and their news website Gothamist with Nuxt. We talked with Kim LaRocca, Senior Engineering Manager at NYPR about their migration to Nuxt and their future plans." +imgUrl: img/case-studies/nypr/cover.png +headingImg: + hidden: true +--- + +![WNYC Radio page](img/case-studies/nypr/main.png){width=736 height=407} + +## What is New York Public Radio? + +New York Public Radio is a nonprofit member network of [National Public Radio](https://www.npr.org). We also own several public radio stations such as WNYC, WQXR, New Jersey Public Radio and we own a performance space called the Green Space in New York City. And we also own [Gothamist](https://gothamist.com/), which is a news site for New York City. We're working on reshaping audio and news for the new generation, reaching out to our community. We're trying to stay on top of modern technologies to better serve our listeners and our members. + +## How did you discover Nuxt? + +I started using Vue five years ago, back when I was developing with PHP and Laravel. Vue was shipped with Laravel; that's how I found out about it and started using it. I loved Vue, and then we had a project where we needed SSR, so I did some research and I found Nuxt. Everyone loved it, so I just decided to try it out and really enjoyed it and I've been using it ever since. + +## A number of the New York Public Radio frontends were built with Ember. Why did you choose to migrate to Nuxt? + +Well Ember is tough to work with because no one knows it. On our engineering team in New York Public Radio history, we've never hired one person who already knew Ember, we had to teach them on the job and we kind of got stuck with it, and the community support isn't great. The learning curve is also very, very high. So, when they hired me to manage the engineering team, my boss at the time wanted to switch everything to Vue. So it became my job to switch everything to Vue and of course I'm going to use Nuxt because we need the SEO benefits for our sites, so we just started doing it very gradually. We had to rebuild our whole design system in Vue. And then we started chipping away at some of our websites. + +## What are your favorite Nuxt features? + +There's so many features that I love! How everything's built in, you don't have to worry about configuring the build process with Webpack and Babel. The automatic code splitting and [smart prefetching](/announcements/introducing-smart-prefetching) is amazing. **The first load is fast but then when you navigate between page, it's instant and everyone noticed that and even our users have commented on how fast it is.** Stuff like that already built in makes it amazing to use. + +In addition, even something as simple as managing meta tags is really easy to do with Nuxt. Whereas with Ember, it was like you're jumping through all these hoops to figure out how to make that dynamic. Besides that, comparing this to other frameworks I've worked with, the community is great, the documentation is great, the modules are awesome. If we want to add Google Analytics or authentication, it's just a couple lines of code. You don't have to worry about it. **It really lets us focus on just building cool things and not worrying about the infrastructure**. + +## For now you have two projects built with Nuxt, the WNYC player, and Gothamist. + +Yes, the first thing we did was build the [WNYC radio page](https://www.wnyc.org/radio/) in Nuxt, it's a subset of the WNYC site where people can go to listen to the radio online to the FM stream or the AM stream. We have a stream coming in through WebSockets, and we built a couple NPM packages to help with streaming audio services. But besides that, everything else was just built in with Nuxt so it's pretty easy to do. + +![Gothamist article](img/case-studies/nypr/1.png){width=736 height=407} + +## What are your next steps, do you have any intents to build another project with Nuxt? + +We have every intention! All our new projects are going to use Nuxt and Vue, and the next step is rebuilding the Radiolab website, it's one of our most popular shows on the radio, and besides that we're probably going to rebuild the rest of the WNYC site to use Nuxt and Vue. Gothamist launch a couple of months ago has gotten rave reviews. Everyone noticed that it was fast so we have company approval now. Now we just need the time and the resources to actually start rebuilding but it is our every intention to use it for everything. + +## Your projects are open source, can you tell me more about it? + +I pushed for having [open source for all our projects](https://github.com/nypublicradio), so our design system is open source, and Gothamist code is open source. We're hoping that we can help some other developers along the way to make their sites better and also to attract people to work on the team because we're working with some cool technologies. We built the WNYC Radio and the design system in open source from the beginning. So if anyone was following it they saw all the problems and issues we had along the way, and how we solved them. + +## Would you recommend Nuxt, and for what kind of projects? + +Well, obviously, I'm highly gonna recommend Nuxt because I love it. At first I used to think that maybe it was overkill for small projects, but over the past couple of years I just started using it for everything so even if I have a one page, personal site, I'll still use it because it's just easier, it's faster to get it going and it's easier to work with. It's more fun than just the standard traditional Vue application so if anyone asks, I say: "Use it for everything. Any project." diff --git a/content/fa/case-studies/index.md b/content/fa/case-studies/index.md new file mode 100644 index 0000000000..dd29052845 --- /dev/null +++ b/content/fa/case-studies/index.md @@ -0,0 +1,9 @@ +--- +template: blog +title: Case studies +description: For the Case Studies series, we've been talking to companies using Nuxt to build their product. We'll explore their journey into the framework and its ecosystem, examine the variety of projects you can use Nuxt for, and consider the challenges they encountered and benefits they experienced. +blogPostList: true +sortBy: + field: 'position' + direction: 'asc' +--- diff --git a/content/fa/contribution-guide/index.md b/content/fa/contribution-guide/index.md new file mode 100644 index 0000000000..ee9e9a5e73 --- /dev/null +++ b/content/fa/contribution-guide/index.md @@ -0,0 +1,105 @@ +--- +template: post +title: Contribution Guide +description: Any contribution to Nuxt is more than welcome! +back: false +--- + +> Any contribution to Nuxt is more than welcome! + +## Reporting Issues + +A great way to contribute to the project is to send a detailed report when you encounter an issue: [Bug report](https://github.com/nuxt/nuxt.js/issues/new?assignees=&labels=bug-report&template=bug-report.md&title=) + +Please make sure to include a reproduction repository or [CodeSandBox](https://template.nuxtjs.org/) so that bugs can be reproduced without great efforts. The better a bug can be reproduced, the faster we can start fixing it! + +## Pull Requests + +We'd love to see your pull requests, even if it's just to fix a typo! + +However, any significant improvement should be associated to an existing [feature request](https://feature.nuxtjs.org/) or [bug report](https://bug.nuxtjs.org/). + +### Getting started + +1. [Fork](https://help.github.com/articles/fork-a-repo/) the [Nuxt repository](https://github.com/nuxt/nuxt.js) to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device. +2. Run `npm install` or `yarn install` to install the dependencies. + +> _Note that both **npm** and **yarn** have been seen to miss installing dependencies. To remedy that, you can either delete the `node_modules` folder in your example app and install again or do a local install of the missing dependencies._ + +> If you are adding a dependency, please use `yarn add`. The `yarn.lock` file is the source of truth for all Nuxt dependencies. + +### Setup + +Before running any tests, make sure all dependencies are met and build all packages: + +```sh +yarn +yarn build +``` + +### Test structure + +A great PR, whether it includes a bug fix or a new feature, will often include tests. To write great tests, let us explain our test structure: + +#### Fixtures + +The fixtures (found under `tests/fixtures`) contain several Nuxt applications. To keep build time as short as possible, we don't build an own Nuxt application per test. Instead, the fixtures are built (`yarn test:fixtures`) before running the actual unit tests. + +Please make sure to **alter** or **add a new fixture** when submitting a PR to reflect the changes properly (if applicable). + +Also, don't forget to **rebuild** a fixture after changing it by running the corresponding test with `jest test/fixtures/my-fixture/my-fixture.test.js`! + +#### Unit tests + +The unit tests can be found in `tests/unit` and will be executed after building the fixtures. A fresh Nuxt server will be used per test so that no shared state (except the initial state from the build step) is present. + +After adding your unit tests, you can run them directly: + +```sh +jest test/unit/test.js +``` + +Or you can run the whole unit test suite: + +```sh +yarn test:unit +``` + +Again, please be aware that you might have to rebuild your fixtures before! + +### Testing your changes + +While working on your PR you will likely want to check if your fixture is set up correctly or debug your current changes. + +To do so you can use the Nuxt script itself to launch for example your fixture or an example app: + +```sh +yarn nuxt examples/your-app +yarn nuxt test/fixtures/your-fixture-app +``` + +> `npm link` could also (and does, to some extent) work for this, but it has been known to exhibit some issues. That is why we recommend calling `yarn nuxt` directly to run examples. + +### Examples + +If you are working on a larger feature, please set up an example app in `examples/`. This will help greatly in understanding changes and also help Nuxt users to understand the feature you've built in-depth. + +### Linting + +As you might have noticed already, we are using ESLint to enforce a code standard. Please run `yarn lint` before committing your changes to verify that the code style is correct. If not, you can use `yarn lint --fix` or `npm run lint -- --fix` (no typo!) to fix most of the style changes. If there are still errors left, you must correct them manually. + +### Documentation + +If you are adding a new feature, or refactoring or changing the behavior of Nuxt in any other manner, you'll likely want to document the changes. Please do so with a PR to the [docs](https://github.com/nuxt/docs/pulls) repository. You don't have to write documentation up immediately (but please do so as soon as your pull request is mature enough). + +### Final checklist + +When submitting your PR, there is a simple template that you have to fill out. Please tick all appropriate "answers" in the checklists. + +### Troubleshooting + +#### Debugging tests on macOS + +Searching for `getPort()` will reveal it's used to start new Nuxt processes during tests. It's been seen to stop working on macOS at times and may require you to manually set a port for testing. + +Another common issue is Nuxt processes that may hang in memory when running fixture tests. A ghost process will often prevent subsequent tests from working. Run `ps aux | grep -i node` to inspect any hanging test processes if you suspect this is happening. diff --git a/content/fa/deployments/0.vercel.md b/content/fa/deployments/0.vercel.md new file mode 100644 index 0000000000..f6d154d1fd --- /dev/null +++ b/content/fa/deployments/0.vercel.md @@ -0,0 +1,70 @@ +--- +template: guide +title: Vercel +description: How to deploy a Nuxt app with Vercel? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/vercel.svg" + dark: "/img/companies/square/dark/vercel.svg" +--- +# Deploy Nuxt with Vercel + +How to deploy a Nuxt app with Vercel? + +--- + +## Static site with Vercel + +If you would like to deploy a static site on Vercel, no configuration is necessary. Vercel will detect that you are using Nuxt and will enable the correct settings for your deployment. For more information, see [this Vercel guide](https://vercel.com/guides/deploying-nuxtjs-with-vercel). + +## SSR with Vercel + +To deploy a serverless Nuxt runtime with [Vercel](https://vercel.com), the Nuxt team and contributors have produced an official [@nuxtjs/vercel-builder](https://github.com/nuxt/vercel-builder) package. + +All you have to do is to setup a `vercel.json` file: + +```json +{ + "builds": [ + { + "src": "nuxt.config.js", + "use": "@nuxtjs/vercel-builder", + "config": {} + } + ] +} +``` + +Check out [the documentation](https://github.com/nuxt/vercel-builder) for more information. + +### Service Worker with Nuxt PWA Module + +To avoid 404 for Service Workers, make sure to include `sw` to your routes settings. + +```json +{ + "version": 2, + "builds": [ + { + "src": "nuxt.config.js", + "use": "@nuxtjs/vercel-builder", + "config": { + "serverFiles": ["package.json"] + } + } + ], + "routes": [ + { + "src": "/sw.js", + "continue": true, + "headers": { + "Cache-Control": "public, max-age=0, must-revalidate", + "Service-Worker-Allowed": "/" + } + } + ] +} +``` + +You can learn more and see examples on https://github.com/nuxt/vercel-builder diff --git a/content/fa/deployments/1.netlify.md b/content/fa/deployments/1.netlify.md new file mode 100644 index 0000000000..5665d38cd6 --- /dev/null +++ b/content/fa/deployments/1.netlify.md @@ -0,0 +1,73 @@ +--- +template: guide +title: Netlify +description: How to deploy Nuxt on Netlify? +target: Static +category: deployment +logo: "/img/companies/square/dark/netlify.svg" +--- +# Deploy Nuxt on Netlify + +How to deploy Nuxt on Netlify? + +--- + +Deploying to [Netlify](https://www.netlify.com) is a low friction option for getting a **statically generated** Nuxt site online quickly. + +The core of the process leverages the `nuxt generate`(<= v2.12) command during deployment to build a static version of your Nuxt app into a `dist` directory. The contents of this directory are then deployed to a production URL. + +
+ +

+ Watch a free lesson on How to deploy Nuxt to Netlify on Jamstack Explorers +

+ +
+ +## Getting Started + +Press the _"New site from Git"_ button on the Netlify dashboard. Authenticate with your repository host, select a repository to deploy, and continue. You should land on step 3: _"Build options, and deploy!"_ + +## Configure: + +### For a statically generated site + +Make sure you have `target: 'static'`in your `nuxt.config`. + +1. **Branch to deploy:** `main`, or which-ever branch you prefer +1. **Build command:** `npm run generate` +1. **Publish directory:** `dist` + +### For client side rendering only + +Make sure you have `target: 'static'` and `ssr: false`in your `nuxt.config`. + +1. **Branch to deploy:** `main`, or which-ever branch you prefer +1. **Build command:** `npm run generate` +1. **Publish directory:** `dist` + +For client side rendering there is a problem with refresh as by default on Netlify the site redirects to _"404 not found"_. For any pages that are not generated they will fallback to SPA mode and then if you refresh or share that link you will get Netlify's 404 page. This is because the pages that are not generated don't actually exist as they are actually a single page application so if you refresh this page you will get a 404 because the url for that page doesn't actually exist. By redirecting to the 404.html Nuxt will reload your page correctly in SPA fallback. + +The easiest way to fix this is by adding a [generate property](/docs/configuration-glossary/configuration-generate#fallback) in your `nuxt.config` and setting `fallback: true`. Then it will fallback to the generated 404.html when in SPA mode instead of Netlify's 404 page. + +```js +export default { + generate: { + fallback: true + } +} +``` + +If however you want to automatically apply headers and redirects of the application then there is a module for that, this is especially useful for when you have custom headers/redirects (in a `_headers` or `_redirects` file): + +[netlify-files-module](https://github.com/nuxt-community/netlify-files-module) + +> For more information on Netlify redirects see the [Netlify docs](https://www.netlify.com/docs/redirects/#rewrites-and-proxying). + +> For simple reference on Netlify redirects read blog [post](https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site) by Divya Sasidharan + +> Optionally, you can add additional ENV variables via the _"Advanced"_ button. These can be helpful for swapping in alternative API credentials and so on. Netlify also provides a [default ENV variables](https://www.netlify.com/docs/build-settings/#build-environment-variables) which can be read by your Nuxt application at build time. + +Click _"Deploy site"_ to immediately trigger a deploy. Your Netlify site will be assigned a random URL and deployed using the `nuxt generate` command. + +Voilà! Your Nuxt application is now hosted on Netlify! diff --git a/content/fa/deployments/2.layer0.md b/content/fa/deployments/2.layer0.md new file mode 100644 index 0000000000..66c72bf261 --- /dev/null +++ b/content/fa/deployments/2.layer0.md @@ -0,0 +1,75 @@ +--- +template: guide +title: Layer0 +description: How to deploy Nuxt app on Layer0? +target: Server +category: deployment +logo: "/img/companies/square/dark/layer0.svg" +--- +# Deploy Nuxt on Layer0 + +How to deploy Nuxt app on Layer0? + +--- + +Layer0 supports universal (SSR) Nuxt applications. + +[Layer0](https://www.layer0.co) is an all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your headless frontend. It is focused on large, dynamic websites and best-in-class performance through EdgeJS (a JavaScript-based Content Delivery Network), predictive prefetching, and performance monitoring. Layer0 offers a free tier. + +For detailed instructions consult the [Layer0 Nuxt documentation](https://docs.layer0.co/guides/nuxt). + +## Getting Started + +1. Sign up for a free account on [Layer0's signup page](https://app.layer0.co/signup). + +2. Install the [Layer0 CLI](https://docs.layer0.co/guides/cli) + + + +::code-group +```bash [Yarn] +yarn global add @layer0/cli +``` +```bash [NPM] +npm i -g @layer0/cli +``` +:: + + + +## Configure your project + +3. Make sure [server side rendering is enabled](/docs/configuration-glossary/configuration-ssr) and in your `nuxt.config.js` add the `@layer0/nuxt` module: + +```js +// nuxt.config.js + +module.exports = { + modules: ['@layer0/nuxt/module'] +} +``` + +4. Run `layer0 init` which will configure your project for Layer0. + +## Running and deploying your project + +5. To test your app locally, run the following in your project directory: + +```js +layer0 run +``` + +6. To deploy your app, run the following in your project directory: + +```js +layer0 deploy +``` + +## Optimize your project's performance + +- (Optional) To optimize the performance of server side rendering in Nuxt, Layer0 recommends moving most your modules into `buildModules` as described in the [modules vs buildModules section](https://docs.layer0.co/guides/nuxt#section_modules_vs_buildmodules) of the Layer0 Nuxt guide. +- (Optional) Layer0 automatically supports Nuxt's built-in routing scheme. However you can and should optimize the performance by customizing the routing, caching, and prefetching via EdgeJS as shown in the [Routing section](https://docs.layer0.co/guides/nuxt#section_routing) of the Layer0 Nuxt guide. + +## Get help + +If you have issues please check the [Troubleshooting section](https://docs.layer0.co/guides/nuxt#section_troubleshooting) of the guide or create a ticket in the [forums](https://forum.layer0.co). diff --git a/content/fa/deployments/21yunbox.md b/content/fa/deployments/21yunbox.md new file mode 100644 index 0000000000..80684b1463 --- /dev/null +++ b/content/fa/deployments/21yunbox.md @@ -0,0 +1,61 @@ +--- +template: guide +title: 21YunBox +description: "How to deploy Nuxt on 21YunBox?" +target: Static +category: deployment +logo: + light: "/img/companies/square/light/Yunbox.svg" + dark: "/img/companies/square/dark/Yunbox.svg" +--- +# Deploy Nuxt on 21YunBox + +How to deploy Nuxt on 21YunBox? + +--- + +[21YunBox](https://www.21yunbox.com) provides blazing fast Chinese CDN, continuous deployment, one-click HTTPS and [other services like managed databases and backend web services](https://www.21yunbox.com/docs/), providing an avenue to launch web projects in China. + +21YunBox includes the following features: + +- Continuous, automatic builds & deploys from GitHub and Gitee +- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org) +- Instant cache invalidation with a blazing fast, Chinese CDN +- Unlimited [custom domains](https://www.21yunbox.com/docs/#/custom-domains) +- Automatic [Brotli compression](https://en.wikipedia.org/wiki/Brotli) for faster sites +- Native HTTP/2 support +- Automatic HTTP → HTTPS redirects +- Custom URL redirects and rewrites + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started or fork 21YunBox's [Nuxt Example](https://gitee.com/eryiyunbox-examples/nuxtjs) before continuing. + +## Setup + +You can set up a Nuxt site on 21YunBox in two quick steps: + +1. Create a new web service on 21YunBox, and give 21YunBox permission to access your GitHub or Gitee repo. +2. Use the following values during creation: + + | | | + | --------------------- | --------------------------------------------------- | + | **Environment** | `Static Site` | + | **Build Command** | `yarn && yarn generate` (or your own build command) | + | **Publish Directory** | `./dist` (or your own output directory) | + +That's it! Your site will be live on your 21YunBox URL (which looks like `yoursite.21yunbox.com`) as soon as the build is done. + +## Continuous deploys + +Now that 21YunBox is connected to your repo, it will automatically build and publish your site any time you push to GitHub. + +## 21YunBox CDN and cache invalidation + +21YunBox hosts your site on a Chinese, blazing fast CDN which ensures the fastest possible download times for all your users across China. + +Every deploy automatically and instantly invalidates the CDN cache, so your users can always access the latest content on your site. + +## Custom domains + +Add your own domains to your site easily using 21YunBox's [custom domains](https://www.21yunbox.com/docs/#/custom-domains) guide. diff --git a/content/fa/deployments/amazon-web-services.md b/content/fa/deployments/amazon-web-services.md new file mode 100644 index 0000000000..684bb110d8 --- /dev/null +++ b/content/fa/deployments/amazon-web-services.md @@ -0,0 +1,413 @@ +--- +template: guide +title: Amazon Web Services +description: Static Hosting on AWS with S3 Amplify and CloudFront +target: Static +category: deployment +logo: + light: "/img/companies/square/light/AWS_Light.svg" + dark: "/img/companies/square/dark/AWS_Dark.svg" +--- +# Deploy Nuxt on Amazon Web Services + +Static Hosting on AWS with S3 Amplify and CloudFront + +--- + +AWS stands for Amazon Web Services. +S3 is their static storage which can be configured for Static Site Hosting. CloudFront is their CDN (content delivery network) + +## AWS w/ the Amplify Console + +Hosting a **static generated** Nuxt app on AWS w/ the Amplify Console is powerful and cheap. + +First, push your Nuxt app to the Git provider of your choice. Then, visit the [Amplify Console](https://console.aws.amazon.com/amplify/home). Click the **GET STARTED** button under the **Deploy** header if you haven't used Amplify Hosting before, otherwise click the **Connect App** button. + +### From your existing code + +On the "From your existing code" page, select your Git provider and click **Continue**. + +### Add repository branch + +On the "Add repository branch" page, select your repository and the branch you want to deploy. Then, click **Next**. + +### Configure build settings + +On the "Configure build settings" page, click the `Edit` button under the "Build and test settings". Change the following: + +1. Set the **build** commands to `npm run generate`. +2. Set the `baseDirectory` location to be `dist`. + +The settings should look like this once you are done editing them: + +```yml +version: 1 +frontend: + phases: + preBuild: + commands: + - yarn install + build: + commands: + - npm run generate + artifacts: + # IMPORTANT - Please verify your build output directory + baseDirectory: dist + files: + - '**/*' + cache: + paths: + - node_modules/**/* +``` + +Then, click **Save** and **Next**. + +### Review + +On the review page, click **Save and deploy**. + +Then, your application will deploy. This may take a few minutes. + +Once `Provision`, `Build`, `Deploy`, and `Verify` are green, click on the URL that the Amplify Console provides to view your site. + +## AWS w/ S3 + CloudFront + +Hosting a **static generated** Nuxt app on AWS w/ S3 + CloudFront is powerful and cheap. + +> AWS is a death by 1000 paper cuts. If we missed a step, please submit a PR to update this document. + +### Overview + +We'll host super cheap with some AWS services. Briefly: + +- S3 + - cloud data "bucket" for our website files + - can be configured to host static websites +- CloudFront + - a CDN (content delivery network) + - offers free HTTPS certs + - Makes your site load faster + +We'll push the site like this: + +``` +Nuxt Generate -> Local folder -> AWS S3 Bucket -> AWS CloudFront CDN -> Browser + [ nuxt generate ] [ gulp deploy ] + [ deploy.sh ] +``` + +First, we'll generate the site with `nuxt generate`(<= v2.12). Then, we'll use [Gulp](https://gulpjs.com/) to publish the files to a S3 bucket and invalidate a CloudFront CDN. + +- [gulp](https://www.npmjs.com/package/gulp) +- [gulp-awspublish](https://www.npmjs.com/package/gulp-awspublish) +- [gulp-cloudfront-invalidate-aws-publish](https://www.npmjs.com/package/gulp-cloudfront-invalidate-aws-publish) +- [concurrent-transform](https://www.npmjs.com/package/concurrent-transform) (for parallel uploads) + +Our deploy script needs these environment variables set: + +- AWS_BUCKET_NAME="example.com" +- AWS_CLOUDFRONT="UPPERCASE" +- AWS_ACCESS_KEY_ID="key" +- AWS_SECRET_ACCESS_KEY="secret" + +We'll have these files: + +``` +deploy.sh - run `nuxt generate` and `gulp deploy` +gulpfile.js - `gulp deploy` code to push files to S3 and invalidate CloudFront +``` + +### Setting it up + +1. Make a S3 bucket and configure it for static site hosting +2. Create a CloudFront distribution +3. Configure security access +4. Setup build script in your project + +### AWS: Setup your S3 bucket and CloudFront Distribution + +Please follow this [tutorial to setup your S3 and CloudFront](https://learnetto.com/blog/cloudfront-s3) for step one and two. + +You should now have this data: + +- AWS_BUCKET_NAME="example.com" +- AWS_CLOUDFRONT="UPPERCASE" + +### AWS: Configure security access + +For step 3, we need to create a user that can: + +- Update the bucket contents +- Invalidate the CloudFront distribution (propagates changes to users faster) + +[Create a programmatic user with this policy](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html): + +> NOTE: replace 2x `example.com` with your S3 bucket name below. This policy allows pushing to the specified bucket, and invalidating any CloudFront distribution. + +```json +{ + "Version": "2012-10-17", + "Statement": [ + { + "Effect": "Allow", + "Action": ["s3:ListBucket"], + "Resource": ["arn:aws:s3:::example.com"] + }, + { + "Effect": "Allow", + "Action": [ + "s3:PutObject", + "s3:PutObjectAcl", + "s3:GetObject", + "s3:GetObjectAcl", + "s3:DeleteObject", + "s3:ListMultipartUploadParts", + "s3:AbortMultipartUpload" + ], + "Resource": ["arn:aws:s3:::example.com/*"] + }, + { + "Effect": "Allow", + "Action": [ + "cloudfront:CreateInvalidation", + "cloudfront:GetInvalidation", + "cloudfront:ListInvalidations", + "cloudfront:UnknownOperation" + ], + "Resource": "*" + } + ] +} +``` + +Then [get an access key and secret](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html). + +You should now have this data: + +- AWS_ACCESS_KEY_ID="key" +- AWS_SECRET_ACCESS_KEY="secret" + +### Laptop: Setup your project's build script + +4.1) Create a `deploy.sh` script. See optional [nvm (node version manager)](https://github.com/creationix/nvm). + +```bash +#!/bin/bash + +export AWS_ACCESS_KEY_ID="key" +export AWS_SECRET_ACCESS_KEY="secret" +export AWS_BUCKET_NAME="example.com" +export AWS_CLOUDFRONT="UPPERCASE" + +# Load nvm (node version manager), install node (version in .nvmrc), and npm install packages +[ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use +# Npm install if not already. +[ ! -d "node_modules" ] && npm install + +npm run generate +gulp deploy +``` + +4.2) Make `deploy.sh` runnable and DON'T CHECK INTO GIT (deploy.sh has secrets in it) + +```bash +chmod +x deploy.sh +echo " +# Don't commit build files +node_modules +dist +.nuxt +.awspublish +deploy.sh +" >> .gitignore +``` + +4.3) Add Gulp to your project and to your command line + +```bash +npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform +npm install -g gulp +``` + +4.4) Create a `gulpfile.js` with the build script + +```javascript +const gulp = require('gulp') +const awspublish = require('gulp-awspublish') +const cloudfront = require('gulp-cloudfront-invalidate-aws-publish') +const parallelize = require('concurrent-transform') + +// https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html + +const config = { + // Required + params: { + Bucket: process.env.AWS_BUCKET_NAME + }, + credentials: { + accessKeyId: process.env.AWS_ACCESS_KEY_ID, + secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, + signatureVersion: 'v3' + }, + + // Optional + deleteOldVersions: false, // NOT FOR PRODUCTION + distribution: process.env.AWS_CLOUDFRONT, // CloudFront distribution ID + region: process.env.AWS_DEFAULT_REGION, + headers: { + /* 'Cache-Control': 'max-age=315360000, no-transform, public', */ + }, + + // Sensible Defaults - gitignore these Files and Dirs + distDir: 'dist', + indexRootPath: true, + cacheFileName: '.awspublish', + concurrentUploads: 10, + wait: true // wait for CloudFront invalidation to complete (about 30-60 seconds) +} + +gulp.task('deploy', function () { + // create a new publisher using S3 options + // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property + const publisher = awspublish.create(config) + + let g = gulp.src('./' + config.distDir + '/**') + // publisher will add Content-Length, Content-Type and headers specified above + // If not specified it will set x-amz-acl to public-read by default + g = g.pipe( + parallelize(publisher.publish(config.headers), config.concurrentUploads) + ) + + // Invalidate CDN + if (config.distribution) { + console.log('Configured with CloudFront distribution') + g = g.pipe(cloudfront(config)) + } else { + console.log( + 'No CloudFront distribution configured - skipping CDN invalidation' + ) + } + + // Delete removed files + if (config.deleteOldVersions) { + g = g.pipe(publisher.sync()) + } + // create a cache file to speed up consecutive uploads + g = g.pipe(publisher.cache()) + // print upload updates to console + g = g.pipe(awspublish.reporter()) + return g +}) +``` + +4.5) Deploy and debug + +Run it: + +```bash +./deploy.sh +``` + +You should get an output similar to this: + +```bash +$ ./deploy.sh + +Found '/home/michael/scm/example.com/www/.nvmrc' with version <8> +Now using node v8.11.2 (npm v5.6.0) + +> example.com@1.0.0 generate /home/michael/scm/example.com/www +> nuxt generate + + nuxt:generate Generating... +0ms + nuxt:build App root: /home/michael/scm/example.com/www +0ms + nuxt:build Generating /home/michael/scm/example.com/www/.nuxt files... +0ms + nuxt:build Generating files... +36ms + nuxt:build Generating routes... +10ms + nuxt:build Building files... +24ms + ████████████████████ 100% + +Build completed in 7.009s + + + + DONE Compiled successfully in 7013ms 21:25:22 + +Hash: 421d017116d2d95dd1e3 +Version: webpack 3.12.0 +Time: 7013ms + Asset Size Chunks Chunk Names + pages/index.ef923f795c1cecc9a444.js 10.6 kB 0 [emitted] pages/index + layouts/default.87a49937c330bdd31953.js 2.69 kB 1 [emitted] layouts/default +pages/our-values.f60c731d5c3081769fd9.js 3.03 kB 2 [emitted] pages/our-values + pages/join-us.835077c4e6b55ed1bba4.js 1.3 kB 3 [emitted] pages/join-us + pages/how.75f8cb5bc24e38bca3b3.js 2.59 kB 4 [emitted] pages/how + app.6dbffe6ac4383bd30a92.js 202 kB 5 [emitted] app + vendor.134043c361c9ad199c6d.js 6.31 kB 6 [emitted] vendor + manifest.421d017116d2d95dd1e3.js 1.59 kB 7 [emitted] manifest + + 3 hidden assets +Hash: 9fd206f4b4e571e9571f +Version: webpack 3.12.0 +Time: 2239ms + Asset Size Chunks Chunk Names +server-bundle.json 306 kB [emitted] + nuxt: Call generate:distRemoved hooks (1) +0ms + nuxt:generate Destination folder cleaned +10s + nuxt: Call generate:distCopied hooks (1) +8ms + nuxt:generate Static & build files copied +7ms + nuxt:render Rendering url /our-values +0ms + nuxt:render Rendering url /how +67ms + nuxt:render Rendering url /join-us +1ms + nuxt:render Rendering url / +0ms + nuxt: Call generate:page hooks (1) +913ms + nuxt: Call generate:page hooks (1) +205ms + nuxt: Call generate:page hooks (1) +329ms + nuxt: Call generate:page hooks (1) +361ms + nuxt:generate Generate file: /our-values/index.html +2s + nuxt:generate Generate file: /how/index.html +0ms + nuxt:generate Generate file: /join-us/index.html +0ms + nuxt:generate Generate file: /index.html +0ms + nuxt:render Rendering url / +2s + nuxt: Call generate:done hooks (1) +4ms + nuxt:generate HTML Files generated in 11.8s +5ms + nuxt:generate Generate done +0ms +[21:25:27] Using gulpfile ~/scm/example.com/www/gulpfile.js +[21:25:27] Starting 'deploy'... +Configured with CloudFront distribution +[21:25:27] [cache] README.md +[21:25:27] [cache] android-chrome-192x192.png +[21:25:27] [cache] android-chrome-512x512.png +[21:25:27] [cache] apple-touch-icon.png +[21:25:27] [cache] browserconfig.xml +[21:25:27] [cache] favicon-16x16.png +[21:25:27] [cache] favicon-32x32.png +[21:25:27] [cache] favicon.ico +[21:25:27] [cache] favicon.svg +[21:25:27] [cache] logo-branches.svg +[21:25:27] [cache] logo-small.svg +[21:25:27] [cache] logo.svg +[21:25:27] [cache] mstile-150x150.png +[21:25:27] [cache] og-image.jpg +[21:25:27] [cache] safari-pinned-tab.svg +[21:25:27] [cache] site.webmanifest +[21:25:28] [create] _nuxt/manifest.421d017116d2d95dd1e3.js +[21:25:29] [update] 200.html +[21:25:30] [create] videos/flag.jpg +[21:25:30] [create] _nuxt/vendor.134043c361c9ad199c6d.js +[21:25:34] [create] videos/flag.mp4 +[21:25:34] [cache] _nuxt/pages/how.75f8cb5bc24e38bca3b3.js +[21:25:34] [cache] _nuxt/pages/join-us.835077c4e6b55ed1bba4.js +[21:25:34] [cache] _nuxt/pages/our-values.f60c731d5c3081769fd9.js +[21:25:36] [update] our-values/index.html +[21:25:36] [create] _nuxt/layouts/default.87a49937c330bdd31953.js +[21:25:36] [create] _nuxt/app.6dbffe6ac4383bd30a92.js +[21:25:37] [create] _nuxt/pages/index.ef923f795c1cecc9a444.js +[21:25:38] [update] join-us/index.html +[21:25:38] [update] how/index.html +[21:25:43] [create] videos/flag.webm +[21:25:43] [update] index.html +[21:25:43] CloudFront invalidation created: I16NXXXXX4JDOA +[21:26:09] Finished 'deploy' after 42 s +``` + +Note that the `CloudFront invalidation created: XXXX` is the only output from the CloudFront invalidation npm package. If you don't see that, it's not working. diff --git a/content/fa/deployments/azure-portal.md b/content/fa/deployments/azure-portal.md new file mode 100644 index 0000000000..36245f4bee --- /dev/null +++ b/content/fa/deployments/azure-portal.md @@ -0,0 +1,157 @@ +--- +template: guide +title: Azure Portal +description: How to deploy a Nuxt application on Azure Portal? +target: Server +category: deployment +logo: + light: "/img/companies/square/light/Azure.svg" + dark: "/img/companies/square/dark/Azure.svg" +--- +# Deploy Nuxt on Azure Portal + +How to deploy a Nuxt application on Azure Portal? + +--- + +## Requirements + +- It is required that you select a backend when setting up the project. Even if you don't need it, or else the site won't start up. +- The server is running Node 8 or greater + +## What if I already have a project without a backend? + +No worries. It is easy to add an express server to an existing project. + +Create a new folder called `server` in the root of the project. Then create an `index.js` file inside the `server` folder and paste the following inside the `index.js`: + +``` +const express = require('express') +const consola = require('consola') +const { loadNuxt } = require('nuxt-start') +const app = express() + +async function start () { + const nuxt = await loadNuxt(isDev ? 'dev' : 'start') + await nuxt.listen(process.env.PORT, process.env.HOST) +} + +start() + +``` + +Then edit your nuxt.config.js: + +Before: + +``` +import pkg from './package' + +export default { +... config +} +``` + +After: + +``` +module.exports = { +... config +} + +``` + +**Remember to remove the references to the pkg object inside the config.** + +That's it! + +For an Azure App Service deployment, make sure you set the following two environment variables (application settings) in App Service › Settings › Configuration › Application settings. + +``` +HOST: '0.0.0.0' +NODE_ENV: 'production' +``` + +## How to set Node version on Web App in DevOps + +You can set the Node version on the server, via the App setting inside the "Deploy Azure Web Service" task in the release pipeline + +Add this to the App settings field under "Application and Configuration Settings" + +``` +-WEBSITE_NODE_DEFAULT_VERSION 10.16.3 +``` + +It's recommended to use the LTS version. + +## Artifacts + +If you are using Azure DevOps and let the build pipeline do its work you and want to store artifacts. Files which are prefixed with a `.` must be moved to the artifact folder explicitly. Then you can create an Artifact Archive and download it afterwards in your Release Deployment. + +## Running the webserver + +For Azure Portal you will need a `web.config` file. If not supplied, it will create one itself. This one **won't work for Nuxt** though. Add a web.config file to your repository. For the latest version of `Nuxt` the server file is located at `server/index.js`. In the web.config you don't specify the exact path `server/index.js` but just `server`. See the example web.config below. If you don't do this the logs will tell you that Vue cannot find any routes. + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/content/fa/deployments/azure-static-web-apps.md b/content/fa/deployments/azure-static-web-apps.md new file mode 100644 index 0000000000..6df7a3bb1b --- /dev/null +++ b/content/fa/deployments/azure-static-web-apps.md @@ -0,0 +1,121 @@ +--- +template: guide +title: Azure Static Web Apps +description: How to deploy a Nuxt application on Azure Static Web Apps? +target: Static +category: deployment +logo: + light: "/img/companies/square/light/Azure.svg" + dark: "/img/companies/square/dark/Azure.svg" +--- +# Deploy on Azure Static Web Apps + +How to deploy a Nuxt application on Azure Static Web Apps? + +--- + +You can now deploy your static sites to Azure using Azure static web apps. You will need to have your app in GitHub as Azure static web apps leverages GitHub actions which allow you to re-build your static site on every git push. + +There are 2 things you need to configure in order to deploy your app to Azure static web apps. The first one is to modify the build command as Azure reads the build command from your package.json and for static sites we need to use the generate command. + +`package.json` + +```json +build: "nuxt generate" +``` + +The second one is to add a routes.json file which is important for catching custom 404 pages and spa fallback pages. + +`static/routes.json` + +```jsx +{ + "routes": [], + "platformErrorOverrides": [ + { + "errorType": "NotFound", + "serve": "/200.html", + "statusCode": 200 + } + ] +} +``` + +If you want to test out deploying to Azure static web apps, we have created a small demo application that is all setup and configured. You will just need to clone it and add it to your GitHub repo. You can then follow the steps on - Deploying your app with Azure Static Web Apps. + +[Clone the demo app](https://github.com/debs-obrien/nuxtjs-azure-static-app) + +## Deploying your app with Azure Static Web Apps + +### Step 1: **Create Azure static web apps** + +1. Navigate to the [Azure Portal](https://portal.azure.com/). +2. Click **Create a Resource** then search for **Static App** and select it. +3. Select a subscription from the *Subscription* drop-down list or use the default one. +4. Click the **New** link below the *Resource group* dropdown. In *New resource group name*, type **nuxt** and click **OK** +5. Provide a globally unique name for your app in the **Name** text box. Valid characters include `a-z`, `A-Z`, `0-9`, and `-`. The app name is used to identify the app in your list of resources therefore it is a good idea to name your app using the name of your repository. +6. In the *Region* dropdown, choose a region closest to you. + +![Azure Portal resource and app setup](https://user-images.githubusercontent.com/13063165/82118135-71891b00-9775-11ea-8284-aa94d17a3bc3.png) + +### Step 2: **Add a GitHub repository** + +Azure App Service Static App needs access to the repository where your Nuxt app lives so it can automatically deploy commits: + +1. Click the **Sign in with GitHub button** +2. Select the **Organization** under which you created the repo for your Nuxt project. It can also be your GitHub username. +3. Find the name of the repository you created earlier and select it. +4. Choose **master** as the branch from the *Branch* dropdown. + +![how to add github](https://user-images.githubusercontent.com/13063165/82118359-38ea4100-9777-11ea-9c5e-7ba5c4da708e.png) + +### Step 3: **Configure the build process** + +There are few things that Azure App Service Static App can assume - things like automatically installing npm modules and running `npm run build`. There are also few you have to be explicit about, like what folder will the static app be copied to after build so the static site can be served from there. + +1. Click on the **Build** tab to configure the static output folder. +2. Type **dist** in the *App artifact location* text box. + +![Azure portal configure build](https://user-images.githubusercontent.com/13063165/82118277-71d5e600-9776-11ea-88ad-48cf0793905d.png) + +### Step 4: **Review and create** + +1. Click the **Review + Create** button to verify the details are all correct. +2. Click **Create** to start the creation of the resource and also provision a GitHub Action for deployment. +3. Once the deployment is completed, click **Go to resource** + +![azure portal deployment complete message](https://user-images.githubusercontent.com/13063165/82118390-67681c00-9777-11ea-9778-671dc768393e.png) + +4. On the resource screen, click the *URL* link to open your deployed application. + +![resource screen with url to your deployed app](https://user-images.githubusercontent.com/13063165/82118042-d001c980-9774-11ea-94f5-57d995aa5391.png) + +Congrats your static site is now hosted on Azure static web apps. + +## Rebuild your static app and monitoring deployment + +Now all you have to do is modify your code and push your changes. Pushing your changes will activate a GitHub action and your new site will automatically rebuild. You can monitor the workflow by clicking on the actions tab in your GitHub repo and you can inspect even further by selecting the last commit you made. You can then watch to see when the deploy is finished or inspect the log if you have any deployment errors. + +![GitHub actions screen](https://user-images.githubusercontent.com/13063165/82118249-34715880-9776-11ea-92e2-dbd21bbf7cb6.png) + +## Did you know? + +### **How to handle dynamic routes** + +If you are working with dynamic pages such as `_id.vue` then you you will need to add these routes to the generate property in your nuxt config. + +[See the documentation on how to handle dynamic routes.](/docs/configuration-glossary/configuration-generate#routes) + +
+If you are using Nuxt 2.13+ then you won't have to worry about this as there is a built in crawler which will crawl all dynamics by crawling the links in your site. +
+ +### How to add an error page + +In order to not have the default 404 page you can create an `error.vue` file in your layouts folder. + +### How to add SPA fallback + +If you would like some pages to not be generated but act as a single page application you can do so using the generate.excludes property in your nuxt.config file. + +[See the documentation on spa fallback](/docs/configuration-glossary/configuration-generate#exclude) diff --git a/content/fa/deployments/bip.md b/content/fa/deployments/bip.md new file mode 100644 index 0000000000..8220bca63f --- /dev/null +++ b/content/fa/deployments/bip.md @@ -0,0 +1,60 @@ +--- +template: guide +title: Bip +description: How to deploy a Nuxt app with Bip? +target: Static +category: deployment +logo: + light: "/img/companies/square/light/bip.png" + dark: "/img/companies/square/dark/bip.png" +--- +# Deploy Nuxt with Bip + +How to deploy a Nuxt app with Bip? + +--- + +[Bip](https://bip.sh) is a commercial hosting service which provides zero downtime deployment, a global CDN, SSL, unlimited bandwidth and more for Nuxt static websites. Plans are available on a pay as you go, per domain basis. + +The following guide will show you how to deploy your Nuxt static site to Bip in just a couple simple steps. + +## Prerequisites + +- You have [Yarn](https://yarnpkg.com/getting-started/install) installed. +- You have the Bip CLI installed, along with a Bip account and domain ready to use. Visit the [Bip Get Started guide](https://bip.sh/getstarted) for further instructions. + +## Step 1: Initial setup + +You'll first need a Nuxt project ready to deploy and share with the world. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app): + +Use Yarn to create your new project: + +```bash +yarn create nuxt-app +``` + +Follow the prompts to setup your Nuxt project. Ensure that when you reach the 'Deployment target' setting, select 'Static (Static/JAMstack hosting)'. + +Once complete, move into your new directory: + +```bash +cd +``` + +Next, you'll need to initialize your project with Bip. This only needs to be done once. + +```bash +bip init +``` + +Follow the prompts, where you'll be asked which domain you'd like to deploy to. Bip will detect that you're using Nuxt, and set project settings like the source file directory automatically. + +## Step 2: Deploy + +You're now ready to deploy your website. To do so, run: + +```bash +yarn generate && bip deploy +``` + +That's it! After a few moments, your website will be deployed. diff --git a/content/fa/deployments/cleavr.md b/content/fa/deployments/cleavr.md new file mode 100644 index 0000000000..e9f77a8c98 --- /dev/null +++ b/content/fa/deployments/cleavr.md @@ -0,0 +1,53 @@ +--- +template: guide +title: Cleavr +description: How to deploy a Nuxt app with Cleavr? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/cleavr.svg" + dark: "/img/companies/square/dark/cleavr.svg" +--- +# Deploy Nuxt with Cleavr + +How to deploy a Nuxt app with Cleavr? + +--- + +[Cleavr](https://cleavr.io) is a server management console that integrates with multiple VPS (cloud hosting) providers and helps you configure servers to host your Nuxt apps as well as deploys your Nuxt apps in just a couple of clicks. + +Cleavr includes the following features: + +- Provision and configure servers ready to run Nuxt SSR and Static applications +- Secure servers and provides free SSL certs +- Deploy code from GitHub, GitLab, and Bitbucket repositories with zero-downtime +- Auto-installs and configures PM2 (with cluster mode enabled) for Nuxt SSR apps +- GitHub Actions integration to build app with no additional configuration required + +## Prerequisites + +- Your Cleavr account is connected to your VPS and version control (e.g. GitHub, GitLab, Bitbucket) providers +- You have a Nuxt SSR or Static project ready to deploy +- You have an existing provisioned server + +## Step 1: Initial setup + +In Cleavr, navigate to the server to add the new app to and select **Add Site**. + +Select either **Nuxt SSR** or **Nuxt Static** web app type depending on which target you intend to deploy. Fill out the remaining website info and click **Add**. + +This will add the site to your server and configure the server with any missing required environment dependencies. + +Once the site has been successfully added, go to the Web App section and navigate to settings > code repository for the web app that was added. + +Fill in your version control provider, repository, and branch to deploy fields and then click **Update**. + +## Step 2: Deploy + +You're now ready to deploy your web app. + +On the web app's deployment page, click **Deploy**. + +The deployment process will begin and complete in a few moments. + +[View the Cleavr documentation for more info.](https://docs.cleavr.io/guides/nuxt) diff --git a/content/fa/deployments/cloudflare.md b/content/fa/deployments/cloudflare.md new file mode 100644 index 0000000000..c3bdbf7b42 --- /dev/null +++ b/content/fa/deployments/cloudflare.md @@ -0,0 +1,26 @@ +--- +template: guide +title: Cloudflare +description: What needs to be considered when using Nuxt with Cloudflare +category: deployment +logo: + light: "/img/companies/square/light/Cloudflare.svg" + dark: "/img/companies/square/dark/Cloudflare.svg" +--- +# Deploy Nuxt on Cloudflare + +What needs to be considered when using Nuxt with Cloudflare + +--- + +In most cases, Nuxt can work with third party content that is not generated or created by Nuxt itself. But sometimes such content can cause problems, especially Cloudflare's "Minification and Security Options". + +Accordingly, you should make sure that the following options are unchecked / disabled in Cloudflare. Otherwise, unnecessary re-rendering or hydration errors could impact your production application. + +1. Speed > Optimization > Auto Minify: **Uncheck** JavaScript, CSS and HTML +2. Speed > Optimization > **Disable** "Rocket Loader™" +3. Speed > Optimization > **Disable** "Mirage" +4. Scrape Shield > **Disable** "Email Address Obfuscation" +5. Scrape Shield > **Disable** "Server-side Excludes" + +With these settings, you can be sure that Cloudflare won't inject scripts into your Nuxt application that may cause unwanted side effects. diff --git a/content/fa/deployments/digital-ocean.md b/content/fa/deployments/digital-ocean.md new file mode 100644 index 0000000000..6adfe9e1ef --- /dev/null +++ b/content/fa/deployments/digital-ocean.md @@ -0,0 +1,63 @@ +--- +template: guide +title: Digital Ocean +description: How to deploy Nuxt on DigitalOcean App Platform? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Digital_Ocean.svg" + dark: "/img/companies/square/dark/Digital_Ocean.svg" +--- +# Deploy Nuxt on DigitalOcean App Platform + +How to deploy Nuxt on DigitalOcean App Platform? + +--- + +[DigitalOcean App Platform](https://www.digitalocean.com/products/app-platform/) allows you to build, deploy, and scale apps quickly using a simple, fully managed solution. They’ll handle the infrastructure, app runtimes and dependencies, so that you can push code to production in just a few clicks. + +App Platform includes the following features: + +- Build, deploy, manage, and scale apps. +- Secure apps automatically. They create, manage and renew your SSL certificates and also protect your apps from DDoS attacks. +- Support for Node.js, static sites, Python, Django, Go, PHP, Laravel, React, Ruby, Ruby on Rails, Gatsby, Hugo, container images. +- Deploy code directly from your GitHub and GitLab repositories. Automatically re-deploy the app when you push updates to your source code. +- Zero infrastructure management. App Platform uses open, cloud native standards and automatically analyzes your code, creates containers, and runs them on Kubernetes clusters. +- Highly scalable. Scale horizontally or vertically. + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started. + +## Setup + +1. Link your repository: Create a new account on DigitalOcean and connect your GitHub or Gitlab account. Then select the repository you want to deploy. +2. Choose a branch of your repo and a region to deploy your site. +3. Choose the service that suits your website. + + | Type | Settings | + | ---------- | ---------------------------------------------------------------------- | + | **Server** | Web service - Build command `yarn build` & Run command `yarn start --hostname 0.0.0.0` | + | **Static** | Static Sites - Build command `yarn generate` & Output directory `dist` | + + ::alert{type="warning"} + Warning: For the server type you need to change the **HTTP port** from 8080 to **3000** in the Web service settings.
More information at [this article](https://dev.to/tillsanders/deploy-nuxt-js-on-digitalocean-app-platform-in-5-minutes-or-less-2dij). + :: + + ![DO App platform Web Service Nuxt configuration](https://i.imgur.com/BhBu49J.png) + +4. If you have any environment variable, add them manually in the key-value pair inputs. + +Once you pass the process, you hit deploy and your site will be live on an autogenerated url as soon as the build is done. + +## Continuous deployment (CD) + +Now that App Platform is connected to your repo, it will automatically build and publish your site any time you push a new change. + +## Add custom domains + +Add your own domains to your site easily on Settings > Domains > Add domain or follow this [How to Manage Domains in App Platform](https://www.digitalocean.com/docs/app-platform/how-to/manage-domains/) guide. + +## Deploy to DigitalOcean button + +The Deploy to DigitalOcean Button allows users to launch an application onto App Platform. It can be embedded in the README file for GitHub repositories, allowing users who are browsing your repository to deploy your code in one click, adding a .yaml file into your repo. Check it out at [How to Add a "Deploy to DigitalOcean" Button to Your Repository](https://www.digitalocean.com/docs/app-platform/how-to/add-deploy-do-button/) diff --git a/content/fa/deployments/dokku.md b/content/fa/deployments/dokku.md new file mode 100644 index 0000000000..92e3a06b63 --- /dev/null +++ b/content/fa/deployments/dokku.md @@ -0,0 +1,67 @@ +--- +template: guide +title: Dokku +description: How to deploy a Nuxt application on Dokku? +target: Server +category: deployment +logo: + light: "/img/companies/square/light/dokku.png" + dark: "/img/companies/square/dark/dokku.png" +--- +# Deploy Nuxt on Dokku + +How to deploy a Nuxt application on Dokku? + +--- + +We recommend to read [Dokku documentation for the setup](http://dokku.viewdocs.io/dokku/getting-started/installation/) and [Deploying a Node.js Application on Digital Ocean using Dokku](http://jakeklassen.com/post/deploying-a-node-app-on-digital-ocean-using-dokku/). + +For the example, we will call our Nuxt application `my-nuxt-app`. + +We need to tell Dokku to install the `devDependencies` of the project (to be able to launch `npm run build`): + +```bash +// on Dokku Server +dokku config:set my-nuxt-app NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false +``` + +Also, we want our application to listen on the host `0.0.0.0` and run in production mode: + +```bash +// on Dokku Server +dokku config:set my-nuxt-app HOST=0.0.0.0 NODE_ENV=production +``` + +You should see these 3 lines when you type `dokku config my-nuxt-app` + +![nuxt config vars Dokku](https://i.imgur.com/9FNsaoQ.png) + +Then, we tell Dokku to launch `npm run build` via the `scripts.dokku.predeploy` script in our project `app.json`: + +`create a file name app.json in our project root folder` + +```js +{ + "scripts": { + "dokku": { + "predeploy": "npm run build" + } + } +} +``` + +To launch the application we run `npm run start` using the [Procfile](http://dokku.viewdocs.io/dokku/deployment/methods/dockerfiles/#procfiles-and-multiple-processes): + +``` +web: npm run start +``` + +Finally, we can push our app on Dokku with: + +```bash +// commit your change before push. +git remote add dokku dokku@yourServer:my-nuxt-app +git push dokku master +``` + +Voilà! Our Nuxt application is now hosted on Dokku! diff --git a/content/fa/deployments/fume.md b/content/fa/deployments/fume.md new file mode 100644 index 0000000000..d577122b4d --- /dev/null +++ b/content/fa/deployments/fume.md @@ -0,0 +1,44 @@ +--- +template: guide +title: Fume +description: How to deploy Nuxt on Fume? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Fume.svg" + dark: "/img/companies/square/dark/Fume.svg" +--- +# Deploy Nuxt on Fume + +How to deploy Nuxt on Fume? + +--- + +[Fume](https://fume.app/) is an operations control platform powered by AWS. + +Fume includes the following features: + +- Serverless structures supporting both Server and Static with Lambda and CloudFront. +- [Automated](https://github.com/marketplace/actions/fume-deployment) deployments with rollbacks with the click of a button +- Metrics and cost prediction for each environment +- Domain control - import hosts, issues certificates, and map records to environments +- Integrated notifications to Slack, Discord, and other collaboration platforms + +## Setup + +Get a production-ready URL in 2 minutes with these steps: + +- Head to [Fume](https://fume.app), connect and plug in your AWS account +- Create a Team, and a Nuxt project +- Run the following command inside your projects root folder + +::code-group +```bash [Yarn] +yarn global add fume-cli +fume deploy +``` +```bash [NPM] +npm install -g fume-cli +fume deploy +``` +:: diff --git a/content/fa/deployments/github-pages.md b/content/fa/deployments/github-pages.md new file mode 100644 index 0000000000..6a9df30162 --- /dev/null +++ b/content/fa/deployments/github-pages.md @@ -0,0 +1,293 @@ +--- +template: guide +title: GitHub Pages +description: How to deploy Nuxt app on GitHub Pages? +target: Static +category: deployment +logo: + light: "/img/companies/square/light/Github_Pages.svg" + dark: "/img/companies/square/dark/Github_Pages.svg" +--- +# Deploy Nuxt on GitHub Pages + +How to deploy Nuxt app on GitHub Pages? + +--- + +Nuxt gives you the possibility to host your web application on any static hosting like [GitHub Pages](https://pages.github.com/) for example. + +To deploy on GitHub Pages, you need to generate your static web application: + +::code-group +```bash [Yarn] +yarn generate +``` +```bash [NPM] +npm run generate +``` +:: + +It will create a `dist` folder with everything inside ready to be deployed on GitHub Pages hosting. Branch `gh-pages` for project repository OR branch `master` for user or organization site + +::alert{type="info"} +Info: If you use a custom domain for your GitHub Pages and put `CNAME` file, it is recommended that CNAME file is put in the `static` directory. [More documentation](/docs/directory-structure/static) about it. +:: + +## Deploying to GitHub Pages for repository + +First of all, you want to make sure to use [static target](/docs/features/deployment-targets) since we are hosting on GitHub pages: + +```js[nuxt.config.js] +export default { + target: 'static' +} +``` + +If you are creating GitHub Pages for one specific repository, and you don't have any custom domain, the URL of the page will be in this format: `http://.github.io/`. + +If you deployed `dist` folder without adding [router base](/docs/configuration-glossary/configuration-router), when you visit the deployed site you will find that the site is not working due to missing assets. This is because we assume that the website root will be `/`, but in this case it is `/`. + +To fix the issue we need to add [router base](/docs/configuration-glossary/configuration-router#base) configuration in `nuxt.config.js`: + +```js[nuxt.config.js] +export default { + target: 'static', + router: { + base: '//' + } +} +``` + +This way, all generated path asset will be prefixed with `//`, and the next time you deploy the code to repository GitHub Pages, the site should be working properly. + +## Command line deployment + +You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir): + +First install it: + +::code-group +```bash [Yarn] +yarn add --dev push-dir +``` +```bash [NPM] +npm install push-dir --save-dev +``` +:: + +Add a `deploy` command to your `package.json` with the branch as `gh-pages` for project repository OR `master` for user or organization site. + +```js +"scripts": { + "dev": "nuxt", + "generate": "nuxt generate", + "start": "nuxt start", + "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup" +}, +``` + +Then generate and deploy your static application: + +::code-group +```bash [Yarn] +yarn generate +yarn deploy +``` +```bash [NPM] +npm run generate +npm run deploy +``` +:: + +## Build server deployment + +You can take deployment one step further and rather than having to manually compile and deploy the files from your local install, you can make use of a build server to monitor your GitHub repository for new commits and then checkout, compile and deploy everything for you automatically. + +### GitHub Actions + +To deploy via [GitHub Actions](https://github.com/features/actions), the official tool for software automation with GitHub, if you don't have a workflow you need to create a new one or append a new step to your existing workflow. + +It uses the [GitHub Pages Action](https://github.com/marketplace/actions/github-pages-action) which pushes the generated files from the `dist` folder to your default GitHub Pages branch `gh-pages`. + +With an existing workflow, add the following step: + +```yaml +- name: Deploy + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist +``` + +With a new workflow, paste the following content into a new file called `cd.yml` in `.github/workflows` directory: + +```yaml +name: cd + +on: [push, pull_request] + +jobs: + cd: + runs-on: ${{ matrix.os }} + + strategy: + matrix: + os: [ubuntu-latest] + node: [14] + + steps: + - name: Checkout + uses: actions/checkout@master + + - name: Setup node env + uses: actions/setup-node@v2.1.2 + with: + node-version: ${{ matrix.node }} + + - name: Install dependencies + run: yarn + + - name: Generate + run: yarn generate + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist +``` + +Then commit this to your repository: + +```bash +git add .github/workflows/cd.yml +git commit -m "Adding github pages deploy workflow" +git push origin +``` + +On completion, you'll see your `gh-pages` branch updated as well as your site. + +### Travis CI + +To deploy with [Travis CI](https://travis-ci.org/), a free for open source projects build server, sign in via your GitHub account, granting Travis access to view your repositories, and then enable the build server for your repository by toggling the switch next to your repositories name in the list displayed. + +![Travis Builder Server Enable](/img/docs/github_pages_travis_01.png) + +Next, click the cog icon beside your repository name to configure the general settings of the build sever and enable the 'Build only if .travis.yml is present' feature by toggling the switch. + +![Travis Builder Server Settings](/img/docs/github_pages_travis_02.png) + +On the same screen, scroll down to the Environment Variables section and create a new variables named `GITHUB_ACCESS_TOKEN` and in the value field paste a copy of the GitHub personal access token your created earlier and click the 'Add' button. + +![Travis Builder Server Environment Variables](/img/docs/github_pages_travis_03.png) + +Finally, create a `.travis.yml` configuration file in the root of your repository with the following contents + +```yaml +language: node_js +node_js: + - '12' + +cache: + directories: + - 'node_modules' + +branches: + only: + - master + +install: + - npm install + - npm run generate + +script: + - echo "Skipping tests" + +deploy: + provider: pages + skip-cleanup: true + github-token: $GITHUB_ACCESS_TOKEN # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token + target-branch: gh-pages + local-dir: dist + on: + branch: master +``` + +and then commit this to your repository + +```bash +git add .travis.yml +git commit -m "Adding travis deploy configuration" +git push origin +``` + +Now, whenever you commit any changes to your repository, from within Travis, you'll see a new build start up + +![Travis Builder Server Output](/img/docs/github_pages_travis_04.png) + +and on completion, you'll see your GitHub pages site automatically updated. + +### Appveyor + +To deploy via [Appveyor](https://www.appveyor.com), another free for open source projects build server, sign up for a new account choosing the GitHub authentication option to sign in using your GitHub account. + +Once signed in, click the 'New project' link and then click the 'Add' button beside your repository name in the list displayed to enable the build server on your repository. + +![Appveyor Builder Server Enable](/img/docs/github_pages_appveyor_01.png) + +Next, in the root of your repository, create an `appveyor.yml` configuration file with the following contents + +```yaml +environment: + # Nuxt requires node v12 minimum + nodejs_version: '12' + # Encrypt sensitive data (https://ci.appveyor.com/tools/encrypt) + github_access_token: + secure: ENCRYPTED_GITHUB_ACCESS_TOKEN + github_email: + secure: ENCRYPTED_GITHUB_EMAIL + +# Only run on master branch +branches: + only: + - master + +# Install scripts. (runs after repo cloning) +install: + # switch nodejs version + - ps: Install-Product node $env:nodejs_version + # install modules + - npm install + # generate static files + - npm run generate + # configure global git credentials store (https://www.appveyor.com/docs/how-to/git-push/) + - git config --global credential.helper store + - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:github_access_token):x-oauth-basic@github.com`n" + - git config --global user.email $env:github_email + # deploy to GitHub pages + - npm run deploy + +# No tests to run +test: off + +# Don't actually build. +build: off +``` + +**_NB_** This configuration assumes you've configured your `package.json` file as per the [Command line deployment](#command-line-deployment) instructions + +Before you commit this file however, you'll need to change the `ENCRYPTED_GITHUB_ACCESS_TOKEN` and `ENCRYPTED_GITHUB_EMAIL` variables with your GitHub personal access token from earlier and your GitHub email address, encrypted using the [Appveyor encryption tool](https://ci.appveyor.com/tools/encrypt). + +Once updated, commit the file to your repository + +```bash +git add appveyor.yml +git commit -m "Adding appveyor deploy configuration" +git push origin +``` + +Now, whenever you commit any changes to your repository, from within Appveyor, you'll see a new build start up + +![Appveyor Builder Server Output](/img/docs/github_pages_appveyor_02.png) + +and on completion, you'll see your GitHub pages site automatically updated. diff --git a/content/fa/deployments/google-appengine.md b/content/fa/deployments/google-appengine.md new file mode 100644 index 0000000000..207a15527e --- /dev/null +++ b/content/fa/deployments/google-appengine.md @@ -0,0 +1,76 @@ +--- +template: guide +title: Google App Engine +description: How to deploy Nuxt on Google App Engine? +target: Server +category: deployment +logo: + light: "/img/companies/square/light/Google_engine_app.svg" + dark: "/img/companies/square/dark/Google_engine_app.svg" +--- +# Deploy Nuxt on Google App Engine + +How to deploy Nuxt on Google App Engine? + +--- + +Deploying to [Google App Engine](https://cloud.google.com/appengine/) is a fast and easy solution for hosting your universal Nuxt application on Google's Cloud Services. + +In this guide, we build the application locally and then simply upload the entire project folder to Google App Engine. After the upload, Google App Engine will automatically start the `start` script in our package.json and your app will be available immediately. + +## Getting Started + +Make sure you have a Google Cloud Account, a project and an empty Google App Engine app set up on [Google App Engine](https://cloud.google.com/appengine/). Furthermore, make sure to download and install the Cloud SDK (CLI) from Google as explained [here](https://cloud.google.com/sdk/) and log into your Google Cloud Account. + +## Configure your application + +All you need to add to your universal Nuxt app for deploying it to the App Engine is a file called `app.yaml`. Create a new file with that name in your root project directory and add the following content: + +```yaml +runtime: nodejs10 + +instance_class: F2 + +handlers: + - url: /_nuxt + static_dir: .nuxt/dist/client + secure: always + + - url: /(.*\.(gif|png|jpg|ico|txt))$ + static_files: static/\1 + upload: static/.*\.(gif|png|jpg|ico|txt)$ + secure: always + + - url: /.* + script: auto + secure: always + +env_variables: + HOST: '0.0.0.0' +``` + +or for flexible environment the minimal configuration is: + +```yaml +runtime: nodejs +env: flex +``` + +## Build and deploy the app + +Now build your app with `npm run build` or `yarn build`. + +At this point, your app is ready to be uploaded to Google App Engine. Now just run the following command: + +``` +gcloud app deploy app.yaml --project [project-id] +``` + +Voilà! Your Nuxt application is now hosted on Google App Engine! + +## Further Information + +- The `instance_class` attribute in your app.yaml file sets the class of your app instance. Instance F2 is not completely free, but has the minimum memory needed to run a Nuxt application. +- Make sure `start` in package.json is the command that you want to run after deployment. If you usually run by `start:prod` or some other command, your app will not work as expected. + +Make sure to put the `project-id` and not the `project-name` in the deploy command. These are two different things but easy to mix up. diff --git a/content/fa/deployments/google-cloud-run.md b/content/fa/deployments/google-cloud-run.md new file mode 100644 index 0000000000..21bcae5e69 --- /dev/null +++ b/content/fa/deployments/google-cloud-run.md @@ -0,0 +1,127 @@ +--- +template: guide +title: Google Cloud Run +description: How to deploy Nuxt on Google Cloud Run? +target: Server +category: deployment +logo: + light: "/img/companies/square/light/Google_Cloud_run.svg" + dark: "/img/companies/square/dark/Google_Cloud_run.svg" +--- +# Deploy Nuxt on Google Cloud Run + +How to deploy Nuxt on Google Cloud Run? + +--- + +[Google Cloud Run](https://cloud.google.com/run) is a fully managed compute platform for deploying and scaling containerized applications quickly and securely. + +In this guide, we simply upload the entire project folder to Google Cloud Build with a Dockerfile. After the upload, Cloud Build will automatically generate a container. Then we will deploy this container to Google Cloud Run which will start it with the `start` script in our package.json. + +## Getting Started + +Make sure you have a Google Cloud Account, a project and the accesses as editor on Cloud Build and Cloud Run. Furthermore, make sure to download and install the Cloud SDK (CLI) from Google as explained [here](https://cloud.google.com/sdk/) and log into your Google Cloud Account. If you do not want to download the Cloud SDK, be aware that you can use gcloud CLI from the Google Cloud Console. + +Now, let's do few checks! + +If the Cloud Build API and the Cloud Run API are not enabled, enable them: + +```bash +# Enabling Cloud Build +$ gcloud services enable cloudbuild.googleapis.com + +# Enabling Cloud Run +$ gcloud services enable run.googleapis.com +``` + +Go in your application directory and install dependencies: + +```bash +# For yarn users +$ yarn + +# For npm users +$ npm install +``` + +Start the application locally: + +```bash +# For yarn users +$ yarn dev + +# For npm users +$ npm run dev +``` + +Check that everything works. + +## Containerize your application + +Now, we will create a container with Cloud Build. + +You need to add to your Nuxt app a `Dockerfile`. Create a new file named `Dockerfile` in your root project directory and add the following content: + +For yarn users: + +```Dockerfile +FROM node:14 + +WORKDIR /usr/src/app + +COPY . ./ +RUN yarn + +EXPOSE 8080 + +ENV HOST=0.0.0.0 +ENV PORT=8080 + +RUN yarn build + +CMD [ "yarn", "start" ] +``` + +For npm users: + +```Dockerfile +FROM node:14 + +WORKDIR /usr/src/app + +COPY . ./ +RUN npm install + +EXPOSE 8080 + +ENV HOST=0.0.0.0 +ENV PORT=8080 + +RUN npm run build + +CMD [ "npm", "run", "start" ] +``` + +Run the following command to start the build process: + +`gcloud builds submit --tag gcr.io//my-nuxt-app-name:1.0.0 .` + +!Attention: if you want to implement continuous delivery or .env files configurations, you will have to use a [Cloud Build configuration file](https://cloud.google.com/cloud-build/docs/build-config). + +## Deploying your application on Cloud Run + +Run the following command to deploy your application: + +`gcloud run deploy --image=gcr.io//my-nuxt-app-name:1.0.0 --platform managed --port 3000` + +Allow unauthenticated invocations if you want to set up a public access. + +Be aware that Cloud Run applications will have a default concurrency value of 80 (each container instance will handle up to 80 requests at a time). You can specify the concurrency value this way: + +`gcloud run deploy --image=gcr.io//my-nuxt-app-name:1.0.0 --platform managed --port 3000 --concurrency ` + +Run the following command to check if the deployment was created successfully: + +`gcloud run services list --platform managed` + +A list of Cloud Run services is displayed. Click on the URL of your deployment and enjoy the result! diff --git a/content/fa/deployments/heroku.md b/content/fa/deployments/heroku.md new file mode 100644 index 0000000000..9e65c1ad9a --- /dev/null +++ b/content/fa/deployments/heroku.md @@ -0,0 +1,57 @@ +--- +template: guide +title: Heroku +description: How to deploy Nuxt on Heroku? +target: Server +category: deployment +logo: + light: "/img/companies/square/light/Heroku.svg" + dark: "/img/companies/square/dark/Heroku.svg" +--- +# Deploy Nuxt on Heroku + +How to deploy Nuxt on Heroku? + +--- + +We recommend you read the [Heroku documentation for Node.js](https://devcenter.heroku.com/articles/nodejs-support). + +
+ +

+ Watch a free lesson on How to deploy Nuxt to Heroku on Vue School +

+ +
+ +You can set up and configure your app via the [Heroku dashboard](https://devcenter.heroku.com/articles/heroku-dashboard) or the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). + +First, we create our app. Then we add the Node.js [buildpack](https://devcenter.heroku.com/articles/buildpacks) and configure the app to listen on the host `0.0.0.0`: + +```bash +heroku create myapp +heroku buildpacks:set heroku/nodejs +heroku config:set HOST=0.0.0.0 +``` + +Your app's Settings section on the Heroku dashboard should contain this: + +![nuxt config vars Heroku](https://user-images.githubusercontent.com/23453691/116850762-81ea0e00-abf1-11eb-9f70-260721a1d525.png) + +Finally, we can push the app on Heroku with: + +```bash +git push heroku master +``` + +To deploy a non-master branch to Heroku use: + +```bash +git push heroku develop:master +``` + +where `develop` is the name of your branch. + +You can optionally configure automatic deploys from a selected branch of your app's GitHub repository in the Deploy section of your app in the Heroku dashboard. + +Voilà! Your Nuxt application is now hosted on Heroku! diff --git a/content/fa/deployments/hostman.md b/content/fa/deployments/hostman.md new file mode 100644 index 0000000000..55a24daea9 --- /dev/null +++ b/content/fa/deployments/hostman.md @@ -0,0 +1,85 @@ +--- +template: guide +title: Hostman +description: How to deploy Nuxt on Hostman? +target: Static +category: deployment +logo: + light: "/img/companies/square/light/Hostman.svg" + dark: "/img/companies/square/dark/Hostman.svg" +--- +# Deploy Nuxt on Hostman + +How to deploy Nuxt on Hostman? + +--- + +[Hostman](https://hostman.com/) is a cloud hosting provider for startups and new projects. It helps to get rid of most routine DevOps operations, saving time for developers and money for companies. Hostman employs a services concept to make it easier to develop complex architecture and scale it in one click. + +Hostman provides you with the following features: + +- Build and deploy static websites, web apps, docker containers and databases. +- Everything is very transparent, because you see the actual hardware your application is operating on and the actual load average, so you can assess them if something goes wrong. +- You can SSH into your Docker container, providing the perfect balance between abstraction and transparency. +- Hostman automatically sets up an SSL certificate for all your domains and puts a CDN in place to deliver your content as fast as possible. +- Hostman automates CI/CD, pulling, building and launching code as soon as you push a new commit to the repository. +- No vendor lock-in. +- Hostman supports 22 frameworks. + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started. + +## Setup + +--- + +Step 1. Create a service + +To deploy a Nuxt static website, click Create in the top-left corner of your [Dashboard](https://dashboard.hostman.com/) and choose Front-end app or static website. + +![Hostman dashboard](https://i.imgur.com/bEePHDo.png) + +Step 2. Select the project to deploy + +If you are logged in to Hostman with your GitHub, GitLab or Bitbucket account, at this point you will see the repository with your projects, including the private ones. + +Choose the project you want to deploy. It must contain the Nuxt app directory that was automatically created after running the yarn create-nuxt-app command. + +To access a different repository, click Connect another repository. + +If you didn’t use your Git account credentials to log in, you’ll be able to access the necessary account now, and then select the project. + +Step 3. Configure the build settings + +Next, the Website customization window will appear. + +![Build configuration](https://i.imgur.com/gIgl5EH.png) + +Choose the Static website option from the list of frameworks. + +The Directory with app points at the directory that will contain the project's files after the build. For Nuxt the directory is dist. + +The standard build command will be: + +`yarn build` + +It initiates the framework’s command nuxt generate which will create the dist directory with the project’s files. + +You can modify the command here if the build process for your project requires it. You can enter multiple commands separated by &&. + +Step 4. Deploy + +Click Deploy to start the build process. + +Once it starts, you will enter the deployment log. If there are any issues with the code, you will get warning or error messages in the log, specifying the cause of the problem. + +Usually the log contains all the debugging data you'll need, but we are also here to help you solve the issues, so do not hesitate to contact us via chat. + +When the deployment is complete, you will receive an e-mail notification and also see a similar log entry: + +![Log entry](https://i.imgur.com/KwzMxTb.png) + +All done! + +Your project is up and ready. diff --git a/content/fa/deployments/index.md b/content/fa/deployments/index.md new file mode 100644 index 0000000000..8bbb1d5d2f --- /dev/null +++ b/content/fa/deployments/index.md @@ -0,0 +1,8 @@ +--- +template: PageList +title: Deployments +description: "Extend and automate your workflow by using deployments for your favorite tools." +heroTitle: Deployments +heroDescription: "Extend and automate your workflow by using deployments for your favorite tools." +heroDescriptionFullWidth: true +--- diff --git a/content/fa/deployments/koyeb.md b/content/fa/deployments/koyeb.md new file mode 100644 index 0000000000..81dfc5487e --- /dev/null +++ b/content/fa/deployments/koyeb.md @@ -0,0 +1,128 @@ +--- +template: guide +title: Koyeb +description: Deploy Nuxt on Koyeb Serverless Platform with Docker +target: Server +category: deployment +logo: + light: "/img/companies/square/light/Koyeb.svg" + dark: "/img/companies/square/dark/Koyeb.svg" +--- +# Deploy Nuxt on Koyeb Serverless Platform + +Deploy Nuxt on Koyeb Serverless Platform with Docker + +--- + +[Koyeb](https://www.koyeb.com) is a developer-friendly serverless platform to deploy apps globally. The platform lets you seamlessly run Docker containers, web apps, and APIs with git-based deployment, native autoscaling, a global edge network, and built-in service mesh and discovery. + +In this guide, we showcase how to dockerize and deploy a Nuxt application on the Koyeb platform. + +> Koyeb allows you to deploy Docker containers from the registry of your choice. In this guide we use the Docker Hub to store our image but you are free to use the [GitHub Container Registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry), the [GitLab Container Registry](https://docs.gitlab.com/ee/user/packages/container_registry/) or any other container registry provider. + +## Requirements + +To successfully follow and complete this guide, you need: + +1. A Nuxt project to deploy. You can use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to create a Nuxt project and get started +2. A [Koyeb account](https://app.koyeb.com) to deploy and run the dockerized Nuxt application +3. A [Docker Hub](https://hub.docker.com/) account to push the Docker image and deploy it on Koyeb + +## Getting started + +In your Nuxt application directory run the following command to install dependencies: + +```bash +yarn +``` + +Once the dependencies are installed, launch your application and ensure everything is working fine: + +```bash +yarn dev +``` + +## Dockerize your application + +To Dockerize your Nuxt application, you need to create a `Dockerfile` in your project directory containing the content below: + +```dockerfile +FROM node:lts as builder + +WORKDIR /app + +COPY . . + +RUN yarn install \ + --prefer-offline \ + --frozen-lockfile \ + --non-interactive \ + --production=false + +RUN yarn build + +RUN rm -rf node_modules && \ + NODE_ENV=production yarn install \ + --prefer-offline \ + --pure-lockfile \ + --non-interactive \ + --production=true + +FROM node:lts + +WORKDIR /app + +COPY --from=builder /app . + +ENV HOST 0.0.0.0 +EXPOSE 80 + +CMD [ "yarn", "start" ] +``` + +To build the Docker image execute the following command: + +```bash +docker build . -t /my-nuxt-project +``` + +This command will build the Docker image with the name /my-nuxt-project. Once the build is over, you can run a container using the image locally to validate everything is working as expected running: + +```bash +docker run -p 3000:3000 /my-nuxt-project +``` + +Open your browser and navigate to http://localhost:3000 to view your project landing page. + +## Push your Docker image to a container registry + +Since our Docker image is built and functional in our test, we can now upload it to a container registry. In this documentation, we will store our image on the Docker Hub. In your terminal run the command below to push the image: + +```bash +docker push /my-nuxt-project +``` + +## Deploy the Nuxt application to production on Koyeb + +On the Koyeb Control Panel, click the **Create App** button. + +In the form, fill the `Docker image` field with the name of the image we previously created which should look like `/my-nuxt-project`. + +Check the box `Use a private registry` and, in the select field, click **Create Registry Secret**. + +A modal opens asking for: + +- a name for the Secret which will be created, we can use for instance `docker-hub-secret` +- the registry provider to generate the secret containing your private registry credentials, in our case Docker Hub +- your Docker Hub username and password. We recommend you to [generate an access token](https://hub.docker.com/settings/security) from the Docker Hub to use instead of your password. + Once you've filled all the fields, click the **Create** button. + +We don't need to change the _Path_, our app will be available at the root of our domain: `/`. + +Give your App a name, i.e `nuxt-app`, and click **Create App**. + +_You can add more regions to deploy your applications, set environment variables, and define the horizontal scaling according to your needs._ + +You will automatically be redirected to the Koyeb App page where you can follow the progress of your Nuxt application deployment. In a few seconds, once your app is deployed, click on the _Public URL_ ending with `koyeb.app`. + +Your Nuxt application is now running on Koyeb and benefits from native autoscaling, automatic HTTPS (SSL), auto-healing, and global load-balancing across our edge network. diff --git a/content/fa/deployments/nginx.md b/content/fa/deployments/nginx.md new file mode 100644 index 0000000000..476e1f6b6d --- /dev/null +++ b/content/fa/deployments/nginx.md @@ -0,0 +1,252 @@ +--- +template: guide +title: NGINX +description: How to use nginx as a reverse proxy? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Nginx.svg" + dark: "/img/companies/square/dark/Nginx.svg" +--- +# Using NGINX as a reverse proxy + +How to use nginx as a reverse proxy? + +--- + +```nginx +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 80; # the port nginx is listening on + server_name your-domain; # setup your domain here + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + location / { + expires $expires; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here + } +} +``` + +## Using nginx with generated pages and a caching proxy as fallback: + +If you have a high volume website with regularly changing content, you might want to benefit from Nuxt generate capabilities and [nginx caching](https://www.nginx.com/blog/nginx-caching-guide). + +Below is an example configuration. Keep in mind that: + +- root folder should be the same as set by [configuration generate.dir](/docs/configuration-glossary/configuration-generate#dir) +- expire headers set by Nuxt are stripped (due to the cache) +- both Nuxt and nginx can set additional headers, it's advised to choose one (if in doubt, choose nginx) +- if your site is mostly static, increase the `proxy_cache_path inactive` and `proxy_cache_valid` numbers + +If you don't generate your routes but still wish to benefit from nginx cache: + +- remove the `root` entry +- change `location @proxy {` to `location / {` +- remove the other 2 `location` entries + +```nginx +proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=nuxt-cache:25m max_size=1g inactive=60m use_temp_path=off; + +map $sent_http_content_type $expires { + "text/html" 1h; # set this to your needs + "text/html; charset=utf-8" 1h; # set this to your needs + default 7d; # set this to your needs +} + +server { + listen 80; # the port nginx is listening on + server_name your-domain; # setup your domain here + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + charset utf-8; + + root /var/www/NUXT_PROJECT_PATH/dist; + + location ~* \.(?:ico|gif|jpe?g|png|woff2?|eot|otf|ttf|svg|js|css)$ { + expires $expires; + add_header Pragma public; + add_header Cache-Control "public"; + + try_files $uri $uri/ @proxy; + } + + location / { + expires $expires; + add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';"; + add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; + add_header X-Frame-Options "SAMEORIGIN"; + + try_files $uri $uri/index.html @proxy; # for generate.subFolders: true + # try_files $uri $uri.html @proxy; # for generate.subFolders: false + } + + location @proxy { + expires $expires; + add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';"; + add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-Cache-Status $upstream_cache_status; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_ignore_headers Cache-Control; + proxy_http_version 1.1; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here + proxy_cache nuxt-cache; + proxy_cache_bypass $arg_nocache; # probably better to change this + proxy_cache_valid 200 302 60m; # set this to your needs + proxy_cache_valid 404 1m; # set this to your needs + proxy_cache_lock on; + proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504; + proxy_cache_key $uri$is_args$args; + } +} +``` + +## nginx configuration for Laravel Forge: + +Change `YOUR_WEBSITE_FOLDER` to your website folder and `YOUR_WEBSITE_DOMAIN` to your website URL. Laravel Forge will have filled out these values for you but be sure to double check. + +```nginx +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/before/*; + +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 80; + listen [::]:80; + server_name YOUR_WEBSITE_DOMAIN; + + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-XSS-Protection "1; mode=block"; + add_header X-Content-Type-Options "nosniff"; + + charset utf-8; + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + # FORGE CONFIG (DOT NOT REMOVE!) + include forge-conf/YOUR_WEBSITE_FOLDER/server/*; + + location / { + expires $expires; + + proxy_redirect off; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js + } + + access_log off; + error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error; + + location ~ /\.(?!well-known).* { + deny all; + } +} + +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/after/*; +``` + +## Secure Laravel Forge with TLS: + +It's best to let Laravel Forge do the editing of the `nginx.conf` for you, by clicking on Sites -> YOUR_WEBSITE_DOMAIN (SERVER_NAME) and then click on SSL and install a certificate from one of the providers. Remember to activate the certificate. Your `nginx.conf` should now look something like this: + +```nginx +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/before/*; + +map $sent_http_content_type $expires { + "text/html" epoch; + "text/html; charset=utf-8" epoch; + default off; +} + +server { + listen 443 ssl http2; + listen [::]:443 ssl http2; + server_name YOUR_WEBSITE_DOMAIN; + + # FORGE SSL (DO NOT REMOVE!) + ssl_certificate /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.crt; + ssl_certificate_key /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.key; + + ssl_protocols TLSv1 TLSv1.1 TLSv1.2; + ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!3DES'; + ssl_prefer_server_ciphers on; + ssl_dhparam /etc/nginx/dhparams.pem; + + add_header X-Frame-Options "SAMEORIGIN"; + add_header X-XSS-Protection "1; mode=block"; + add_header X-Content-Type-Options "nosniff"; + + charset utf-8; + + gzip on; + gzip_types text/plain application/xml text/css application/javascript; + gzip_min_length 1000; + + # FORGE CONFIG (DOT NOT REMOVE!) + include forge-conf/YOUR_WEBSITE_FOLDER/server/*; + + location / { + expires $expires; + + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_redirect off; + proxy_read_timeout 1m; + proxy_connect_timeout 1m; + proxy_pass http://127.0.0.1:3000; # set the address of the Node.js + } + + access_log off; + error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error; + + location ~ /\.(?!well-known).* { + deny all; + } +} + +# FORGE CONFIG (DOT NOT REMOVE!) +include forge-conf/YOUR_WEBSITE_FOLDER/after/*; +``` diff --git a/content/fa/deployments/platformsh.md b/content/fa/deployments/platformsh.md new file mode 100644 index 0000000000..2bb43b4105 --- /dev/null +++ b/content/fa/deployments/platformsh.md @@ -0,0 +1,39 @@ +--- +template: guide +title: Platform.sh +description: How to deploy Nuxt on Platform.sh? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Platformsh.svg" + dark: "/img/companies/square/dark/Platformsh.svg" +--- +# Deploy Nuxt on Platform.sh + +How to deploy Nuxt on Platform.sh? + +--- + +[Platform.sh](https://platform.sh/) is a full-featured end-to-end continuous deployment cloud hosting system for both staging and production environments. It is capable of hosting both static and dynamic applications in a variety of languages. + +Platform.sh includes the following features: + +- Build, deploy, manage, and scale applications. +- Any branch can be a staging environment; create and delete environments with ease. +- Support for almost any Node.js, PHP, Python, Ruby, Go, or Java application, in your choice of version, or mix and match. +- Automatic TLS certificates. +- Integrated build pipeline to customize your application's build process however you need. +- Infrastructure-as-code: define three YAML files and your entire cluster is created on demand. Add and remove services with ease. +- Deploy code directly from your GitHub and GitLab repositories. + +## Setup + +Platform.sh has a pre-made template for Nuxt available. The link below will create a new Platform.sh project and pre-populate it with a sample Nuxt application that you can then customize. + +

+ + Deploy on Platform.sh + +

+ +The `README.md` file includes details of the provided default configuration. New Platform.sh accounts are free for the first 30 days. diff --git a/content/fa/deployments/pm2.md b/content/fa/deployments/pm2.md new file mode 100644 index 0000000000..f4844f6be8 --- /dev/null +++ b/content/fa/deployments/pm2.md @@ -0,0 +1,65 @@ +--- +template: guide +title: PM2 +description: How to deploy Nuxt with PM2 cluster mode enabled? +target: Server +category: deployment +logo: + light: "/img/companies/square/light/pm2.png" + dark: "/img/companies/square/dark/pm2.png" +--- +# Deploy Nuxt using PM2 + +How to deploy Nuxt with PM2 cluster mode enabled? + +--- + +Deploying using [PM2](https://pm2.keymetrics.io/) (Process Manager 2) is a fast and easy solution for hosting your universal Nuxt application on your server or VM. + +In this guide, we build the application locally and serve it though a PM2 config file with the cluster mode activated. Cluster mode will prevent downtime by allowing applications to be scaled across multiple CPUs. + +## Getting Started + +Make sure you have pm2 installed on your server. If not, simply globally install it from yarn or npm. + +```bash +# yarn pm2 install +$ sudo yarn global add pm2 --prefix /usr/local + +# npm pm2 install +$ npm install pm2 -g +``` + +## Configure your application + +All you need to add to your universal Nuxt app for serving it though PM2 is a file called `ecosystem.config.js`. Create a new file with that name in your root project directory and add the following content: + +```javascript +module.exports = { + apps: [ + { + name: 'NuxtAppName', + exec_mode: 'cluster', + instances: 'max', // Or a number of instances + script: './node_modules/nuxt/bin/nuxt.js', + args: 'start' + } + ] +} +``` + +## Build and serve the app + +Now build your app with `npm run build`. + +And serve it with `pm2 start`. + +Check the status `pm2 ls`. + +Your Nuxt application is now serving! + +## Further Information + +This solution guarantees no downtime for your application on this server. (You should also prevent server failure through redundancy or high availability cloud solutions.) + +You can find PM2 additional configurations [here](https://pm2.keymetrics.io/docs/usage/application-declaration/#general). diff --git a/content/fa/deployments/qovery.md b/content/fa/deployments/qovery.md new file mode 100644 index 0000000000..66cfd665f3 --- /dev/null +++ b/content/fa/deployments/qovery.md @@ -0,0 +1,70 @@ +--- +template: guide +title: Qovery +description: How to deploy Nuxt on Qovery? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Qovery.svg" + dark: "/img/companies/square/dark/Qovery.svg" +--- +# Deploy Nuxt on Qovery + +How to deploy Nuxt on Qovery? + +--- + +[Qovery](https://qovery.com) is a fully-managed cloud platform that runs on your AWS, GCP, Azure and Digital Ocean account where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place. + +Static sites are **completely free** on Qovery and include the following: + +- Continuous, automatic builds & deploys from GitHub and GitLab. +- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org). +- Free managed PostgreSQL. +- Free SSD storage. +- Unlimited collaborators. +- Unlimited [custom domains](https://docs.qovery.com/guides/getting-started/setting-custom-domain/). + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, follow the [Get Started](/docs/get-started/installation) guide. + +## Setup + +Follow the procedure below to set up Nuxt on Qovery: + +### 1. Create a Qovery account. + +Visit the [Qovery dashboard](https://console.qovery.com) to create an account if you don't already have one. + +### 2. Create a project + +Click on "Create a new project" and give a name to your project. + +Click on "Next". + +### 3. Add an application + +Click on "Create an application" then choose "I have an application" and select the repository where your Nuxt site is located. + +Click on "Next". + +Skip adding services for static website. + +Click on "Deploy". + +## Deploy + +Your app should be deployed. You can see the status in real time by clicking on deployment logs. + +## Continuous deploys + +Now that Qovery is connected to your repo, it will **automatically build and publish your site** any time you push to git. + +## Custom domains + +Add your own domains to your site easily using Qovery's [custom domains](https://docs.qovery.com/guides/getting-started/setting-custom-domain/) guide. + +## Support + +Chat with Qovery developers on [Discord](https://discord.qovery.com) if you need help. diff --git a/content/fa/deployments/stormkitio.md b/content/fa/deployments/stormkitio.md new file mode 100644 index 0000000000..ef93109e42 --- /dev/null +++ b/content/fa/deployments/stormkitio.md @@ -0,0 +1,60 @@ +--- +template: guide +title: Stormkit.io +description: How to deploy Nuxt with Stormkit.io? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Stormkit.svg" + dark: "/img/companies/square/dark/Stormkit.svg" +--- +# Deploy with Stormkit + +How to deploy Nuxt with Stormkit.io? + +--- + +Easily build, deploy and scale your Nuxt applications with [Stormkit.io](https://www.stormkit.io). It supports instant rollbacks, serverless-side logic, snippet injections, multiple development environments and more... + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started or fork Stormkit's [Nuxt Example](https://github.com/stormkit-dev/hackernews-nuxt) before continuing. + +## Setup + +1. Go to [app.stormkit.io](https://app.stormkit.io) and log in by selecting your git provider. +2. Once logged in, Stormkit will ask you in which provider your codebase is located. Click on the provider once more. +3. If Github, click on ‘Connect more repositories’ and grant Stormkit access to it. +4. Next, select your repository. This will create the application on Stormkit. +5. On your application's page, find the **Production** environment and click on that. +6. Click on edit to configure your application. You will provide the build command and the + environment variables in this screen. + +## Static websites + +You don't have to do anything for static websites. Applications built with `nuxt generate` will be handled out of the box. + +## Single page applications + +For single page applications, all you have to do is to provide a `stormkit.config.yml` which redirects +all requests to `index.html`. To do so, create a `stormkit.config.yml` file on the top level of your project and specify the following rule: + +``` +app: +- redirects: + - from: /* + to: /index.html + assets: false +``` + +## Hybrid applications + +For hybrid applications, you'll have to turn on the `Serverless` toggle on the build configuration page. This will tell Stormkit to serve the requests from the lambdas instead of the CDN. You can find more on [this guide](https://www.stormkit.io/docs/deployments/configuration/nuxt#hybrid) to configure your hybrid serverless applications. + +## Hosting using Stormkit + +Stormkit generates a unique URL for each deployment. You can preview your application using these links. Later, you can connect your domain and publish any deployment so that the users will start to see that version of your application. You can also do staged-rollouts or A/B testing by publishing multiple versions at the same time. + +## Support + +If you need additional support, you can chat with Stormkit developers and other community members on [Discord](https://discord.gg/6yQWhyY). diff --git a/content/fa/deployments/surge.md b/content/fa/deployments/surge.md new file mode 100644 index 0000000000..b8e4144f71 --- /dev/null +++ b/content/fa/deployments/surge.md @@ -0,0 +1,54 @@ +--- +template: guide +title: Surge +description: How to deploy Nuxt app with Surge? +target: Static +category: deployment +logo: + light: "/img/companies/square/light/Surge.svg" + dark: "/img/companies/square/dark/Surge.svg" +--- +# Deploy Nuxt with Surge + +How to deploy Nuxt app with Surge? + +--- + +Nuxt gives you the possibility to host your web application on any static hosting like [Surge](https://surge.sh/) for example. + +To deploy on Surge, first install it on your computer: + +::code-group +```bash [Yarn] +yarn global add surge +``` +```bash [NPM] +npm install -g surge +``` +:: + +Then, we tell Nuxt to generate our web application: + +::code-group +```bash [Yarn] +yarn generate +``` +```bash [NPM] +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on a static hosting. + +We can then deploy it to Surge: + +```bash +surge dist/ +``` + +Done :) + +If you have a project with [dynamic routes](/docs/directory-structure/pages#dynamic-pages), take a look at the [`generate` configuration](/docs/configuration-glossary/configuration-generate) to tell Nuxt how to generate these dynamic routes if you are using Nuxt <= v2.12. + +::alert{type="warning"} +When generating your web application with `nuxt generate`, [the context](/docs/internals-glossary/context) given to [asyncData](/docs/features/data-fetching) will not have `req` and `res`. +:: diff --git a/content/fa/design/index.md b/content/fa/design/index.md new file mode 100644 index 0000000000..537299c6a5 --- /dev/null +++ b/content/fa/design/index.md @@ -0,0 +1,75 @@ +--- +template: blank +title: 'Design Kit' +description: 'Learn how to use Nuxt logos, colors and fonts and download the design kit.' +layout: + fluid: true +navigation: false +--- +::design-hero +--- +title: Design Kit +description: "Nuxt is an MIT licensed open source project and completely free to use. +You can freely use our logos as long as you mention Nuxt and link to nuxtjs.org." +button: Download Design Kit +--- +:: + +::design-sections + +::design-section +#title +Monograms + +#description +Our logo is made from two elements: the triangular mountains and the wordmark. In most cases, they should appear together as the opposite master lockup shows. The triangular mountains can be used on their own as an icon, profile picture or badge, but the wordmark should never be used without this symbol on the side. + +#sectionComponent + :::design-logos + --- + type: monogram + --- + ::: +:: + +::design-section +#title +Logos + +#sectionComponent + :::design-logos + --- + type: logos + --- + ::: +:: + +::design-section +#title +Primary colors + +#description +Our colours have been carefully considered to work in harmony and consistency across various media. When creating Nuxt communications, use the colour values shown on the following pages to make sure your designs stay on-brand. This nature-inspired primary colour palette should be used in all of our formal company related communications. + +#sectionComponent + :::design-colors + --- + buttonText: Download Color System + --- + ::: +:: + +::design-section +#title +Typography + +#description +Our brand typeface is DM Sans by Colophon Foundry for Google. This open-source typeface was chosen for its +combination of smoothness and structure. Its geometric shapes and soft transitions will bring clarity and openness +to our texts. Also, it’s open availability will let other members of the Nuxt community incorporate it into +their work. + +#sectionComponent + :::design-typography +:: +:: diff --git a/content/fa/docs/4.directory-structure/4.content.md b/content/fa/docs/4.directory-structure/4.content.md new file mode 100644 index 0000000000..4e32376bfd --- /dev/null +++ b/content/fa/docs/4.directory-structure/4.content.md @@ -0,0 +1,286 @@ +--- +title: فهرست محتوا +navigation.title: محتوا +description: برنامه ی Nuxt خود را با ماژول @nuxt/content قدرتمند کنید، جایی که می‌توانید در فهرست content/ directory بنویسید و فایل‌های Markdown، JSON، YAML و CSV خود را از طریق MongoDB شبیه یک API واکشی کنید که مثل یک CMS مبتنی بر Git Headless عمل می‌کند. +category: directory-structure +--- +# فهرست محتوا + +برنامه Nuxt خود را با ماژول '@nuxt/content' تقویت کنید، جایی که می‌توانید در فهرست 'content/' بنویسید و فایل‌های Markdown، JSON، YAML و CSV خود را از طریق MongoDB مانند API واکشی کنید. **Git-based Headless CMS**. + +--- + +![](/img/docs/nuxt-content.svg) + +### داشتن ریلود سریع در زمان توسعه + +وقتی نوبت به بارگذاری سریع (Hot Reload) در توسعه می‌رسد، ماژول محتوای به سرعت در حال افزایش است، زیرا هنگام ایجاد تغییرات در فایل‌های علامت‌گذاری، نیازی به عبور از webpack نیست. همچنین می‌توانید به رویداد 'content:update' گوش دهید و یک افزونه ایجاد کنید تا هر بار که فایلی را در فهرست محتوای خود به‌روزرسانی می‌کنید برای مثال یک متد fetchCategories ارسال شود.. + +::alert{type="next"} +[برای جزئیات بیشتر به این لینک مراجعه کنید](https://content.nuxtjs.org/advanced#handling-hot-reload) +:: + +### نمایش مطالب + +می‌توانید از مؤلفه '' مستقیماً در قالب خود برای نمایش بدنه صفحه استفاده کنید. + +```html{}[pages/blog/_slug.vue] + +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/displaying#component) را برای اطلاعات بیشتر ببینید +:: + +### استایل دادن به محتوای خود + +بسته به آنچه برای طراحی برنامه خود استفاده می کنید، ممکن است لازم باشد استایلی بنویسید تا نشانه گذاری به درستی نمایش داده شود. + +مؤلفه '' به‌طور خودکار یک کلاس '.nuxt-content' اضافه می‌کند، می‌توانید از آن برای سفارشی‌سازی استایلهای خود استفاده کنید. + +```html + +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/displaying#style) را برای اطلاعات بیشتر ببینید +:: + +### کنترل Markdown, CSV, YAML, JSON(5) + +این ماژول فایل های .md شما را به ساختار درختی JSON AST تبدیل می کند که در یک متغیر body ذخیره می شود. همچنین می‌توانید یک بلوک ماده جلویی YAML به فایل‌های نشانه‌گذاری یا یک فایل .yaml اضافه کنید که به سند اضافه می‌شود. همچنین می توانید یک فایل json/json5 اضافه کنید که می تواند به سند نیز اضافه شود. و می توانید از یک فایل csv. که در آن ردیف ها به متغیر body اختصاص داده می شود استفاده کنید. + +```md +--- +title: My first Blog Post +description: آموزش استفاده از nuxt/content@ برای ایجاد وبلاگ +--- +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/writing#markdown) را برای اطلاعات بیشتر ببنید +:: + +### اجزای Vue در Markdown + +می‌توانید از مؤلفه‌های Vue مستقیماً در فایل‌های علامت‌گذاری خود استفاده کنید. با این حال باید از اجزای خود به عنوان kebab-case استفاده کنید و نمی توانید از تگ های self-closing استفاده کنید. + +```html{}[components/global/InfoBox.vue] + +``` + +```html{}[content/articles/my-first-blog-post.md] + + + +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/writing#vue-components) را برای اطلاعات بیشتر ببینید +:: + +### API کاملا قابل جستجو + +می‌توانید از '$content()' برای فهرست کردن، فیلتر کردن و جستجوی آسان محتوای خود استفاده کنید. + +```html{}[pages/blog/index.vue] + +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/fetching#methods) برای اطلاعات بیشتر ببینید +:: + +### مقاله های قبلی و بعدی + +ماژول محتوا شامل '.slug(slug)' است تا به راحتی موضوعات قبلی و بعدی را دریافت کنید. + +```js +async asyncData({ $content, params }) { + const article = await $content('articles', params.slug).fetch() + + const [prev, next] = await $content('articles') + .only(['title', 'slug']) + .sortBy('createdAt', 'asc') + .surround(params.slug) + .fetch() + + return { + article, + prev, + next + } + }, +``` + +```html + +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/fetching#surroundslug-options) را برای اطلاعات بیشتر ببینید +:: + +### جستجوی تمام متن + +ماژول محتوا با یک جستجوی متن کامل ارائه می شود، بنابراین می توانید به راحتی در بین فایل های علامت گذاری شده خود بدون نیاز به نصب چیزی جستجو کنید. + +```html{}[components/AppSearchInput.vue] + +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/fetching#searchfield-value) را برای اطلاعات بیشتر ببینید +:: + +### برجسته سازی نحو (Syntax) + +این ماژول به طور خودکار بلوک های کد را بسته بندی می کند و کلاسها را اعمال می کند [Prism](https://prismjs.com/). همچنین می توانید یک تمپلیت Prism متفاوت اضافه کنید یا آن را به طور کلی غیرفعال کنید. + +::code-group +```bash [Yarn] +yarn add prism-themes +``` +```bash [NPM] +npm install prism-themes +``` +:: + +```js{}[nuxt.config.js] +content: { + markdown: { + prism: { + theme: 'prism-themes/themes/prism-material-oceanic.css' + } + } +} +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/writing#syntax-highlighting) را برای اطلاعات بیشتر ببینید +:: + +### Extend Markdown Parsing + +علامت گذاری در اصل از برجسته کردن خطوط درون بلوک کد یا نام فایل ها پشتیبانی نمی کند. ماژول محتوا با نحو مرسوم خود به آن اجازه می دهد. شماره‌های خط به تگ 'pre' در ویژگی‌های خط داده اضافه می‌شوند و نام فایل به 'span' با کلاس 'filename' تبدیل می‌شود، بنابراین می‌توانید به آن استایل دهید. +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/writing#codeblocks) برای اطلاعا بیشتر ببینید +:: + +### تولید فهرست مطالب + +یک ویژگی آرایه toc (جدول مطالب) به داکیومنت شما تزریق می‌شود و همه سرفصل‌ها را با عناوین و شناسه‌هایشان فهرست می‌کند، بنابراین می‌توانید به آنها لینک دهید.. + +```html{}[pages/blog/_slug.vue] + +``` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/writing#table-of-contents) را برای اظلاعات بیشتر ببینید +:: + +### Powerful query builder API (MongoDB-like) + +ماژول محتوا دارای یک API سازنده پرس و جو قدرتمند مشابه MongoDB است که به شما امکان می دهد JSON هر دایرکتوری را در 'http://localhost:3000/_content/' به راحتی ببینید. نقطه پایانی در درخواست GET و POST قابل دسترسی است، بنابراین می توانید از پارامترهای پرس و جو استفاده کنید. + +`http://localhost:3000/_content/articles?only=title&only=description&limit=10` + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/advanced/#api-endpoint) را برای اطلاعات بیشتر ببینید +:: + +### توسعه با هوک + +می توانید از هوک برای گسترش ماژول استفاده کنید تا بتوانید قبل از ذخیره شدن یک سند، داده ها را به آن اضافه کنید. + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/advanced#hooks) را برای اطلاعات بیشتر ببینید +:: + +### ادغام با nuxtjs/feed@ + +در مورد مقالات، محتوا می تواند برای تولید فیدهای خبری از ماژول زیر استفاده کند [@nuxtjs/feed](https://www.npmjs.com/package/@nuxtjs/feed). + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/integrations/#nuxtjsfeed) برای اطلاعات بیشتر ببنید +:: + +### پشتیبانی از تولید سایت استاتیک + +ماژول محتوا با تولید سایت ایستا با استفاده از "nuxt generate" کار می کند. همه مسیرها به لطف ویژگی خزنده nuxt به طور خودکار ایجاد می شوند. + +::alert{type="warning"} +اگر از Nuxt <2.13 استفاده می کنید و باید مسیرهای پویا را مشخص کنید، می توانید این کار را با استفاده از ویژگی generate و با استفاده از @nuxt/content به صورت برنامه ریزی شده انجام دهید. +:: + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/advanced#programmatic-usage) برای اطلاعات بیشتر و نحوه استفاده ببینید +:: + +### What's next + +::alert{type="next"} +آموزشهای ما را ببینید [How to Create a Blog with Nuxt Content](/tutorials/creating-blog-with-nuxt-content) +:: + +::alert{type="next"} +لینک [content module docs](https://content.nuxtjs.org/) برای اطلاعات بیتشر و برنامه ها بیشتر ببینید +:: diff --git a/content/fa/events/index.md b/content/fa/events/index.md new file mode 100644 index 0000000000..8b68e70e30 --- /dev/null +++ b/content/fa/events/index.md @@ -0,0 +1,7 @@ +--- +template: events +title: Events +description: Discover and subscribe to future events featuring Nuxt content, and watch previous talks from the core team and the community +heroTitle: 'Events' +heroDescription: 'Discover and subscribe to future events featuring Nuxt content, and watch previous talks from the core team and the community' +--- diff --git a/content/fa/examples/1.routing/1.hello-world.md b/content/fa/examples/1.routing/1.hello-world.md new file mode 100644 index 0000000000..488636f627 --- /dev/null +++ b/content/fa/examples/1.routing/1.hello-world.md @@ -0,0 +1,21 @@ +--- +title: Hello World +description: Routing with NuxtLink component showing page rendered on server side and on client side +category: routing +--- + +# Hello World + +Routing with NuxtLink component showing page rendered on server side and on client side + +--- + +In this example: + +`pages/index.vue` and `pages/about.vue` show how Nuxt server renders the page on first load or on hard refresh and renders the page on client side when navigating using the `` component. + +::alert{type="next"} +Learn more in the Get Started book in the [Installation](/docs/get-started/installation) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/hello-world?fontsize=14&hidenavigation=1&theme=dark&view=editor"} diff --git a/content/fa/examples/1.routing/2.active-link-classes.md b/content/fa/examples/1.routing/2.active-link-classes.md new file mode 100644 index 0000000000..dcf1f27f76 --- /dev/null +++ b/content/fa/examples/1.routing/2.active-link-classes.md @@ -0,0 +1,25 @@ +--- +title: Active Link Classes +description: Change the default NuxtLink classes and style the active and exact active classes as well as disable prefetch for a specific link +category: routing +--- + +# Active Link Classes + +Change the default NuxtLink classes and style the active and exact active classes as well as disable prefetch for a specific link + +--- + +In this example: + +`layouts/default.vue` shows the styles for `nuxt-link-active` and `nuxt-link-exact-active`. + +::alert{type="next"} +Learn more about [vue routers](https://router.vuejs.org/api/#exact-active-class) active and exact active classes. +:: + +::alert{type="next"} +Learn more about active classes in the Features book in the [Nuxt Components](/docs/features/nuxt-components#link-classes) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/active-link-classes?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/1.routing/3.dynamic-pages.md b/content/fa/examples/1.routing/3.dynamic-pages.md new file mode 100644 index 0000000000..ab7c2a7422 --- /dev/null +++ b/content/fa/examples/1.routing/3.dynamic-pages.md @@ -0,0 +1,25 @@ +--- +title: Dynamic Pages +description: Using dynamic pages to fetch data from an API and populate those pages +category: routing +--- + +# Dynamic Pages + +Using dynamic pages to fetch data from an API and populate those pages + +--- + +In this example: + +`pages/_slug.vue` shows data coming from the route params. + +`pages/index.vue` fetches our mountains from our API. + +`pages/_continent/_mountain.vue` shows the detail page for each mountain in each continent. + +::alert{type="next"} +Learn more in the Directory Structure book in the [pages](/docs/directory-structure/pages) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/dynamic-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2F_continent%2F_mountain.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/1.routing/4.nested-pages.md b/content/fa/examples/1.routing/4.nested-pages.md new file mode 100644 index 0000000000..e299c7a599 --- /dev/null +++ b/content/fa/examples/1.routing/4.nested-pages.md @@ -0,0 +1,25 @@ +--- +title: Nested Pages +description: How to use the Nuxt Child component to create parent and child pages. +category: routing +--- + +# Nested Pages + +How to use the Nuxt Child component to create parent and child pages. + +--- + +In this example: + +`pages/parent.vue` contains the `` component. Everything on this page will be seen on both the parent and child pages. + +`pages/parent/index.vue` contains text that will be replaced when the child links are clicked. + +`pages/parent/child.vue` and `pages/parent/child2.vue` will be rendered as parent/child and parent/child2. + +::alert{type="next"} +Learn more in the Features book in the [Nuxt Components](/docs/features/nuxt-components#the-nuxtchild-component) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/nested-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2Fparent.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/1.routing/index.md b/content/fa/examples/1.routing/index.md new file mode 100644 index 0000000000..a0931383c9 --- /dev/null +++ b/content/fa/examples/1.routing/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: false + redirect: /examples/routing/hello-world +--- diff --git a/content/fa/examples/10.modules/1.local.md b/content/fa/examples/10.modules/1.local.md new file mode 100644 index 0000000000..a31281ce2e --- /dev/null +++ b/content/fa/examples/10.modules/1.local.md @@ -0,0 +1,23 @@ +--- +title: Local Module +description: Local Module for setting up a tunnel using ngrok +category: modules +--- + +# Local Module + +Local Module for setting up a tunnel using ngrok + +--- + +In this example: + +- `modules/ngrok/index.js` adds a public URL from ngrok to the Nuxt CLI when in dev mode. +- `pages/index.vue` shows the public URL from ngrok. +- `nuxt.config.js` registers our module using the `buildModules` property. + +::alert{type="next"} +Learn more in the Directory Structure book in the [modules](/docs/directory-structure/modules) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/local-module?fontsize=14&hidenavigation=1&module=%2Fmodules%2Fngrok%2Findex.js&theme=dark&view=editor"} diff --git a/content/fa/examples/10.modules/2.axios.md b/content/fa/examples/10.modules/2.axios.md new file mode 100644 index 0000000000..f4e8f657e4 --- /dev/null +++ b/content/fa/examples/10.modules/2.axios.md @@ -0,0 +1,30 @@ +--- +title: Axios usage +description: In the first example we show how to use the env property in our `nuxt.config.js` file to add the URL of our API so that we can then easily make calls to it without having to use the URL on our page +category: modules +--- + +# Axios usage + +In the first example we show how to use the env property in our `nuxt.config.js` file to add the URL of our API so that we can then easily make calls to it without having to use the URL on our page + +--- + +In this example: + +`nuxt.config.js` contains : + +- the `publicRuntimeConfig` property to add the URL of our API. +- the `modules` property to register our `@nuxtjs/axios` module. + +`pages/index.vue` - uses `$axios` to fetch our data and `$config` to retrieve our API URL. + +::alert{type="next"} +Learn more about the [axios module](https://axios.nuxtjs.org/). +:: + +::alert{type="next"} +Learn more in the Directory Structure book in the [nuxt-config](/docs/directory-structure/nuxt-config) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/axios-usage?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"} diff --git a/content/fa/examples/10.modules/index.md b/content/fa/examples/10.modules/index.md new file mode 100644 index 0000000000..ce33e58665 --- /dev/null +++ b/content/fa/examples/10.modules/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/modules/local +--- diff --git a/content/fa/examples/2.data-fetching/1.async-data.md b/content/fa/examples/2.data-fetching/1.async-data.md new file mode 100644 index 0000000000..9f02baaea7 --- /dev/null +++ b/content/fa/examples/2.data-fetching/1.async-data.md @@ -0,0 +1,25 @@ +--- +title: asyncData Hook +description: In this example we use asyncData to fetch our data from our API. +category: dataFetching +--- + +# asyncData Hook + +In this example we use asyncData to fetch our data from our API. + +--- + +In this example: + +`pages/index.vue` and `pages/posts/_id` use the `asyncData` hook and the `$http` module to fetch our list of mountains from our API. + +::alert{type="next"} +Learn more about the [http module](https://http.nuxtjs.org/). +:: + +::alert{type="next"} +Learn more about the asyncData hook the Features book in the [Data Fetching](/docs/features/data-fetching) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/async-data-hook?fontsize=14&hidenavigation=1&theme=dark&view=editor"} diff --git a/content/fa/examples/2.data-fetching/2.fetch-hook.md b/content/fa/examples/2.data-fetching/2.fetch-hook.md new file mode 100644 index 0000000000..5f28541f54 --- /dev/null +++ b/content/fa/examples/2.data-fetching/2.fetch-hook.md @@ -0,0 +1,29 @@ +--- +title: fetch Hook +description: In this example we use the fetch hook to fetch data from components and from pages +category: dataFetching +--- + +# fetch Hook + +In this example we use the fetch hook to fetch data from components and from pages + +--- + +In this example: + +`pages/index.vue` imports `components/Mountains.vue` which uses the `fetch` hook and the `$http` module to fetch our data at component level while `pages/mountains/_slug` fetches the data at page level and include: + +- `$fetchState.pending` to show a loading text when the data is loading. +- `$fetchState.error` to show an error message when we can't retrieve the data. +- `$fetch` to fetch the data again when clicked. + +::alert{type="next"} +Learn more about the [http module](https://http.nuxtjs.org/). +:: + +::alert{type="next"} +Learn more about the fetch hook in the Features book in the [Data Fetching](/docs/features/data-fetching) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/fetch-hook?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FMountains.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/2.data-fetching/index.md b/content/fa/examples/2.data-fetching/index.md new file mode 100644 index 0000000000..0885b9acc4 --- /dev/null +++ b/content/fa/examples/2.data-fetching/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/data-fetching/async-data +--- diff --git a/content/fa/examples/3.assets-management/1.pre-processors.md b/content/fa/examples/3.assets-management/1.pre-processors.md new file mode 100644 index 0000000000..e7df7c55cb --- /dev/null +++ b/content/fa/examples/3.assets-management/1.pre-processors.md @@ -0,0 +1,29 @@ +--- +title: Pre-processors +description: Configuration your application to use pug and sass with style resources to easily add variables to all components. +category: assetManagement +--- + +# Pre-processors + +Configuration your application to use pug and sass with style resources to easily add variables to all components. + +--- + +In this example: + +`pages/index.vue` uses pug as a template language and sass for styling. + +`nuxt.config.js`: + +- registers the style resources module. +- contains a `styleResources` property to add `assets/variables.scss`. +- contains a `css` property to add `assets/main.scss`. + +`package.json` shows the dependencies needed. + +::alert{type="next"} +Learn more in the Features book in the [Configuration](/docs/features/configuration#pre-processors) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/pre-processors?fontsize=14&hidenavigation=1&theme=dark&view=editor"} diff --git a/content/fa/examples/3.assets-management/2.webpack-assets.md b/content/fa/examples/3.assets-management/2.webpack-assets.md new file mode 100644 index 0000000000..805c796b78 --- /dev/null +++ b/content/fa/examples/3.assets-management/2.webpack-assets.md @@ -0,0 +1,29 @@ +--- +title: webpack Assets +description: Use the assets folder to add css, images and fonts to your application +category: assetManagement +--- + +# webpack Assets + +Use the assets folder to add css, images and fonts to your application + +--- + +In this example: + +`pages/index.vue` shows: + +- how to add an image from the assets folder. +- how to add a background image from the assets folder using CSS. +- how to add dynamic images from the assets folder using the data property. + +`nuxt.config.js` contains the `css` property for globally adding a css file. + +`assets/main.css` shows how to reference the DMSans fonts from the assets folder using the `@font-face` rule. + +::alert{type="next"} +Learn more in the Directory Structure book in the [Assets](/docs/directory-structure/assets) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/webpack-assets?fontsize=14&hidenavigation=1&theme=dark&view=editor"} diff --git a/content/fa/examples/3.assets-management/index.md b/content/fa/examples/3.assets-management/index.md new file mode 100644 index 0000000000..88933378ac --- /dev/null +++ b/content/fa/examples/3.assets-management/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/assets-management/pre-processors +--- diff --git a/content/fa/examples/4.transitions/1.transitions.md b/content/fa/examples/4.transitions/1.transitions.md new file mode 100644 index 0000000000..8e1f69c415 --- /dev/null +++ b/content/fa/examples/4.transitions/1.transitions.md @@ -0,0 +1,24 @@ +--- +title: Nuxt transitions +description: Adding default and custom transitions to your pages and layouts +category: transitions +--- + +# Nuxt transitions + +Adding default and custom transitions to your pages and layouts + +--- + +In this example: + +- `pages/index.vue` and `pages/fade.vue` use the default page transiton. +- `pages/bounce.vue` uses the `transition` property with a bounce transition +- `pages/slide.vue` uses the `transition` property with a slide-bottom transition. +- `layout/default.vue` contains the classes for all transitions. + +::alert{type="next"} +Learn more in the Features book in the [Transitions](/docs/features/transitions) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/transitions/nuxt-transitions?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/4.transitions/index.md b/content/fa/examples/4.transitions/index.md new file mode 100644 index 0000000000..bbb6a45618 --- /dev/null +++ b/content/fa/examples/4.transitions/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/transitions/transitions +--- diff --git a/content/fa/examples/5.seo/1.html-head.md b/content/fa/examples/5.seo/1.html-head.md new file mode 100644 index 0000000000..3495f6d2bb --- /dev/null +++ b/content/fa/examples/5.seo/1.html-head.md @@ -0,0 +1,29 @@ +--- +title: SEO HTML Head +description: In this example we use the head property to show how to get good SEO. +category: seo +--- + +# SEO HTML Head + +In this example we use the head property to show how to get good SEO. + +--- + +In this example: + +`nuxt.config.js` uses the `head` property to show a `title`, `titleTemplate`, and `meta` including `description`. It also shows how to add an external google font using the link property and some JS using the script property. The lang and amp attributes are set with the `htmlAttrs` property. + +`pages/index.vue` uses the head property as a function with dynamic data and uses the google font. + +`pages/about.vue` uses the head property as an object. + +::alert{type="next"} +Learn more about the options available for `head`, in the [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties). +:: + +::alert{type="next"} +Learn more about meta tags in the Features book in the [Meta Tags and SEO](/docs/features/meta-tags-seo) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-html-head?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"} diff --git a/content/fa/examples/5.seo/2.twitter-og.md b/content/fa/examples/5.seo/2.twitter-og.md new file mode 100644 index 0000000000..b4c9d183a8 --- /dev/null +++ b/content/fa/examples/5.seo/2.twitter-og.md @@ -0,0 +1,29 @@ +--- +title: SEO Twitter and Open Graph +description: In this example we create a component to add our Twitter and Open Graph tags for when sharing on social media. +category: seo +--- + +# SEO Twitter and Open Graph + +In this example we create a component to add our Twitter and Open Graph tags for when sharing on social media. + +--- + +In this example: + +`components/SocialHead` uses the `head` property to show `meta` for both Twitter and Open Graph social sharing using props. + +`pages/mountains/_slug.vue` uses the `SocialHead` component passing the mountain's title, description and image as the values for props. It also uses the head tag to set the canonical link. + +`nuxtconfig.js` shows the head tag with default meta for social sharing for when the `SocialHead` component is not used as well as the canonical link. + +::alert{type="next"} +Learn more about the options available for `head`, in the [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties). +:: + +::alert{type="next"} +Learn more about meta tags in the Features book in the [Meta Tags and SEO](/docs/features/meta-tags-seo) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-twitter-og?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FSocialHead.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/5.seo/index.md b/content/fa/examples/5.seo/index.md new file mode 100644 index 0000000000..0e7fe7c885 --- /dev/null +++ b/content/fa/examples/5.seo/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/seo/html-head +--- diff --git a/content/fa/examples/6.loading/1.customize-nuxt-loading.md b/content/fa/examples/6.loading/1.customize-nuxt-loading.md new file mode 100644 index 0000000000..d618c63408 --- /dev/null +++ b/content/fa/examples/6.loading/1.customize-nuxt-loading.md @@ -0,0 +1,23 @@ +--- +title: Customize Nuxt Loading +description: Create a custom loading component to replace the default loader +category: loading +--- + +# Customize Nuxt Loading + +Create a custom loading component to replace the default loader + +--- + +In this example: + +`nuxt.config.js` contains the `loading` property which modifies the default loader + +`pages/loading.vue` programmatically starts the loader so we force the page to take 2 seconds to load + +::alert{type="next"} +Learn more in the Features book in the [Loading](/docs/features/loading) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-nuxt-loading?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"} diff --git a/content/fa/examples/6.loading/2.customize-loading-indicator.md b/content/fa/examples/6.loading/2.customize-loading-indicator.md new file mode 100644 index 0000000000..1d7a16c512 --- /dev/null +++ b/content/fa/examples/6.loading/2.customize-loading-indicator.md @@ -0,0 +1,24 @@ +--- +title: Customize Nuxt Loading Indicator +description: Customize the Nuxt Loading Indicator for when ssr is set to false +category: loading +--- + +# Customize Nuxt Loading Indicator + +Customize the Nuxt Loading Indicator for when ssr is set to false + +--- + +In this example: + +`nuxt.config.js` contains: + +- `ssr: false` so we only have client side rendering +- `loadingIndicator` property to modify the default spinner + +::alert{type="next"} +Learn more in the Features book in the [Loading](/docs/features/loading) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-loading-indicator?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"} diff --git a/content/fa/examples/6.loading/3.custom-loading-component.md b/content/fa/examples/6.loading/3.custom-loading-component.md new file mode 100644 index 0000000000..29dd82322e --- /dev/null +++ b/content/fa/examples/6.loading/3.custom-loading-component.md @@ -0,0 +1,25 @@ +--- +title: Custom Loading Component +description: Create a custom loading component, modify the default loader as well as the spinner for spas +category: loading +--- + +# Custom Loading Component + +Create a custom loading component, modify the default loader as well as the spinner for spas + +--- + +In this example: + +`components/LoadingBar.vue` shows a custom loading spinner to use instead of the default loading bar. + +`nuxt.config.js` contains the `loading` property which imports the loading component + +`pages/loading.vue` programmatically starts the loader so we force the page to take 2 seconds to load + +::alert{type="next"} +Learn more in the Features book in the [Loading](/docs/features/loading) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/custom-loading-component?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FLoadingBar.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/6.loading/index.md b/content/fa/examples/6.loading/index.md new file mode 100644 index 0000000000..0cf9712b9c --- /dev/null +++ b/content/fa/examples/6.loading/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/loading/customize-nuxt-loading +--- diff --git a/content/fa/examples/7.miscellaneous/1.layouts.md b/content/fa/examples/7.miscellaneous/1.layouts.md new file mode 100644 index 0000000000..ac02aae09a --- /dev/null +++ b/content/fa/examples/7.miscellaneous/1.layouts.md @@ -0,0 +1,23 @@ +--- +title: Layouts +description: Using layouts to show different ways to structure your page +category: miscellaneous +--- + +# Layouts + +Using layouts to show different ways to structure your page + +--- + +In this example: + +- `layouts/default.vue` is used in the home page as no layout property is defined +- `layouts/auth.vue` is used in the /login page with the `layout` property set to 'auth' +- `layouts/profile.vue` is used in the /profile page the `layout` property set to 'profile' + +::alert{type="next"} +Learn more in the Concepts book in the [Views](/docs/concepts/views) chapter or in the Directory Structure book in the [Layouts](/docs/directory-structure/layouts) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/layouts?fontsize=14&hidenavigation=1&module=%2Fpages%2Fprofile.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/7.miscellaneous/2.lazy-loading-components.md b/content/fa/examples/7.miscellaneous/2.lazy-loading-components.md new file mode 100644 index 0000000000..d7464acbf1 --- /dev/null +++ b/content/fa/examples/7.miscellaneous/2.lazy-loading-components.md @@ -0,0 +1,28 @@ +--- +title: Lazy Loading Components +description: Use fetch in your components to fetch data from an API as well as auto importing and lazy loading components +category: miscellaneous +--- + +# Lazy Loading Components + +Use fetch in your components to fetch data from an API as well as auto importing and lazy loading components + +--- + +In this example: + +`components/MountainsList.vue` uses fetch to fetch data from an API and uses: + +- `$fetchState.pending` to show a loading message when waiting for the data to load. +- `$fetchState.error` to show an error message if the component does not load. + +`pages/index.vue` shows how to lazy load a component by prefixing it with the word "Lazy". + +`nuxt.config.js` shows `components: true` for auto importing components. + +::alert{type="next"} +Learn more in the Directory Structure book in the [Components](/docs/directory-structure/components) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/lazy-loading-components?fontsize=14&hidenavigation=1&theme=dark&view=editor"} diff --git a/content/fa/examples/7.miscellaneous/3.vuex-store.md b/content/fa/examples/7.miscellaneous/3.vuex-store.md new file mode 100644 index 0000000000..2bef9323f6 --- /dev/null +++ b/content/fa/examples/7.miscellaneous/3.vuex-store.md @@ -0,0 +1,23 @@ +--- +title: Vuex Store +description: In the first example we show how the store works using a todo app +category: miscellaneous +--- + +# Vuex Store + +In the first example we show how the store works using a todo app + +--- + +In this example: + +`store/todos.js` stores state and mutations for our todo list. + +`pages/index.vue` imports the `mapMutations` from the store and uses `computed` properties and `methods` to add and remove todos from the store. + +::alert{type="next"} +Learn more in the Directory Structure book in the [store](/docs/directory-structure/store) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/14_store?fontsize=14&hidenavigation=1&theme=dark&view=editor"} diff --git a/content/fa/examples/7.miscellaneous/4.helpers.md b/content/fa/examples/7.miscellaneous/4.helpers.md new file mode 100644 index 0000000000..26127a9703 --- /dev/null +++ b/content/fa/examples/7.miscellaneous/4.helpers.md @@ -0,0 +1,29 @@ +--- +title: Nuxt Helpers +description: Using the $nuxt helpers with $nuxt.isOnline, renderedOn, refresh(), onNuxtReady +category: miscellaneous +--- + +# Nuxt Helpers + +Using the $nuxt helpers with $nuxt.isOnline, renderedOn, refresh(), onNuxtReady + +--- + +In this example: + +`pages/index.vue` shows: + +- `$nuxt.isOnline` and `$nuxt.isOffline` - tells the user if they are online or offline. +- `renderedOn` - prints a message telling us if the page is rendered on the server or client. +- `$nuxt.refresh()` - refreshes data without refreshing the page. + +`plugins/nuxt-ready.client.js` shows: + +- `window.onNuxtReady` - logs a message to the console when Nuxt is ready. + +::alert{type="next"} +Learn more in the Concepts book in the [Context and Helpers](/docs/concepts/context-helpers#helpers) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/nuxt-helpers?fontsize=14&hidenavigation=1&theme=dark&view=editor"} diff --git a/content/fa/examples/7.miscellaneous/index.md b/content/fa/examples/7.miscellaneous/index.md new file mode 100644 index 0000000000..c1d6010992 --- /dev/null +++ b/content/fa/examples/7.miscellaneous/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/miscellaneous/layouts +--- diff --git a/content/fa/examples/8.middlewares/1.router.md b/content/fa/examples/8.middlewares/1.router.md new file mode 100644 index 0000000000..e421fb8db6 --- /dev/null +++ b/content/fa/examples/8.middlewares/1.router.md @@ -0,0 +1,27 @@ +--- +title: Router Middleware +description: Using router middleware to set a class to the body so we can then style differently depending on the route +category: middleware +--- + +# Router Middleware + +Using router middleware to set a class to the body so we can then style differently depending on the route + +--- + +In this example: + +`store/class.js` sets a class to the body. + +`middleware/class.js` uses router middleware to set a class before we enter the route. + +`components/Navigation.vue` changes the font size for the route with the name of `router-middleware`. + +`nuxt.config.js` contains the `router` property to activate the middleware. + +::alert{type="next"} +Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#router-middleware) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/router-middleware?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"} diff --git a/content/fa/examples/8.middlewares/2.named.md b/content/fa/examples/8.middlewares/2.named.md new file mode 100644 index 0000000000..bdaa5267a7 --- /dev/null +++ b/content/fa/examples/8.middlewares/2.named.md @@ -0,0 +1,27 @@ +--- +title: Named Middleware +description: Using named middleware to authenticate a user using the store and allow them to visit a page once authenticated +category: middleware +--- + +# Named Middleware + +Using named middleware to authenticate a user using the store and allow them to visit a page once authenticated + +--- + +In this example: + +`pages/named-middleware.vue` contains a `middleware` property with the value of `auth` which is called before a user enters the route. + +`middleware/auth.js` checks to see if the user is authenticated and if they aren't it redirects them to the auth page. + +`pages/auth.vue` uses the store to authenticate the user. + +`store/auth.js` sets the the user and password values and redirects the user. + +::alert{type="next"} +Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#named-middleware) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/named-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fnamed-middleware.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/8.middlewares/3.anonymous.md b/content/fa/examples/8.middlewares/3.anonymous.md new file mode 100644 index 0000000000..7144bc3bf8 --- /dev/null +++ b/content/fa/examples/8.middlewares/3.anonymous.md @@ -0,0 +1,23 @@ +--- +title: Anonymous Middleware +description: Using anonymous middleware to show the analytics of how many times a user visits a page. +category: middleware +--- + +# Anonymous Middleware + +Using anonymous middleware to show the analytics of how many times a user visits a page. + +--- + +In this example: + +`pages/anonymous-middleware.vue` contains a middleware function which uses the store to call the increment mutation with results from the store displayed on the page. + +`store/analytics.js` sets the `pageVisits` to 0 and increments the visits every time the increment function is called. + +::alert{type="next"} +Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#anonymous-middleware) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/anonymous-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fanonymous-middleware.vue&theme=dark&view=editor"} diff --git a/content/fa/examples/8.middlewares/index.md b/content/fa/examples/8.middlewares/index.md new file mode 100644 index 0000000000..8858fae8f6 --- /dev/null +++ b/content/fa/examples/8.middlewares/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/middlewares/router +--- diff --git a/content/fa/examples/9.plugins/1.vue.md b/content/fa/examples/9.plugins/1.vue.md new file mode 100644 index 0000000000..8ec7e007f1 --- /dev/null +++ b/content/fa/examples/9.plugins/1.vue.md @@ -0,0 +1,27 @@ +--- +title: Vue Plugins +description: In this example we show how to add a vue plugin to your application +category: plugins +--- + +# Vue Plugins + +In this example we show how to add a vue plugin to your application + +--- + +In this example: + +`plugins/vue-tooltip.js` imports our tooltip and tells Vue to use it. + +`pages/index.vue` uses our plugin. + +`nuxt.config.js` contains the `plugins` property to register our plugin and the `css` property to add our tooltip css. + +`package.json` shows our tooltip package has been installed. + +::alert{type="next"} +Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#vue-plugins) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/vue-plugins?fontsize=14&hidenavigation=1&module=%2Fplugins%2Fvue-tooltip.js&theme=dark&view=editor"} diff --git a/content/fa/examples/9.plugins/2.client-only.md b/content/fa/examples/9.plugins/2.client-only.md new file mode 100644 index 0000000000..43a4375771 --- /dev/null +++ b/content/fa/examples/9.plugins/2.client-only.md @@ -0,0 +1,23 @@ +--- +title: Client Only Plugins +description: In this example we show how to use a plugin so that it is only available on the client side +category: plugins +--- + +# Client Only Plugins + +In this example we show how to use a plugin so that it is only available on the client side + +--- + +In this example: + +`plugins/client-only.client.js` uses the `window.alert()` function which is not available on server side. + +`nuxt.config.js` contains the `plugins` property which registers the plugin on the client side by adding the `.client` extension. + +::alert{type="next"} +Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#client-or-server-side-only) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/client-only-plugins?fontsize=14&hidenavigation=1&module=%2Fplugins%2Fclient-only.client.js&theme=dark&view=editor"} diff --git a/content/fa/examples/9.plugins/3.external-packages.md b/content/fa/examples/9.plugins/3.external-packages.md new file mode 100644 index 0000000000..8e38ed44b1 --- /dev/null +++ b/content/fa/examples/9.plugins/3.external-packages.md @@ -0,0 +1,31 @@ +--- +title: External Packages Plugin +description: In this example we show how to use a plugin with an external package - axios +category: plugins +--- + +# External Packages Plugin + +In this example we show how to use a plugin with an external package - axios + +--- + +In this example: + +`plugins/axios.js` intercepts the `$axios` call using the `onError()` function. + +`pages/index.vue` uses `$axios` to fetch our data from an API. + +`pages/mountains/_slug.vue` uses `$axios` to fetch our data from an API with the id coming from route params. + +`pages/404.vue` is the page that is called when there is an error. + +`nuxt.config.js` contains the `module` property and `plugin` property to register our module and plugin. + +`package.json` shows our module `@nuxtjs/axios` has been installed. + +::alert{type="next"} +Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#external-packages) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/external-packages-plugin?fontsize=14&hidenavigation=1&module=%2Fplugins%2Faxios.js&theme=dark&view=editor"} diff --git a/content/fa/examples/9.plugins/4.custom.md b/content/fa/examples/9.plugins/4.custom.md new file mode 100644 index 0000000000..c22d9572a3 --- /dev/null +++ b/content/fa/examples/9.plugins/4.custom.md @@ -0,0 +1,34 @@ +--- +title: Custom Plugins +description: In this example we show how you how you can create your own plugin +category: plugins +--- + +# Custom Plugins + +In this example we show how you how you can create your own plugin + +--- + +In this example: + +`plugins/hello.js` - logs a message to the console with a dynamic message. + +`store/index.js` - stores our dynamic message from our input. + +`pages/index.vue` uses the hello plugin to: + +- log a message to the console on mounted. +- log a message to the console containing the value from our input. + +`plugins/nuxt-api.js` - fetches data from our API. + +`pages/api-plugin.vue` - uses our plugin to fetch and show the data from our API. + +`nuxt.config.js` - registers our plugins using the `plugins` property. + +::alert{type="next"} +Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#inject-in-root--context) chapter. +:: + +:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/custom-plugins?fontsize=14&hidenavigation=1&module=%2Fplugins%2Fnuxt-api.js&theme=dark&view=editor"} diff --git a/content/fa/examples/9.plugins/index.md b/content/fa/examples/9.plugins/index.md new file mode 100644 index 0000000000..83ec56748c --- /dev/null +++ b/content/fa/examples/9.plugins/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /examples/plugins/vue +--- diff --git a/content/fa/examples/index.md b/content/fa/examples/index.md new file mode 100644 index 0000000000..c411463c84 --- /dev/null +++ b/content/fa/examples/index.md @@ -0,0 +1,11 @@ +--- +template: + nested: guide + self: guide +title: Examples +navigation: + exclusive: true + collapse: true + redirect: /examples/routing/hello-world +layout.aside: true +--- diff --git a/content/fa/index.md b/content/fa/index.md new file mode 100644 index 0000000000..68cdb0f2a8 --- /dev/null +++ b/content/fa/index.md @@ -0,0 +1,282 @@ +--- +template: blank +title: 'The Intuitive Vue Framework' +description: 'Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful.' +bgClass: 'bg-white' +--- + +::home-hero +#title +The Intuitive Vue
Framework + +#description +Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful. + +#primary-button +:app-button[39K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } + +#secondary-button +:app-button[Get started]{ to="/docs/get-started/installation" } +:: + +::home-learn-master +--- +category: Learn +--- + +#title +[Easy]{.text-primary} to learn. [Easy]{.text-primary} to master + +#description +Learn everything you need to know, from beginner to master. + +#bottom +:app-button[Start learning]{to="/docs/get-started/installation"} +:: + +::home-features +--- +category: Features +--- + +::section-content-item +--- +title: Zero Configuration +description: 'Start coding your app right away, Nuxt takes care of the rest.' +image: /img/home/discover/dx/zero-config.svg +--- +:: + +::section-content-item +--- +title: File-system Routing +description: 'Automatic routing and code-splitting for every page.' +image: /img/home/discover/dx/file-system-routing.svg +--- +:: + +::section-content-item +--- +title: Rendering Modes +description: 'Switch between static-site generation or on-demand server rendering.' +image: /img/home/discover/dx/hybrid.svg +--- +:: + +::section-content-item +--- +title: Data Fetching +description: 'Fetch your content from any source in your Vue components, SSR ready.' +image: /img/home/discover/dx/fetch.svg +--- +:: + +::section-content-item +--- +title: Strong Conventions +description: 'Efficient teamwork with a strong directory structure and conventions.' +image: /img/home/discover/dx/conventions.svg +--- +:: + +::section-content-item +--- +title: SEO Friendly +description: 'Meta tag management and faster time-to-content for great indexing.' +image: /img/home/discover/dx/seo.svg +--- +:: + +::section-content-item +--- +title: Components Auto-import +description: 'Use your components, Nuxt will import them with smart code-splitting.' +image: /img/home/discover/dx/auto-inject.svg +--- +:: + +::section-content-item +--- +title: Modules Ecosystem +description: 'Extend your app with 160+ Nuxt modules and create your own.' +image: /img/home/discover/dx/modular.svg +--- +:: + +#title +Intuitive [D]{.text-primary}eveloper E[x]{.text-primary}perience + +#description +Nuxt is shipped with plenty of features to boost developer productivity and the end user experience. +:: + +::home-discover-partners +--- +category: Partners +--- + +#title +Sustainable [_Development_]{.text-primary} + +#description +Nuxt development is carried out by passionate developers, but the amount of effort needed to maintain and develop new features is not sustainable without proper financial backing. We are thankful for our sponsors and partners, who help make Nuxt possible.
+ +#partners-card + ::home-partners-card + --- + icon: technology.svg + category: technology + --- + #title + Technology partners + + #description + Technology partners offer services that empower Nuxt developers, such as CMS, Hosting, Database, and more. + + #button + Discover our technology partners + :: + + ::home-partners-card + --- + icon: agency.svg + category: agency + --- + #title + Agency partners + + #description + Agency partners are trusted web and consulting agencies that can provide Nuxt development and support for your projects. + + #button + Find a Nuxt expert + :: + +#bottom + :app-button[Become a partner]{href="mailto:partners@nuxtlabs.com"} +:: + +::home-learn-guides +--- +category: Learn +--- + +::section-content-item +--- +title: Documentation +description: 'Discover Nuxt concepts and find a complete API reference.' +image: /img/home/learn/guides/gem-1.svg +to: '/docs/get-started/installation' +hoverClass: 'hover:bg-sky-darker' +--- +:: + +::section-content-item +--- +title: Examples +description: "Learn by examples produced by the community." +image: /img/home/learn/guides/gem-2.svg +to: '/examples' +hoverClass: 'hover:bg-sky-darker' +--- +:: + +::section-content-item +--- +title: Releases +description: 'Find out what has changed before upgrading.' +image: /img/home/learn/guides/gem-3.svg +to: '/releases' +hoverClass: 'hover:bg-sky-darker' +--- +:: + +::section-content-item +--- +title: Master Courses +description: 'Watch a complete series of videos to learn Nuxt with our partner Vue School.' +image: /img/home/learn/guides/gem-4.svg +to: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite' +hoverClass: 'hover:bg-sky-darker' +--- +:: + +#title +Follow our [_Guides_]{.text-primary} + +#description +From an idea to a masterpiece, guides take you on the path to becoming a Nuxter. +:: + +::home-explore +--- +category: Explore +--- + +::section-content-item +--- +title: 'Deployments' +description: 'Extend and automate your workflow by using deployments for your favorite tools.' +image: '/img/home/explore/gem-explore-1.svg' +to: '/deployments' +hoverClass: 'hover:bg-sky-surface' +--- +:: +::section-content-item +--- +title: 'Modules' +description: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.' +image: '/img/home/explore/gem-explore-2.svg' +to: 'https://modules.nuxtjs.org' +hoverClass: 'hover:bg-sky-surface' +--- +:: +::section-content-item +--- +title: 'Themes' +description: 'See how a real world application is built using the Nuxt stack with the themes built by our partners.' +image: '/img/home/explore/gem-explore-3.svg' +to: '/themes' +hoverClass: 'hover:bg-sky-surface' +--- +:: + +#title +Moving forward? So much to [_Explore_]{.text-primary} + +#description +Discover powerful modules, integrate with your favorite providers and start quickly with themes. +:: + +::home-community +--- +category: Community +announcementsCategory: Announcements +eventsCategory: Events +articleLinkTitle: Get infos +--- + +#title +Sharing is [Caring]{.text-sky-lighter} + +#description +Discover articles from the framework team and community about Nuxt. Tips and tricks included! +:: + +::home-testimonials +--- +category: Community +--- +#title +Testimonials + +#description +Learn what the experts love about Nuxt. + +#testimonials + :::testimonials + --- + home: true + --- + ::: +:: diff --git a/content/fa/modules/index.md b/content/fa/modules/index.md new file mode 100644 index 0000000000..9b0800043a --- /dev/null +++ b/content/fa/modules/index.md @@ -0,0 +1,20 @@ +--- +template: blank +title: Modules +layout: + fluid: true +navigation: false +--- + +::page-hero +#title +Modules + +#description +Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community. + +#bottom + :modules-bottom-hero[Contribute on GitHub] +:: + +:modules-listing diff --git a/content/fa/partners/index.md b/content/fa/partners/index.md new file mode 100644 index 0000000000..fa3a0380a8 --- /dev/null +++ b/content/fa/partners/index.md @@ -0,0 +1,36 @@ +--- +template: blank +title: Partners +description: "Nuxt is an MIT licensed open source project and free to use. However, the maintenance effort is not sustainable without proper financial backing." +--- + +::page-hero +#title +Partners + +#description +Find your perfect match. Get help from an agency partner or find a technology provider. + +#bottom + :partners-bottom-hero +:: + +::partners-section +--- +category: technology +icon: 'technology.svg' +--- + +#category-title +Technology +:: + +::partners-section +--- +category: agency +icon: 'agency.svg' +--- + +#category-title +Agency +:: diff --git a/content/fa/releases/index.md b/content/fa/releases/index.md new file mode 100644 index 0000000000..9cd565f2c8 --- /dev/null +++ b/content/fa/releases/index.md @@ -0,0 +1,6 @@ +--- +template: releases +title: Release Notes +description: "Discover all the release notes for the Nuxt framework" +navigation: false +--- diff --git a/content/fa/showcases/index.md b/content/fa/showcases/index.md new file mode 100644 index 0000000000..2a2b4b0dc0 --- /dev/null +++ b/content/fa/showcases/index.md @@ -0,0 +1,25 @@ +--- +template: blank +title: 'Showcases' +description: 'Discover our selection of websites built with Nuxt.' +layout: + fluid: true +--- + +::page-hero{descriptionFullWidth} +#title +Showcases + +#description + Discover our selection of websites built with Nuxt. This collection is powered by [VueTelescope](https://vuetelescope.com). + +#bottomDesktop + Try out the browser extensions: + :showcases-bottom-hero +:: + +::showcases-listing +--- +id: 505 +--- +:: diff --git a/content/fa/sponsors/index.md b/content/fa/sponsors/index.md new file mode 100644 index 0000000000..f1b0e6f323 --- /dev/null +++ b/content/fa/sponsors/index.md @@ -0,0 +1,27 @@ +--- +template: blank +title: 'Sponsors' +description: "Nuxt is an MIT licensed open source project and free to use. However, the maintenance effort is not sustainable without proper financial backing." +layout: + fluid: true +--- + +::page-hero +#title +Sponsors + +#description +Nuxt solves front-end development issues, using Vue.js, Node.js and a suite of other open source tools such as Vite, Webpack, Babel and PostCSS. +If you use Nuxt in your daily work and feel that it has made your life easier, please consider backing us. +If you run a business and is using Nuxt in a revenue-generating product, it makes business sense to sponsor Nuxt development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the community and makes it easier to attract Nuxt developers. + +#bottom + :::sponsors-bottom-hero + --- + github: Sponsor on GitHub + opencollective: Sponsor on Open Collective + --- + ::: +:: + +:sustainability-section diff --git a/content/fa/support/index.md b/content/fa/support/index.md new file mode 100644 index 0000000000..e14e90871a --- /dev/null +++ b/content/fa/support/index.md @@ -0,0 +1,70 @@ +--- +template: blank +title: 'Enterprise Support' +description: 'Get technical support, report bugs or contribute to the Nuxt framework development.' +layout: + fluid: true +navigation: false +--- +::page-hero +#title +Enterprise Support + +#description +Get technical support, report bugs or contribute to the Nuxt framework development. +:: + +::support-container +#support-cards-list + ::support-card + --- + image: 'technical' + button: + text: 'Contact us' + url: 'mailto:support@nuxtlabs.com' + --- + #title + Technical support + #description + Contact us to book a slot for a private consulting session or audit of your project. + :: + + ::support-card + --- + image: 'report' + button: + text: 'Create an issue' + url: 'https://github.com/nuxt/nuxt.js/issues/new?assignees=&labels=bug-report&template=bug-report.md&title=' + --- + #title + Report a bug + #description + If anything isn't working like it's supposed to, open an issue on Github. + :: + + ::support-card + --- + image: 'suggest' + button: + text: 'Suggest an idea' + url: 'https://github.com/nuxt/nuxt.js/issues/new?assignees=&labels=feature-request&template=feature-request.md&title=' + --- + #title + Suggest a new feature or improvement + #description + Thanks to our community contributions, Nuxt keeps evolving with continuous features improvements. If you have an idea, feel free to propose it on Github Discussions. + :: + + ::support-card + --- + image: 'contribute' + button: + text: 'Contribute' + url: '/contribution-guide' + --- + #title + Contribute + #description + Start contributing to the framework development, documentation, or testing. + :: +:: diff --git a/content/fa/teams/index.md b/content/fa/teams/index.md new file mode 100644 index 0000000000..46bfc43dbe --- /dev/null +++ b/content/fa/teams/index.md @@ -0,0 +1,36 @@ +--- +template: blank +title: 'Teams' +description: 'The development of Nuxt is led by an international team. Our committed team works every day to move Nuxt forward.' +layout: + fluid: true +navigation: false +--- + +::page-hero +#title +Teams + +#description +The development of Nuxt and its ecosystem is led by an international team. Our committed team works every day to bring Nuxt forward. +:: + +::team-section +--- +teamName: framework +--- + +#title +[Framework]{.text-primary} +:: + +::team-section +--- +teamName: community +--- +#title +[Community]{.text-primary} + +#description +From contributors to advocates, the community is made of members with different horizons and skills. We are happy to see new members every day and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core). +:: diff --git a/content/fa/testimonials/index.md b/content/fa/testimonials/index.md new file mode 100644 index 0000000000..c9f660f9df --- /dev/null +++ b/content/fa/testimonials/index.md @@ -0,0 +1,7 @@ +--- +template: blog +title: Testimonials +description: Learn from experts what they love about Nuxt +--- + +:testimonials diff --git a/content/fa/themes/index.md b/content/fa/themes/index.md new file mode 100644 index 0000000000..b7c683442e --- /dev/null +++ b/content/fa/themes/index.md @@ -0,0 +1,45 @@ +--- +template: blog +title: Themes +description: 'See how a real world application is built using the Nuxt stack with the themes built by our partners.' +--- +::themes-list +--- +themes: + one: + title: Nuxt Argon Dashboard PRO + description: Nuxt Argon Dashboard PRO is built with over 200 individual components, giving you the freedom of choosing and combining. + image: /img/themes/argon_dashboard_pro.jpg + slug: one + price: $99 + href: https://www.creative-tim.com/product/nuxt-argon-dashboard-pro?partner=120213 + two: + title: Nuxt Argon Dashboard PRO Laravel + description: "All the functionality of a lightweight CMS out of the box, built using two of the most popular frameworks today: Nuxt and Laravel." + image: /img/themes/argon_dashboard_pro_laravel.jpg + slug: two + price: $149 + href: https://www.creative-tim.com/product/nuxt-argon-dashboard-pro-laravel?partner=120213 + three: + title: Nuxt Now UI Kit + description: A premium responsive Bootstrap 4 kit provided by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 1000+ elements and 11 templates. + image: /img/themes/nuxt_now_ui_kit.jpg + slug: three + price: $89 + href: https://www.creative-tim.com/product/nuxt-now-ui-kit-pro?partner=120213 + four: + title: Nuxt Black Dashboard PRO + description: "A beautiful Bootstrap 4 Admin Dashboard that comes in 2 versions: Dark and Light Mode." + image: /img/themes/nuxt_black_dashboard_pro.jpg + slug: four + price: $79 + href: https://www.creative-tim.com/product/nuxt-black-dashboard-pro?partner=120213 + five: + title: Nuxt Scutum Dashboard + description: Scutum Admin is a professional HTML5/CSS3 Material Design template based on UIkit Framework (v3) and Nuxt. + image: /img/themes/scutum_dashboard.jpg + slug: five + price: $26 + href: https://1.envato.market/scutum-nuxt +--- +:: diff --git a/content/fa/tutorials/0.creating-a-nuxt-module.md b/content/fa/tutorials/0.creating-a-nuxt-module.md new file mode 100644 index 0000000000..5d76ce4657 --- /dev/null +++ b/content/fa/tutorials/0.creating-a-nuxt-module.md @@ -0,0 +1,433 @@ +--- +template: post +title: Creating a Nuxt Module +description: Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Let's create a module that uses ngrok to get a Public URL that you can share while working in Development. +imgUrl: blog/creating-nuxt-module/main.jpeg +imgCredits: Stephen Meyers +date: 2020-11-27 +authors: + - name: "Debbie O'Brien" + avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg + link: https://twitter.com/debs_obrien +tags: + - Nuxt + - Modules + - ngrok +category: Tutorial +--- + +Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Nuxt modules can be incorporated into npm packages. This makes them easy to reuse across projects and to share with the community. + +Have you ever been working on something and ran into a bug or just needed to get approval from someone. There are a few options to achieve this such as deploying your application or creating a [CodeSandbox](https://codesandbox.io). But another option is to share your localhost so that as you make changes live in dev mode, it can be seen by anyone who has the link, no matter where they are. We can use [ngrok](https://www.npmjs.com/package/ngrok) to achieve this. + +Let's create a module that uses [ngrok](https://www.npmjs.com/package/ngrok) so that you get a public URL which can be seen in the Nuxt CLI when you run the dev command. + +::video-player +--- +sources: +- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/ngrok-blog_jqc1di.webm + type: video/webm +- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/ngrok-blog_jqc1di.mp4 + type: video/mp4 +- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/ngrok-blog_jqc1di.ogv + type: video/ogg +poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/ngrok-blog_jqc1di.jpg +--- +:: + +This module has already been created and deployed and you can use it without creating it yourself by installing the [@nuxtjs/ngrok module](https://ngrok.nuxtjs.org). You can also jump straight into the code by checking out our [CodeSandbox Demo](/examples/modules/local). However if you are interested in seeing how it was created or want to create your own module then continue reading. + +- [How does it work?](#how-does-it-work) +- [Let's get started](#lets-get-started) +- [Creating our module](#creating-our-module) +- [Investigating nuxt.options](#investigating-nuxtoptions) +- [Start the ngrok tunnel when the Nuxt server is listening](#start-the-ngrok-tunnel-when-the-nuxt-server-is-listening) +- [Adding an authtoken](#adding-an-authtoken) +- [ngrok in action](#ngrok-in-action) +- [Add our URL to the Nuxt CLI](#add-our-url-to-the-nuxt-cli) +- [Closing our ngrok](#closing-our-ngrok) +- [Full code example](#full-code-example) +- [Conclusion](#conclusion) +- [Further exploration](#further-exploration) + +## How does it work? + +ngrok will create a http-https-tcp tunnel. Check out the [ngrok npm package](https://www.npmjs.com/package/ngrok) for more details. We need to be able to connect to an ngrok port when the Nuxt server is listening. Once we get a public URL we want to print it to the Nuxt CLI so we can easily click it to open and share it. + +![nuxt cli](/blog/creating-nuxt-module/nuxt-cli.png) + +## Let's get started + +To use a custom module within our app we need to create a modules folder if you haven't already got one. Inside it let's create a folder called ngrok and add an index.js file into it. You can use your editor to create these folders and files or use the commands below. + +```bash +mkdir modules modules/ngrok +touch modules/ngrok/index.js +``` + +In order to use our module we will need to register it by adding it in the [buildModules](/docs/directory-structure/modules/#buildmodules) section of our `nuxt.config.js` file. BuildModules are only imported during development and build time which is perfect for our module as we only need it to work in dev mode. + +```js{}[nuxt.config.js] +export default { + buildModules: ['~/modules/ngrok'] +} +``` + +As we will use the [ngrok npm package](https://www.npmjs.com/package/ngrok) we will need to install as a dev dependency. + +::code-group +```bash [Yarn] +yarn add --dev ngrok +``` +```bash [NPM] +npm install --dev ngrok +``` +:: + +## Creating our module + +Now that we have installed and registered everything we can now go ahead and create our module. The first thing we need to do is to import ngrok from our `node_modules` folder into our `index.js` file of our ngrok module. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' +``` + +We can then create a function using export default which allows us to use this function in another file. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () {} +``` + +Inside this function we can start by destructuring nuxt and making it equal to `this`, which means we won't have to write `this.nuxt`each time we refer to nuxt. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + const { nuxt } = this + + // My nuxt module code goes here +} +``` + +## Investigating nuxt.options + +We only want to run ngrok in dev mode and not in production so how would we do that? + +First let's log to our console `nuxt.options` so we can see all the nuxt options that are available to us. This is the `nuxt.config.js` mixed with the default values. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + const { nuxt } = this + + console.log(nuxt.options) + + // My nuxt module code goes here +} +``` + +There are a lot of values in here. What we want is a way to see when we are in dev mode and you will see from the console that in our `nuxt.options` we have `dev` set to `true`. That means we can add an if statement to check if dev is false and return if we are not in dev mode. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + const { nuxt } = this + + // Don't start ngrok in production + if (nuxt.options.dev === false) { + return + } + + // More coming below :) +} +``` + +## Start the ngrok tunnel when the Nuxt server is listening + +We want to start the ngrok tunnel when the nuxt sever is listening. To do that we need a way to hook into Nuxt and listen for a port so we can connect. That's where Nuxt hooks come in. [Nuxt hooks](/docs/internals-glossary/internals-nuxt) are listeners to Nuxt events. We will use the `nuxt.hook()` passing in the value of `listen` followed by an async function. In this function we need to pass in the server, followed by the port. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + // [...] + + // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks + nuxt.hook('listen', async function (server, { port }) { + + }) +} +``` + +We then await the ngrok connection passing in the value of port and assigning it to our url, which is defined outside the function. We can now run a `console.log` inside our function to see the result of our url. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + // [...] + + let url + + // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks + nuxt.hook('listen', async function (server, { port }) { + + url = await ngrok.connect(port) + + // We have our public url here + console.log(url) + }) +} +``` + +Now if you run the dev command and open up your console you will see your url from ngrok. Opening that URL will show you your website in dev mode. + +## Adding an authtoken + +Although this should work we might run into some issues regarding max connections and other limitations and therefore it is best to setup up an [authtoken](https://ngrok.com/) which can be done for free from the ngrok website. + +Once we have our token we can set up our `.env` file and add our token. + +```bash{}[.env] +NGROK_TOKEN=my-authtoken-from-ngrok +``` + +::alert{type="warning"} +Don't forget to make sure your `.env`file has been added to your `.gitignore`. +:: + +We can now set a const of `options` equal to the options from the ngrok property of our `nuxt.config.js` or equal to an empty object in case we don't define any options. We also add a const of `token` equal to the `NGROK_TOKEN` from our `.env` file or `options.token` which is the same as `nuxt.options.ngrok.token`, in case this value was defined directly in our `ngrok` property in the our `nuxt.config.js`. + +We can then await the ngrok authtoken passing in the token value. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + // [...] + + // Read ngrok property defined in nuxt.config.js + const options = nuxt.options.ngrok || {} + const token = process.env.NGROK_TOKEN || options.token + + // [...] +} +``` + +We can then await the ngrok authtoken passing in the value of `token` which we have defined above. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + // [...] + + // Read ngrok property defined in nuxt.config.js + const options = nuxt.options.ngrok || {} + const token = process.env.NGROK_TOKEN || options.token + + // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks + nuxt.hook('listen', async function (server, { port }) { + + if(token){ + await ngrok.authtoken(token) + } + + url = await ngrok.connect(port) + + // We have our public url here + console.log(url) + }) +} +``` + +## ngrok in action + +But is it really working? If I change anything in development will they see it on that URL? Let's take a look. If we go to our index page and add some text. For example "URL from ngrok:" you will now see that change in your [localhost](http://localhost) and also in the url from ngrok that you printed to console. How cool. + +```html{}[pages/index.vue] +

URL from ngrok:

+``` + +Let's add our url from ngrok to our vue template. We can get access to our ngrok url by using the publicRuntimeConfig which is then accessible using `$config` from the context. We do this by assigning our url to the to the `nuxt.options.publicRuntimeConfig.ngrok`. We can now remove our `console.log`as this is no longer needed. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' + +export default function () { + // [...] + + // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks + nuxt.hook('listen', async function (server, { port }) { + + if(token){ + await ngrok.authtoken(token) + } + + url = await ngrok.connect(port) + + // Add the public url to the public runtimeConfig + nuxt.options.publicRuntimeConfig.ngrok = { url } + + }) +} +``` + +We can now access this in our Vue template using `$config`and if we wrap it in a link tag then it will be clickable. + +```html{}[modules/ngrok/index.js] + +``` + +Let's run the dev server and now you should see your URL from ngrok printed out on the page. How cool. + +## Add our URL to the Nuxt CLI + +In general we probably won't want to print the URL onto the page. It would be much better if we could add it to the Nuxt CLI so we can see it every time we run the dev command and be able to click and open it from there. We can then share that link with whoever we want without having to expose it in our .vue file or in our console. + +We can access the CLI through the `nuxt.options`. You can see this by logging the `nuxt.options`to the console and searching for cli. If you do you will see that we have a [`badgeMessages`](/docs/configuration-glossary/configuration-cli#badgemessages) property. This is the green box that shows us the messages of Environment, Rendering and Target as well as what port the app is listening on. + +We can use the `push()` method to push our URL to the Nuxt CLI. + +```js{}[modules/ngrok/index.js] +// [...] +nuxt.hook('listen', async function (server, { port }) { + // [...] + + // Add the public url to the Nuxt box in the CLI + nuxt.options.cli.badgeMessages.push(url) + + }) +}) +``` + +Now when we run the dev command our url appears in the green box. We can of course improve this further by adding some text before the URL so our users know what it is. + +```js{}[modules/ngrok/index.js] +// [...] +nuxt.hook('listen', async function (server, { port }) { + // [...] + + // Add the public url to the Nuxt box in the CLI + nuxt.options.cli.badgeMessages.push(`Public URL: ${url}`) + + }) +}) +``` + +We can also change the color of this link and underline it by using a package called [chalk](https://www.npmjs.com/package/chalk) which allows us to style our terminal. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' +import chalk from 'chalk' + +// [...] +``` + +We can then use `chalk.underline.yellow` or any other color from the chalk package. + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' +import chalk from 'chalk' +// [...] + + nuxt.hook('listen', async function (server, { port }) { + // [...] + + // Change the color using chalk + nuxt.options.cli.badgeMessages.push( + `Public URL: ${chalk.underline.yellow(url)}` + ) + }) +} +``` + +You will now see when running the dev command that we have our Public URL with the link underlined and in a yellow color. This can then be clicked and opened and of course shared with anyone, anywhere in the world so they can watch your changes in dev mode live. + +![nuxt cli](/blog/creating-nuxt-module/nuxt-cli.png) + +## Closing our ngrok + +We should always close our ngrok connection when we close Nuxt. To do this we can hook into Nuxt and look for when it will close and run a function to disconnect ngrok. + +```js{}[modules/ngrok/index.js] +// [...] +export default function () { + // [...] + + nuxt.hook('close', function () { + url && ngrok.disconnect() + }) +} +``` + +## Full code example + +```js{}[modules/ngrok/index.js] +import ngrok from 'ngrok' +import chalk from 'chalk' + +export default function () { + const { nuxt } = this + + // Don't start ngrok in production + if (nuxt.options.dev === false) { + return + } + + // Read ngrok property defined in nuxt.config.js + const options = nuxt.options.ngrok || {} + const token = process.env.NGROK_TOKEN || options.token + + // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks + nuxt.hook('listen', async function (server, { port }) { + + if(token){ + await ngrok.authtoken(token) + } + + + url = await ngrok.connect(port) + + // Add the public url to the public runtimeConfig + nuxt.options.publicRuntimeConfig.ngrok = { url } + + // Add the public url to the Nuxt box in the CLI + nuxt.options.cli.badgeMessages.push( + `Public URL: ${chalk.underline.yellow(url)}` + ) + + }) + + nuxt.hook('close', function () { + url && ngrok.disconnect() + }) +} +``` + +## Conclusion + +We have just created our local module which we can use in our project. This sometimes is enough but sometimes we want to share our module across projects or even better, with the Nuxt Community. To do this we need to create our module using a module template and publish it to npm. + +As of today we are working on improving this template to make it more user friendly. All modules are created using typescript and should contain tests, docs and an example. + +## Further exploration + +::alert{type="next"} +Check our our [CodeSandbox example](/examples/modules/local) for this module. +:: + +::alert{type="next"} +Check out our published [ngrok module](https://ngrok.nuxtjs.org/). +:: + +::alert{type="next"} +Check out our list of [Nuxt modules](https://modules.nuxtjs.org/). +:: diff --git a/content/fa/tutorials/1.creating-blog-with-nuxt-content.md b/content/fa/tutorials/1.creating-blog-with-nuxt-content.md new file mode 100644 index 0000000000..61840e5e20 --- /dev/null +++ b/content/fa/tutorials/1.creating-blog-with-nuxt-content.md @@ -0,0 +1,935 @@ +--- +template: post +title: 'Create a Blog with Nuxt Content' +description: 'The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.' +imgUrl: blog/creating-blog-with-nuxt-content/main.jpeg +imgCredits: M +imgCreditsUrl: https://unsplash.com/@lamerbrain +date: 2020-07-02 +authors: + - name: "Debbie O'Brien" + avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg + link: https://twitter.com/debs_obrien +tags: + - Nuxt + - Content + - Markdown +category: Tutorial +--- + +The [content module](https://content.nuxtjs.org) is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it. + +::video-player +--- +sources: +- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/demo-blog-content_shk6kw.webm + type: video/webm +- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/demo-blog-content_shk6kw.mp4 + type: video/mp4 +- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/demo-blog-content_shk6kw.ogv + type: video/ogg +poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/demo-blog-content_shk6kw.jpg +--- +:: + +

+ View demo / + Source code +

+ +- [Getting started](#getting-started) + - [Installation](#installation) + - [Let's create our markdown page](#lets-create-our-markdown-page) + - [Displaying your content](#displaying-your-content) + - [Default Injected variables](#default-injected-variables) + - [Custom Injected variables](#custom-injected-variables) + - [Styling our markdown content](#styling-our-markdown-content) + - [Adding an icon to our headings anchor](#adding-an-icon-to-our-headings-anchor) + - [Add a table of contents](#add-a-table-of-contents) + - [Use HTML in your markdown files](#use-html-in-your-markdown-files) + - [Adding a Vue component](#adding-a-vue-component) + - [Adding an Author component with props](#adding-an-author-component-with-props) + - [Adding a code block to your post](#adding-a-code-block-to-your-post) + - [Creating a previous and next component](#creating-a-previous-and-next-component) + - [Working with the API](#working-with-the-api) + - [List all the blog posts](#list-all-the-blog-posts) + - [Using the where query to create an Author page](#using-the-where-query-to-create-an-author-page) + - [Add a search field](#add-a-search-field) +- [Live editing our content](#live-editing-our-content) +- [Generating our content](#generating-our-content) +- [Conclusion](#conclusion) +- [Further Reading](#further-reading) + +## Getting started + +### Installation + +To get started with content module we will first need to install the module using npm or yarn. + +::code-group +```bash [Yarn] +yarn add @nuxt/content +``` +```bash [NPM] +npm install @nuxt/content +``` +:: + +Then we can add it to our modules property inside our nuxt.config file. + +```js{}[nuxt.config.js] +export default { + modules: ['@nuxt/content'] +} +``` + +::alert{type="info"} +If you have created a new project with `create-nuxt-app` you can choose to add the content module and therefore it will be installed for you. +:: + +### Let's create our markdown page + +The content module works by reading the files in our `content/` directory. + +```bash +mkdir content +``` + +::alert{type="info"} +If you have created your project with `create-nuxt-app`, the `content/` directory will be already created. +:: + +Let's create an `articles/` directory where we can add the articles for our blog. + +```bash +mkdir content/articles +``` + +The content module can parse markdown, csv, yaml, json, json5 or xml. Let's create our first article with a markdown file: + +```bash +touch content/articles/my-first-blog-post.md +``` + +We can now add a title and text for our blog post: + +```markdown +# My first blog post + +Welcome to my first blog post using content module +``` + +::alert{type="info"} +In markdown we create a `

` title by using `#`. Make sure you leave a space between it and your blog title. For more info on writing in markdown see the [basic syntax guide](https://www.markdownguide.org/basic-syntax). +:: + +### Displaying your content + +To display our content in our page, we can use a [dynamic page](/docs/directory-structure/pages#dynamic-pages) by prefixing the page with an underscore(`_`). By creating a page component named `_slug.vue` inside our blog folder, we are able to use the `params.slug` variable provided by vue router to get the name of each article. + +```bash +touch pages/blog/_slug.vue +``` + +Then we can use `asyncData` in our page component to fetch our article content before the page has been rendered. We can have access to our content through the context by using the variable `$content`. As we want to fetch a dynamic page we also need to know which article to fetch with `params.slug` which is available to us through [the context](/docs/internals-glossary/context). + +```html{}[pages/blog/_slug.vue] + +``` + +Inside our `asyncData` function we create a variable named `article` and fetch our content using the `await` followed by `$content`. We need to pass into `$content` what we want to fetch, which in our case is the article folder followed by the slug, which we get from our URL params. We then chain the fetch method to the end and return the article which will contain the result of our fetch. + +```html{}[pages/blog/_slug.vue] + +``` + +To display our content we are using the `` component by passing in the variable we returned into the `document` prop. In this example we have wrapped it in a HTML article tag as it is better semantic HTML but you can use a div or another HTML tag if you prefer. + +```html{}[pages/blog/_slug.vue] + +``` + +We can now run our dev server and go to the route [http://localhost:3000/blog/my-first-blog-post](http://localhost:3000/blog/my-first-blog-post) and we should see our content from our markdown file. + +![content from markdown](/blog/creating-blog-with-nuxt-content/get-started-with-nuxt-content.png) + +### Default Injected variables + +The nuxt content module gives us access to injected variables that we can access and show in our template. Let's take a look at the default variables that are injected into our document: + +- **body**: body text +- **dir**: directory +- **extension**: file extension (.md in this example) +- **path**: the file path +- **slug**: the file slug +- **toc**: an array containing our table of contents +- **createdAt**: the file creation date +- **updatedAt**: the date of the last file update + +We can access all these variables by using the `article` variable that we created earlier. `article` is an object that contains all these extra injected variables that we have access to. Let's inspect them by printing it out using a `
` tag.
+
+```html{}[pages/blog/_slug.vue]
+
 {{ article }} 

+```
+
+Now on our page we can see we have an object with a variable property which is an empty array and a body variable which has our h1 and p tag as well as some other info that we will look at later. If we scroll down you will see we have all the other variables that we have access to.
+
+```bash
+"dir": "/articles",
+"path": "/articles/my-first-blog-post",
+"extension": ".md",
+"slug": "my-first-blog-post",
+"createdAt": "2020-06-22T10:58:51.640Z",
+"updatedAt": "2020-06-22T10:59:27.863Z"
+```
+
+This means we can access these variables by using our article variable followed by the what we want to use. For example `article.updatedAt` will give us the date the post was last updated.
+
+```html{}[pages/blog/_slug.vue]
+
Post last updated: {{ article.updatedAt }}

+```
+
+As you can see the date is not that human friendly. We can format this by creating a method that takes in a date and returns a new date with the options of year, month and day formatted to how we want.
+
+```js{}[pages/blog/_slug.vue]
+methods: {
+    formatDate(date) {
+      const options = { year: 'numeric', month: 'long', day: 'numeric' }
+      return new Date(date).toLocaleDateString('en', options)
+    }
+ }
+```
+
+And then in our template we can use the formatDate method passing in the date we get from our content which will return a nicely formatted date for us.
+
+```html{}[pages/blog/_slug.vue]
+
Article last updated: {{ formatDate(article.updatedAt) }}

+```
+
+### Custom Injected variables
+
+We can also add custom injected variables by adding a block of YAML front matter to our markdown file. It must be at the top the file and must be a valid YAML format set between three triple dashed lines. This is useful for adding SEO variables such as title, description and image of your article.
+
+```yaml{}[content/articles/my-first-blog-post.md]
+---
+title: My first Blog Post
+description: Learning how to use @nuxt/content to create a blog
+img: first-blog-post.jpg
+alt: my first blog post
+---
+
+```
+
+We now have a title, description, img and alt variable that we can access to by using our `article` object variable.
+
+```html{}[pages/blog/_slug.vue]
+
+```
+
+::alert{type="info"}
+In order to render images included in the YAML of the article we either need to place them in the static folder or use the syntax: `` :src="require(`~/assets/images/${article.img}`)" ``.
+
+Images included in the article content should always be placed **in the static folder** as @nuxt/content is independent of Webpack. The static folder doesn't go through webpack whereas the assets folder does.
+::
+
+### Styling our markdown content
+
+If we inspect this page we can see that everything written inside our markdown is wrapped inside a div with a class of nuxt-content. That means we can easily add styles to all our elements coming from our markdown file by wrapping them in the nuxt-content class.
+
+```html{}[pages/blog/_slug.vue]
+
+```
+
+All other tags that come from our YAML front matter can be styled as normal either using [TailwindCSS](https://tailwindcss.com/) or adding css in the style tag.
+
+To use scoped styles with the nuxt-content class you need to use a deep selector: `/deep/`, `::v-deep` or `>>>`
+
+Our markdown tags are converted into the correct tags which means we now have two `
` tags. We should now remove the one from our markdown file.
+
+### Adding an icon to our headings anchor
+
+Notice that inside the `
` tag there is an `` tag with a `href` that includes an anchor to link to itself and a `span` tag inside it with `icon` and `icon-link` classes. This is useful for linking to that section of the page. The links in the headings are empty and therefore hidden so let's add a style to them. Using the icon classes we can add an svg as a background image for our icon. You will have to first add the svg to your assets folder. In this example I have added it to an svg folder and I have taken the icon from [Steve Schoger's Hero Icons.](https://github.com/sschoger/heroicons-ui)
+
+```css{}[pages/blog/_slug.vue]
+.icon.icon-link {
+  background-image: url('~assets/svg/icon-hashtag.svg');
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-size: 20px 20px;
+}
+```
+
+### Add a table of contents
+
+The generated `toc` variable allows us to add a table of contents to our blog post. Let's add some headings to our blog post.
+
+```markdown
+## This is a heading
+
+This is some more info
+
+## This is another heading
+
+This is some more info
+```
+
+Now we can see these new headings inside the `toc` array with an id, a depth and the text. The depth value refer to the heading tag value, so `
` value is 2, `
` value is 3, etc.
+
+```markdown{}[content/articles/my-first-blog-post.md]
+## This is a heading
+
+This is some more info
+
+### This is a sub heading
+
+This is some more info
+
+### This is another sub heading
+
+This is some more info
+
+## This is another heading
+
+This is some more info
+```
+
+As we have access to the `toc` id and text we can loop over these and print each one out and use the `` component to link to the id of the section we want to link to.
+
+```html{}[pages/blog/_slug.vue]
+
+```
+
+Now the ToC links are working and clicking on one will bring us to the correct part of the document. The content module automatically adds an id and a link to each heading. If we inspect one of the headings from our markdown file in our dev tools we will see our `
` tag has an id. This is the same id that is found in the `toc` which is basically how the `toc` can link to the correct heading.
+
+We can improve this further by using dynamic classes to style the heading classes based on the depth of the heading which we can add to our nuxt-link tag. If the link has a depth of 2 add a padding on the y axis and if the the depth is 3 add a margin left and a padding bottom. Here we are using [TailwindCSS](https://tailwindcss.com/) classes but feel free to use custom class names and styles.
+
+```html{}[pages/blog/_slug.vue]
+:class="{ 'py-2': link.depth === 2, 'ml-2 pb-2': link.depth === 3 }"
+```
+
+### Use HTML in your markdown files
+
+Sometimes we might want to add HTML to our markdown files. Let's add a div with some classes so it has a background color of blue with white text, some padding and a margin bottom.
+
+```html{}[content/articles/my-first-blog-post.md]
+

+  This is HTML inside markdown that has a class of note
+

+```
+
+### Adding a Vue component
+
+We can also add Vue components inside our markdown files. This means if we are re-using components such as an info or alert box, we can create one with the styles we need and pass in the text as a slot.
+
+We can now add components to our application by setting the property `components` to `true` in our `nuxt.config file`. (since v2.13)
+
+```js{}[nuxt.config.js]
+export default {
+  components: true
+}
+```
+
+Auto importing components will not work for `` unless we globally register them by adding a global folder inside the components folder.
+
+```bash
+mkdir components/global
+```
+
+We can then create our InfoBox component inside this folder.
+
+```html{}[components/global/InfoBox.vue]
+
+```
+
+Then in our markdown these components will be available without having to import them.
+
+```markdown{}[content/articles/my-first-blog-post.md]
+
+  
+
+```
+
+::alert{type="info"}
+The global components will be available throughout our whole application so be careful when adding components to this folder. This works different to adding components in the components folder which are only added if they are being used.
+::
+
+### Adding an Author component with props
+
+An other advantage of the YAML properties is that we can make them available to our component through props. For example, we can have an about the author component and if we have guest bloggers the author will change. In our markdown file we can add a new object to our frontmatter which contains the author's name and bio and image.
+
+```yaml{}[content/articles/my-first-blog-post.md]
+---
+author:
+  name: Benjamin
+  bio: All about Benjamin
+  image: https://images.unsplash.com/.....
+---
+
+```
+
+We can now create the author component.
+
+```bash
+touch components/global/Author.vue
+```
+
+Here we create a div the author image, a title of Author and a dynamic name and bio of the author.
+
+```html{}[components/global/Author.vue]
+
+```
+
+::alert{type="info"}
+Styles have been removed from these examples, feel free to add the styles yourself or copy the styles from the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content).
+::
+
+Then in our script tag we can add our props of author which is an object and set required to true.
+
+```html{}[components/global/Author.vue]
+
+```
+
+To use the component we will need to add it to our markdown and pass in our props.
+
+```markdown{}[content/articles/my-first-blog-post.md]
+
+```
+
+::alert{type="info"}
+You cannot use self closing tags in markdown, for instance, `` won't work.
+::
+
+Putting the component here means we will have to repeat it for every article. In this case it would be better to add it directly to the slug page. We will need to change the author prop to `article.author`.
+
+```html{}[pages/blog/_slug.vue]
+
+```
+
+We can now move this component out of the global folder and into the components folder directly and it will be auto imported into our slug page as we are using it in the template.
+
+### Adding a code block to your post
+
+With the content module we can style our code blocks with the automatic inclusion of [Prism](https://prismjs.com/). That means we can write our code block using the correct markdown syntax and our code block will display with styling depending on the language.
+
+```js
+export default {
+  nuxt: 'is the best'
+}
+```
+
+```html
+
code styling is easy

+```
+
+We can also add the file name of the code block by adding it inside square brackets after the code block's language.
+
+```js[my-first-blog-post.md]
+export default {
+  nuxt: 'is the best'
+}
+```
+
+The file name will be converted to a span with a filename class which we can then style how we like. For this example I am using tailwind classes but you can use ordinary CSS if you prefer.
+
+```css{}[assets/css/tailwind.css]
+.nuxt-content-highlight {
+  @apply relative;
+}
+.nuxt-content-highlight .filename {
+  @apply absolute right-0 text-gray-600 font-light z-10 mr-2 mt-1 text-sm;
+}
+```
+
+Different theme can be used, for example [prism-themes](https://github.com/PrismJS/prism-themes), we can install it and then add our preferred theme to the content options of your `nuxt.config file`.
+
+```bash
+npm install prism-themes
+// or
+yarn add prism-themes
+```
+
+Then in our `nuxt.config` file, in the content options, we can add a markdown object with prism and add the theme that we want to use.
+
+```js{}[nuxt.config.js]
+content: {
+  markdown: {
+    prism: {
+      theme: 'prism-themes/themes/prism-material-oceanic.css'
+    }
+  }
+}
+```
+
+### Creating a previous and next component
+
+We now have a pretty complete blog post but wouldn't it be great if users could easily go from one post to another. First let's duplicate our post so we have 3 posts. Then, let's create a new component for our previous and next posts.
+
+```bash
+touch components/PrevNext.vue
+```
+
+In this component we use a `v-if` inside our `NuxtLink` component to see if there is a previous blog post and if there is we add a link to it. We can print out the title of our article using the `prev` and `next` variables as these contain all the information from the article. This means we could create a card with an image and description to show the next and previous article but for this example we will just display the title. If there isn't a previous post we just print an empty span which is useful for styling purposes. We then do the exact same with our next link.
+
+```html{}[components/PrevNext.vue]
+
+```
+
+In our component we pass the props `prev` and `next` to makes them available to us on our blog post page.
+
+```html{}[components/PrevNext.vue]
+
+```
+
+We can now get our previous and next articles by adding them to our `asyncData`. We create an array of const with the name `prev` and `next` and we await the content from the articles folder. This time we only need the title and the slug so we can chain `only()` to our await and pass in title and slug.
+
+We can use the `sortBy()` method to sort our data by the createdAt date in ascending order. We then use the `surround()` method and pass in the slug from params so that it can get the correct slug for the previous and next posts.
+
+We then return prev and next just like we did with article.
+
+```js{}[pages/blog/_slug.vue]
+async asyncData({ $content, params }) {
+    const article = await $content('articles', params.slug).fetch()
+
+    const [prev, next] = await $content('articles')
+      .only(['title', 'slug'])
+      .sortBy('createdAt', 'asc')
+      .surround(params.slug)
+      .fetch()
+
+    return {
+      article,
+      prev,
+      next
+    }
+  },
+```
+
+We can now add our `` component to our slug page passing in the props of prev and next.
+
+```html{}[pages/blog/_slug.vue]
+
+```
+
+::alert{type="info"}
+As we have set `components: true` in our nuxt.config file we do not need to import this component in order to be able to use it.
+::
+
+### Working with the API
+
+When querying data the Content module gives us access to the API so that we can query it directly to see what is being returned. We have access to the API in dev mode with the following url: [http://localhost:3000/\_content/](http://localhost:3000/_content/). In our example this will be empty as our articles are in a folder called articles therefore we need to use this url [http://localhost:3000/\_content/articles](http://localhost:3000/_content/articles) to see our list of articles.
+
+::alert{type="info"}
+We can see individual articles by adding the name of the slug [http://localhost:3000/\_content/articles/my-first-blog-post](http://localhost:3000/_content/articles/my-first-blog-post)
+::
+
+::alert{type="info"}
+You can use a chrome extension such as [JSON Viewer Pro](https://chrome.google.com/webstore/detail/json-viewer-pro/eifflpmocdbdmepbjaopkkhbfmdgijcc) so you can better see your results.
+::
+
+We can now query our results directly in the url and see our results as a JSON which we can then use to create our blog index page that will have a list of all the blog posts. We can see using our API what we have available to us and for the blog index page we only want to return the title, description, img, slug and author. Let's take a look at what that would be like.
+
+[http://localhost:3000/\_content/articles?only=title&only=description&only=img&only=slug&only=author](http://localhost:3000/_content/articles?only=title&only=description&only=img&only=slug&only=author)
+
+::video-player
+---
+sources:
+- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/content-api_aocbcn.webm
+  type: video/webm
+- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/content-api_aocbcn.mp4
+  type: video/mp4
+- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/content-api_aocbcn.ogv
+  type: video/ogg
+poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/content-api_aocbcn.jpg
+---
+::
+
+### List all the blog posts
+
+We can now create our blog index page to list out our blog posts. As we already have an index page created we just need to delete all the demo code inside this page.
+
+::alert{type="info"}
+In the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content) I used the main index page instead of creating an index file inside the blog folder because for this example I have no other pages but normally you might have a home page, contact page and then the blog page etc.
+::
+
+Passing in `$content` and `params` to the context in our `asyncData` function we then use a const of articles to await our returned content by passing into `$content` the arguments of articles, as that is the folder where our articles are and our slug from params. We can then use `only()` to get our title, description, img, slug and author as we tested from our API this will give us exactly what we need. We can use `sortBy()` to sort by the createdAt date and then we chain our `fetch()` to the end and return our articles.
+
+```html{}[pages/index.vue]
+
+```
+
+Our articles are now available to us just like any data property so we can use it in our template using a `v-for` to loop over all the articles and print out the article title and author name, the description, the date it was updated and the image using the `` component to link to the slug of the article.
+
+```html{}[pages/index.vue]
+
+```
+
+### Using the where query to create an Author page
+
+With the content module we can also filter our results using the where query. We could have an author page that shows the author details and all posts by that author.
+
+```bash
+touch pages/blog/author/_author.vue
+```
+
+Just like before we use asyncData to fetch our data but this time we add in a where() method. We want to get the posts where the author is the same as the author name that comes from params.
+
+For example:
+
+[http://localhost:3000/\_content/articles?author.name=Maria](http://localhost:3000/_content/articles?author.name=Maria)
+
+Because we have used an object for our author we need to add nestedProperties as an option to our content property in our nuxt.config file and pass in what we want to query (only for dot notation queries).
+
+```js{}[nuxt.config.js]
+export default {
+  content: {
+    nestedProperties: ['author.name']
+  }
+}
+```
+
+As we can see we get all our data back only for the author Maria. If we were to use maria without a capital letter we wouldn't get anything back. We can therefore use `$regex` so that it remains with a capital letter.
+
+We then fetch all the details we want to show on this page. In the last example we used the `only()` method to return what we wanted but as we require quite a lot of content we can instead use the `without()` method and pass in what we don't want to return which is the body of the post.
+
+```html{}[pages/blog/author/_author.vue]
+
+```
+
+::alert{type="info"}
+You can use an array and pass in more than just 'body' to the `without()` method:
+::
+
+```js
+without(['body', 'title'])
+```
+
+We can then use our data to print out a nice author page showing the author name and bio as well as each post.
+
+```html{}[pages/blog/author/_author.vue]
+
+```
+
+::alert{type="info"}
+Please note all styles have been removed from this example. You can either style the page yourself or copy the styles from the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content).
+::
+
+To format our date we can add the method we created earlier:
+
+```js{}[pages/blog/author/_author.vue]
+methods: {
+    formatDate(date) {
+      const options = { year: 'numeric', month: 'long', day: 'numeric' }
+      return new Date(date).toLocaleDateString('en', options)
+    }
+  }
+```
+
+And of course we should link from our blog post to our new author page.
+
+```html{}[components/Author.vue]
+
+  
+  

+    
Author

+    
{{ author.name }}

+    
{{ author.bio }}

+  

+
+```
+
+### Add a search field
+
+The Nuxt content module gives us the possibility of searching through our articles by using the `search()` method.
+
+Let's first create a search component.
+
+```bash
+touch components/AppSearchInput.vue
+```
+
+We then add a data property which will return the searchQuery which starts off as an empty string and the articles array which is also empty. We then use the watch method from Vue to watch our searchQuery function passing in the argument of searchQuery. If there is no searchQuery then the articles array is empty and we just call return. If not we get our articles and await our `$content` passing in articles. We can now use the `limit()` method to limit the number of returned results and then we use the `search()` method passing in our searchQuery as an argument and then we chain the `fetch()` method to the end.
+
+```html{}[components/AppSearchInput.vue]
+
+```
+
+Next we need to add to our template an input and using `v-model` we connect it to our SearchQuery data property. Then if there are articles we use a `v-for` to list out the articles using the `` component to link to them.
+
+```html{}[components/AppSearchInput.vue]
+
+```
+
+We can now use our `` component by adding it anywhere on our page.
+
+```html{}[pages/_slug.vue]
+
+```
+
+::alert{type="info"}
+See the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content) for improved styling of this page as well as the header component that was added which includes the search component and is therefore displayed on the author and index page.
+::
+
+## Live editing our content
+
+Our blog is looking really great and if we need to modify any of the content on the page we can do so directly in the browser thanks to the live edit feature. All you have to do is double click on your page while in dev mode and the live edit will open. Here you can modify any of your text and also the front matter. You can even add a component that is in the global components folder and just by clicking away you will see your changes live in the browser and you will see in your editor and console that the file has been modified and saved.
+
+::video-player
+---
+sources:
+- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/live-edit-content_kdorvi.webm
+  type: video/webm
+- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/live-edit-content_kdorvi.mp4
+  type: video/mp4
+- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/live-edit-content_kdorvi.ogv
+  type: video/ogg
+poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/live-edit-content_kdorvi.jpg
+---
+::
+
+## Generating our content
+
+If we now want to deploy our amazing new blog we can run the `nuxt generate` command which will build our app adding all our webpack assets and creating .js bundles for us and then export our html, css, js and images as static assets. You will also notice that we didn't have to add a routes property or do anything to get our new page as the **crawler** will crawl all links for us and generate our dynamic routes for us.
+
+We can then use the `nuxt start` command which will serve our production ready static site so we can see it in our browser before deploying.
+
+With nuxt generate if only our content changes it means the `nuxt generate` command will only export the static pages and will not go through webpack to rebuild the site meaning our content will be updated in seconds.
+
+## Conclusion
+
+Working with content is great fun and there is so much more you can do and build. Don't forget to showcase your work to use on our discord channel named **showcase** so we can see the cool things you have created and perhaps even feature them in our NuxtLetter. Not signed up yet? Well now is a great time to [sign up](https://nuxtjs.org/#subscribe-to-newsletter) as we keep releasing more new content and features for Nuxt. Enjoy :)
+
+## Further Reading
+
+For more info on how to improve your blog check out these articles by [Gareth Redfern](https://twitter.com/garethredfern):
+
+- [Adding a Sitemap Using Nuxt Content](https://redfern.dev/articles/adding-a-sitemap-using-nuxt-content/)
+- [Adding Social Media & SEO Meta Data Using Nuxt Content](https://redfern.dev/articles/adding-social-media-seo-meta-data-using-nuxt-content)
+- [Adding Pagination With Nuxt Content](https://redfern.dev/articles/adding-pagination-nuxt-content-blog)
diff --git a/content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md b/content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md
new file mode 100644
index 0000000000..3d1cc9cebe
--- /dev/null
+++ b/content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md
@@ -0,0 +1,440 @@
+---
+template: post
+title: 'Improve Your Developer Experience With Nuxt Components'
+description: Explore how you can import and register Vue components automatically using @nuxt/components module.
+imgUrl: blog/improve-developer-experience-nuxt-components/main.png
+imgCredits: Adam Nir
+date: 2020-06-24
+authors:
+  - name: Krutie Patel
+    avatarUrl: https://pbs.twimg.com/profile_images/780651635932434432/YtbSkumD_400x400.jpg
+    link: https://twitter.com/KrutiePatel
+tags:
+  - components
+  - auto-import
+  - lazy-loading
+  - dynamic-import
+  - ignore-rules
+  - 3rd-party-library
+category: Tutorial
+---
+
+## Introduction
+
+The Nuxt team has introduced **[@nuxt/components](https://www.npmjs.com/package/@nuxt/components)** module with the purpose to make Nuxt development faster and to make you, as a developer, more productive. This module comes with amazing features and options that will improve your development experience with Nuxt. No matter if you’re just starting out or an advanced user, [@nuxt/components](https://github.com/nuxt/components) provides a range of options from the simplest setup to advance configurations that will certainly benefit your projects.
+
+In a nutshell, this module automatically scans, imports and registers Vue components found in the **`~/components`** directory, so that we don't have to write import statements when we use them in either pages, layouts or even within components.
+
+Here is how [Debbie O’Brien](https://twitter.com/debs_obrien) explains how it works:
+
+> _This module parses your template and automatically includes the component in the file where you are using it such as a page, layout or even a component. Because Nuxt uses automatic code splitting to split your pages by default this module works perfect as it will only contain the components that are used on that page. Also, if you use a component in more than 2 pages, Nuxt will automatically create a shared chunk for them thanks to the magic of WebPack._
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Table of Contents](#table-of-contents)
+- [Module Setup](#module-setup)
+- [Cheatsheet](#cheatsheet)
+- [Directory path as a String](#directory-path-as-a-string)
+- [Directory path as an Object](#directory-path-as-an-object)
+  - [Try it yourself - Directory Paths](#try-it-yourself---directory-paths)
+- [Inclusion paths](#inclusion-paths)
+  - [Extensions option](#extensions-option)
+  - [Try it yourself - Extensions](#try-it-yourself---extensions)
+  - [Pattern option](#pattern-option)
+  - [Default](#default)
+  - [Add additional extensions](#add-additional-extensions)
+  - [Customize as per your requirement](#customize-as-per-your-requirement)
+- [Exclusion paths](#exclusion-paths)
+  - [Ignore option](#ignore-option)
+  - [.nuxtignore, ignore property & ignore option:](#nuxtignore-ignore-property--ignore-option)
+- [Lazy loading your components](#lazy-loading-your-components)
+  - [Try it yourself - Lazy-loading](#try-it-yourself---lazy-loading)
+- [Third-party component library](#third-party-component-library)
+  - [Try it yourself - Third-party library](#try-it-yourself---third-party-library)
+- [Conclusion](#conclusion)
+
+In this article, we'll learn about `@nuxt/components` by example. I have setup a demo with two sets of UI components, `ui-1` and `ui-2`.
+
+```js
+| components
+--| ui-1/
+----| Card/
+--| ui-2/
+----| BaseButton/
+----| Card/
+----| List/
+----| MagicButton/
+```
+
+We will implement `@nuxt/components` on these components followed by a detailed look at module options to customize the default behavior. Later in the article, we will also take a look at **lazy-loading** and **auto-importing 3rd-party library** components.
+
+It’s best if you setup this [sample project](https://github.com/Krutie/nuxt-components-demo) locally to tryout options that may interest you.
+
+- **GitHub Repo** - [https://github.com/Krutie/nuxt-components-demo](https://github.com/Krutie/nuxt-components-demo)
+- **Demo** - [http://nuxt-components.surge.sh/](http://nuxt-components.surge.sh/)
+- **3rd Party Sample Components Repo** - [https://github.com/Krutie/Kru-Components](https://github.com/Krutie/Kru-Components)
+
+## Module Setup
+
+From Nuxt v2.13 onward, this module **will be available by default** when you create a new Nuxt project. However, you'll still need to activate it using `components: true` in `nuxt.config.js.`
+
+```js{}[nuxt.config.js]
+// For nuxt v2.13+
+export default {
+  components: true
+}
+```
+
+In case your project is using Nuxt version below v2.13\*\*we recommend you to upgrade your Nuxt version since there is no breaking between these versions.
+
+::alert{type="info"}
+**If `components: true` is set, `~/components` directory is scanned by default.**
+::
+
+Minimal configuration above is enough to get you started. However, like any other Nuxt module, the real power of `@nuxt/components` lies in the module options. Before we take a detailed look, here's a one-page summary of the module.
+
+## Cheatsheet
+
+![One-page summary of @nuxt/components module](https://cdn.krutiepatel.com/2020-06/nuxt_components_Module-Cheatsheet.png)
+
+> [Download printable PDF here](https://cdn.krutiepatel.com/2020-06/nuxt_components_Module-Cheatsheet.pdf)
+
+Using module options, you can select particular directories with specific file-extensions from the `~/components` directory.
+
+To accept custom directory options, `components:` accepts **an array of directory paths**, rather than just a boolean value! These **directory paths** can be either an array of **strings** or **objects**.
+
+Let’s see both formats in detail.
+
+## Directory path as a String
+
+**Directory path as a string** is a simplified version to indicate which directory to scan, watch and register.
+
+For example, in our sample project, we can use string notation like below to auto-import every UI components located at `components/ui-1/` and `components/ui-2/`.
+
+```js
+// nuxt.config.js
+export default {
+  // Module options as an Array of String
+  components: ['~/components/ui-1/', '~/components/ui-2/']
+}
+```
+
+## Directory path as an Object
+
+Directory path as an object gets bit more interesting! **When path is given as an object, it becomes a required.**
+
+```js{}[nuxt.config.js]
+export default {
+  // Module options as an Array of Object
+  components: [{ path: '~/components/ui-1/' }, { path: '~/components/ui-2/' }]
+}
+```
+
+In addition to `path`, we can also define additional configuration to include, exclude, watch or even add prefix to components based on their location & extensions.
+
+For example, when components are imported using this module, their names are based on their filename. But you can `prefix` component names to preserve their filenames as they are and still be able to customize their component tags.
+
+```js{}[nuxt.config.js]
+export default {
+  // Module options as an Array of Object
+  components: [
+    {
+      path: '~/components/ui-2/',
+      prefix: 'aex'
+    }
+  ]
+}
+```
+
+It’s important to note that, the scope of these options is limited to the `path` provided in that object. In the example above, only components located at `~/components/ui-2/` will be registered with the prefix **`aex`**.
+
+```html
+
+ 
+
+
+ 
+```
+
+### Try it yourself - Directory Paths
+
+In our sample project:
+
+1. `/pages/manual-import-example.vue` imports components manually. In `nuxt.config.js`, configure appropriate directory path, so that `ui-1` components can be auto-imported.
+2. `/pages/auto-import-example.vue` already implements basic auto-import. Implement `prefix` option on `Card` UI components.
+
+---
+
+With directory path is defined as an object, we gain finer control over which components are to be auto-imported, and which ones are to be left out.
+
+Whether your components are written in `.vue`, `.js` or `.ts`, sometimes, you may not want to auto-import every single component files found at specified `path`. There are some scenarios where auto-import may need some tweaking. For example:
+
+**Multi-file Components**
+
+If your components are divided into two individual files, `.vue` for template and `.js` for script. You will want to avoid auto-importing the `.js` files since they're already included in the templates. In this scenario, you will want a mechanism to prevent all or some `.js` files from being auto-imported.
+
+**Dynamic Components**
+
+At the time of writing this article, auto-import doesn't work for dynamic components.
+
+```html
+
+
+```
+
+This is the scenario where you'll need to import your components in the script tag.
+
+Fortunately, this module allow us to specify directory paths or file extensions or the combination of both to selectively include or exclude files from being auto-imported. Keep reading to see **how.**
+
+## Inclusion paths
+
+There are couple of ways we can selectively include component files this using module.
+
+1. `extensions` option
+2. `patterns` option
+
+### Extensions option
+
+`extensions` option lets you indicate which file extensions - from the given `path` - should be scanned and registered. `extensions` option accepts an array of **multiple** file extensions in `String` format.
+
+```js
+{
+  path: "~/components/ui-2/MagicButton/",
+  // prefix: 'aex',
+  extensions: ['vue'], // Array, include files that match the extension
+}
+```
+
+**Both `.vue` and `.js` are included as default extensions.** This option is particularly **helpful for components with multiple files**.
+
+In our sample project, `MagicButton` components is divided into two individual files, `.vue` for template and `.js` for script.
+
+```js
+| MagicButton
+--| MagicButton.js
+--| MagicButton.vue
+```
+
+In this scenario, we want to allow only Vue template to be auto-imported. Well, `extensions` option helps us achieve exactly that.
+
+### Try it yourself - Extensions
+
+In our sample project,
+
+1. Examine the source-code for `MagicButton` at `/components/ui-2/MagicButton/` and its configuration in `nuxt.config.js`.
+
+`extensions` option is best for including selected files at a given `path`. However, there are always advanced use-cases when we need finer control over selecting components - from within sub-directories even!
+
+For those edge-cases, we can leverage `pattern` and `ignore` options to indicate path patterns for inclusion and exclusion respectively.
+
+```js
+{
+  path: '~/components/ui-2/',
+  prefix: 'aex',
+  extensions: [], // Array, components inclusion
+  pattern: '', // String, components inclusion
+  ignore: [] // Array, components exclusion
+}
+```
+
+Continue reading further to see more examples of these two options and how they work.
+
+### Pattern option
+
+`pattern` option lets you define which type of components - from the given `path` - should be scanned and registered. Unlike `extensions`, `pattern` is defined as a **single** `String` and it must follow [glob pattern style](https://github.com/isaacs/node-glob#glob-primer).
+
+We can use pattern option as **default** or **add additional** ones or even **customize** it completely.
+
+### Default
+
+As mentioned earlier, **both `.vue` and `.js` are included as default extensions.**
+
+```js
+// Default pattern
+pattern: `**/*.{vue,js}`
+```
+
+If you are using TypeScript, then `ts` & `tsx` extensions are supported by default as well.
+
+### Add additional extensions
+
+If additional extensions are required, you can specify additional extensions under Build Configuration in `nuxt.config.js`.
+
+```js{}[nuxt.config.js]
+export default {
+  /*
+   ** Build configuration
+   */
+  build: {
+    additionalExtensions: ['jsx']
+  }
+}
+```
+
+Above code adds `.jsx` extension to the default pattern, makes the resulting pattern look like: `**/*.{vue,js,jsx}`
+
+### Customize as per your requirement
+
+If required, you can manually specify extensions to completely customize the pattern.
+
+```js
+// Multiple extensions
+/* Only vue and jsx files will be scanned at given path */
+pattern: '**/*.{vue,jsx}',
+```
+
+Or for single file,
+
+```js
+// Single extension
+/* Only vue files will be scanned at given path */
+pattern: '**/*.vue',
+```
+
+## Exclusion paths
+
+We just saw how inclusion patterns work. `ignore` option on the other hand that helps us exclude components from scanning.
+
+### Ignore option
+
+`ignore` option does exactly opposite of what `pattern` does **and instead of just one string, it accepts an array of strings!** These strings must also follow [glob pattern style](https://github.com/isaacs/node-glob#glob-primer).
+
+Ignore option excludes components with specified locations and extensions from scanning.
+
+**Three individual examples** in the code snippet below show how we can exclude components with `.js` extensions. This is particularly helpful in a scenario where you want to **apply ignore-rules to sub-directories located at the given `path`**.
+
+```js
+// ignore example 1
+{
+  path: '~/components/ui-2/', // path of the directory to scan and watch
+  // ignore js files found at components/ui-2/ and subfolders
+  ignore: ["**/*.js"],
+}
+
+// ignore example 2
+{
+  // ignore js files found at components/ui-2/card/
+  ignore: ["**/card/*.js"],
+}
+
+// ignore example 3
+{
+  // ignore js files found at components/ui-2/list/
+  ignore: ["**/list/*.js"],
+}
+```
+
+### .nuxtignore, ignore property & ignore option:
+
+It's important we highlight two similar features of Nuxt that ignore files just like our `ignore` option.
+
+- [.nuxtignore](/docs/configuration-glossary/configuration-ignore#-nuxtignore) also ignore files similar to `ignore` option, but `.nuxtignore` ignores files from `/pages`, `/layouts`, `/middleware` and `/store` . It's a dot-file that is defined in the project root. Read more about the [ignore property](/docs/configuration-glossary/configuration-ignore) on Nuxt docs.
+- [ignore](/docs/configuration-glossary/configuration-ignore#the-ignore-property) property, as well, let us define multiple glob-pattern to ignore matching files, like below.
+
+```js{}[nuxt.config.js]
+export default {
+  ignore: ['**/*.test.*']
+}
+```
+
+The impact of both `.nuxtignore` and `ignore` property is realized during build-process, and they operate project-wide, while `ignore` option operates locally and ignores files from `/components` directory.
+
+So, if you're using 1. `.nuxtignore`, 2. top-level `ignore` property, and 3. `ignore` option, then all three will be merged.
+
+```html
+Final ignore = .nuxtignore + Top-level ignore + ignore option (Local)
+```
+
+---
+
+Now, let’s say all of your components are automatically imported into the project and you saved so many import statements, but... your project isn’t using all of the components upfront.
+
+This brings us to the next feature of this module that is worth highlighting, **Lazy Loading.**
+
+## Lazy loading your components
+
+Components that aren't required immediately upon initial render - such as components below the fold, sidebar, modals or any other components that are rendered conditionally with `v-if` or `v-else` - qualifies for lazy-loading (aka dynamic import).
+
+Lazy loading your components is super easy with this module. You can simply add `Lazy` prefix to the component tag when it's used in the template area.
+
+```html{}[pages/lazy-loading-example.vue]
+
+  
+    {{ post.title }}
+    
+  
+
+```
+
+And that’s pretty much it, you have got your component dynamically imported, on-demand!
+
+### Try it yourself - Lazy-loading
+
+Lazy loading is already implemented at `/pages/lazy-loading-example.vue`
+
+- Run the sample project locally,
+- visit [http://localhost:3000/lazy-loading-example](http://localhost:3000/lazy-loading-example)
+- Open Chrome DevTools - Browser's Inspect Panel, then go to Network Tab.
+
+Here, you can see that lazy components are loaded when the data becomes available, and they have their own separate bundles. See `List.js, ListItem.js` and `ListItemIcon.js` in the screenshot below.
+
+![Lazy loading with nuxt/components](https://cdn.krutiepatel.com/2020-06/lazy-loading-with-nuxt-components.png)
+
+## Third-party component library
+
+Third-party components libraries can also benefit from `@nuxt/components`.
+
+I have created a bare-minimum external component library for you to tinker with this feature. It's called [Kru-Components](https://github.com/Krutie/Kru-Components)!
+
+> **Kru Components Repo** - [https://github.com/Krutie/Kru-Components](https://github.com/Krutie/Kru-Components)
+
+Kru-components library exposes a hook called, `components:dirs`, that allows you - as a component library author - to extend your components directory into Nuxt projects.
+
+```js
+// https://github.com/Krutie/Kru-Components/blob/master/src/nuxt.js
+
+this.nuxt.hook('components:dirs', dirs => {
+  // Add ./components dir to the list
+  dirs.push({
+    path: join(__dirname, 'components'),
+    prefix: 'kru'
+  })
+})
+```
+
+This way, components of this external library can take advantage of **automatic tree-shaking** and **component registration**.
+
+And then you - as a user of this external library - can use `kru-components` as simple as a Nuxt module.
+
+```js{}[nuxt.config.js]
+buildModules: [
+ // Use Kru-components as Nuxt module
+ "kru-components/src/nuxt",
+],
+```
+
+### Try it yourself - Third-party library
+
+In our sample project, I have implemented `Kru-Components` at `pages/third-party-example.vue`. Make sure to setup Kru-Components locally and then `npm link` it to our sample project.
+
+**Note:** If your component library consists of components that needs transpiling support, then `@nuxt/components` provides `transpile` option, which is set to `auto` by default. Remember, `transpile` option can be disabled if components already transpiles.
+
+For more concrete example, I'd recommend you keep an eye on [Chakra UI](https://github.com/chakra-ui/chakra-ui-vue) for Vue as they're [working towards making the library compatible](https://twitter.com/codebender828/status/1265702818888876033) with `@nuxt/components`.
+
+## Conclusion
+
+If you've made it this far, you can see how this module presents several opportunities to fine-tune how we auto-import components and improve overall Nuxt Developer Experience. Here's the brief summary of what we learned in this article.
+
+There are three ways you can get started with this module.
+
+- activate `components` and start using components from `~/components` directory, **or**
+- provide directories as strings and start using components from specified directories, **or**
+- provide directories as an object, along with configuration that can range from basic to advance. Here's the recap of directory options we covered:
+1. **path** - (String) - Of all four options, path is required parameter. It indicates which directory is to be scanned.
+2. **prefix** - (String) - Specify the prefix for the component names.
+3. **extensions** (Array) - Specify file extensions of the components to be scanned.
+4. **pattern** - (String) - Specify path and extensions of the components to be scanned.
+5. **ignore** - (Array) - Specify path and extensions of the components to be excluded from scanning.
+
+Above directory options combined with lazy-loading, this module can be used in many possible combinations. However, you can always start with bare-minimum option, such as `components: true` and refine your configuration as you go.
diff --git a/content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md b/content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md
new file mode 100644
index 0000000000..dd895214ba
--- /dev/null
+++ b/content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md
@@ -0,0 +1,493 @@
+---
+template: post
+title: 'Going dark with Nuxt color mode'
+description: 'The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg. sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.'
+imgUrl: blog/going-dark-with-nuxtjs-color-mode/main.jpeg
+imgCredits: Benjamin Voros
+imgCreditsUrl: https://unsplash.com/@vorosbenisop
+date: 2020-05-19
+authors:
+  - name: "Debbie O'Brien"
+    avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg
+    link: https://twitter.com/debs_obrien
+tags:
+  - Nuxt
+  - Color mode
+category: Tutorial
+---
+
+

+  View demo /
+  Source
+

+
+The [@nuxtjs/color-mode module](https://github.com/nuxt-community/color-mode-module) is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (e.g.: sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.
+
+- [How does it work](#how-does-it-work)
+- [Let's get started](#lets-get-started)
+  - [Install the color-mode module](#install-the-color-mode-module)
+  - [Adding your color styles](#adding-your-color-styles)
+  - [Inspecting the HTML](#inspecting-the-html)
+  - [Creating a color-mode switcher](#creating-a-color-mode-switcher)
+  - [Importing our component](#importing-our-component)
+  - [Adding a click event to change our colors](#adding-a-click-event-to-change-our-colors)
+  - [Adding some icons](#adding-some-icons)
+  - [Importing the SVGs as components](#importing-the-svgs-as-components)
+  - [Adding a dynamic component](#adding-a-dynamic-component)
+  - [Styling our icons](#styling-our-icons)
+  - [Creating a method to show our preferred class](#creating-a-method-to-show-our-preferred-class)
+  - [Adding some text using the ColorScheme component](#adding-some-text-using-the-colorscheme-component)
+  - [Adding a text when system is chosen](#adding-a-text-when-system-is-chosen)
+  - [Tidying up our styles](#tidying-up-our-styles)
+  - [Conclusion](#conclusion)
+  - [What to do next](#what-to-do-next)
+
+## How does it work
+
+The `@nuxtjs/color-mode` adds a `.${color}-mode` class to the `` tag. It works with any Nuxt target, either static or server and universal or client-side rendering. It auto detects the system color-mode so that you don't have to manually change the color.
+
+It injects a `$colorMode` helper with:
+
+- `preference`: Actual color-mode selected (can be `'system'`), update it to change the user preferred color mode
+- `value`: Useful to know what color mode has been detected when `$colorMode === 'system'`, you should not update it
+- `unknown`: Useful to know if, during SSR or static generation, we need to render a placeholder
+
+## Let's get started
+
+You can work on an already created project or start a new one. For this example I have created a new project and added some dummy text to the index.vue file in the pages folder.
+
+```html{}[index.vue]
+
+```
+
+### Install the color-mode module
+
+First of all you need to install the module as a dependency to your Nuxt project.
+
+::code-group
+```bash [Yarn]
+yarn add --dev @nuxtjs/color-mode
+```
+```bash [NPM]
+npm install --save-dev @nuxtjs/color-mode
+```
+::
+
+Then you need to add the module to the `buildModules` section of your nuxt.config.js file.
+
+::alert{type="info"}
+If you don't have a nuxt.config.js file already you can create one in the root directory and add the code below.
+::
+
+```javascript{}[nuxt.config.js]
+export default {
+  buildModules: ['@nuxtjs/color-mode']
+}
+```
+
+If you using a version of Nuxt lower than 2.9.0 you will need to add it to the `modules` property instead of `buildModules`.
+
+::alert{type="info"}
+To check what version of Nuxt you have you can run `yarn nuxt -v` or `npm run nuxt -v`
+::
+
+### Adding your color styles
+
+Now you need to add some styles to your mode classes. Let's add a `main.css` file in our assets folder. We will use CSS variables to set the root color which will be light mode and then set the colors for dark and sepia mode. Then we can add some styles to our body and link tags.
+
+```css{}[assets/main.css]
+:root {
+  --color: #243746;
+  --color-primary: #158876;
+  --color-secondary: #0e2233;
+  --bg: #f3f5f4;
+  --bg-secondary: #fff;
+  --border-color: #ddd;
+}
+
+.dark-mode {
+  --color: #ebf4f1;
+  --color-primary: #41b38a;
+  --color-secondary: #fdf9f3;
+  --bg: #091a28;
+  --bg-secondary: #071521;
+  --border-color: #0d2538;
+}
+.sepia-mode {
+  --color: #433422;
+  --color-secondary: #504231;
+  --bg: #f1e7d0;
+  --bg-secondary: #eae0c9;
+  --border-color: #ded0bf;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--bg);
+  color: var(--color);
+  transition: background-color 0.3s;
+}
+a {
+  color: var(--color-primary);
+}
+```
+
+In order to use this CSS file in our application we need to register it. We do this by adding a css property to our configuration file and adding the css file that we have just created.
+
+```js{}[nuxt.config.js]
+css: ['@/assets/main.css']
+```
+
+### Inspecting the HTML
+
+Now if you launch your site with `npm run dev` or `npx nuxt dev` you should see dark mode if your system is already set to dark mode and if you inspect the code you will see the class added to your html tag.
+
+::video-player
+---
+sources:
+- src: /blog/going-dark-with-nuxtjs-color-mode/testing-html.mp4
+  type: video/mp4
+---
+::
+
+```html
+
+  // you might have light-mode here
+
+```
+
+Using the dev tools change the mode to sepia-mode and light-mode to see the effects.
+
+```html
+
+  
+  
+    
+  
+
+```
+
+You can also change the color in the console by typing:
+
+```js
+$nuxt.$colorMode.preference = 'sepia'
+```
+
+::video-player
+---
+sources:
+- src: /blog/going-dark-with-nuxtjs-color-mode/testing-console.mp4
+  type: video/mp4
+---
+::
+
+### Creating a color-mode switcher
+
+Obviously changing the mode in the dev tools is not what we want so let's create a color-mode switcher so our users can quickly change from one color to another.
+
+Let's create a component called `ColorModePicker` and we can add a list of colors. For now we can just print out the color from our v-for.
+
+```html{}[components/ColorModePicker.vue]
+
+```
+
+And in our data property let's return an array of colors for each mode.
+
+```html{}[components/ColorModePicker.vue]
+
+```
+
+### Importing our component
+
+Let's import our component into our index.vue page so we can see what is happening.
+
+```html{}[pages/index.vue]
+
+
+
+```
+
+And in our browser under `http://localhost:3000` you will see our list of colors.
+
+![list of colors](/blog/going-dark-with-nuxtjs-color-mode/list-of-colors.png)
+
+### Adding a click event to change our colors
+
+Then in our template we can add a click event that will make the `$colorMode.preference` equal to the color which comes from our data.
+
+We can use our `$colorMode` helper that we get with the color-mode module. When the user clicks the `$colorMode.preference` will be set to the color coming from our data.
+
+```html{}[components/ColorModePicker.vue]
+
  • 
+```
+
+This is actually all you need in order for it to work. If you check in your browser you will see that by clicking on any of the colors the background is changing. It probably won't have a pointer cursor so if you think it doesn't work it probably does just you are used to seeing the cursor.
+
+::video-player
+---
+sources:
+- src: /blog/going-dark-with-nuxtjs-color-mode/color-changing-text-only.mp4
+  type: video/mp4
+---
+::
+
+And if we check in the browser we can see it works but this is super ugly. Let's tidy it up a bit.
+
+### Adding some icons
+
+Let's add some icons. you can copy the icons [from here](https://github.com/nuxt-community/color-mode-module/tree/master/example/assets/icons) and place them in your assets folder in a new folder called icons.
+
+We are going to use our icons as a component and in order to do that we will use the [@nuxtjs/svg](https://www.npmjs.com/package/@nuxtjs/svg) module which allows you to import .svg files in multiple ways depending on the resource query you provide.
+
+First you will need to install it
+
+```bash
+yarn add --dev @nuxtjs/svg
+# OR npm install --save-dev @nuxtjs/svg
+```
+
+Then we need to add it to your `nuxt.config.js` in the buildModules section which should already have the `@nuxtjs/color-mode` module.
+
+```js{}[nuxt.config.js]
+buildModules: ['@nuxtjs/svg', '@nuxtjs/color-mode']
+```
+
+### Importing the SVGs as components
+
+We can now import these svg icons as components using the `?inline` query so that they are imported as inline SVGs.
+
+```html{}[components/ColorModePicker.vue]
+
+```
+
+### Adding a dynamic component
+
+Now we can use a dynamic component which will check which icon to add depending on the colors in our data array. Lets replace the `{{color}}` text with this new component inside our `
  • `.
+
+```html{}[components/ColorModePicker.vue]
+
+```
+
+Let's move our click event from our `
  • ` to our icon component.
+
+```html{}[components/ColorModePicker.vue]
+
+```
+
+### Styling our icons
+
+And let's add some styles so we can see our icons. We will use scoped styling and use the class feather. If you look into your svg files you will see that our SVGs have the class of feather so we can use this class to style it. We will also add a preferred and selected class so we know which one has been selected and what is the preferred one.
+
+```html{}[components/ColorModePicker.vue]
+
+```
+
+You won't see much difference right now except that the icons look a bit nicer but now we need to show a different class for our preferred icon which comes from our system preference and one for our selected icon which is for when we use the click event to change the color.
+
+### Creating a method to show our preferred class
+
+To do this we can create a method that will return the class we want. We can call our method `getClasses` and pass in the color as the parameter The two classes we want to return are preferred and selected. The preferred color should be equal to the `$colorMode.preference` and the selected color should be equal to the `$colorMode.value`. If the colorMode is unknown we can return an empty object.
+
+```js{}[components/ColorModePicker.vue]
+data () {
+  return {
+    colors: ['system', 'light', 'dark', 'sepia']
+  }
+},
+methods: {
+  getClasses (color) {
+    // Does not set classes on ssr when preference is system (because we don't know the preference until client-side)
+    if (this.$colorMode.unknown) {
+      return {}
+    }
+    return {
+      preferred: color === this.$colorMode.preference,
+      selected: color === this.$colorMode.value
+    }
+  }
+}
+```
+
+We can now add this class to our icon component. The class will call the getClasses method passing in the color we receive when we use the click event.
+
+```html{}[components/ColorModePicker.vue]
+
+```
+
+And you will see in the browser the colors are being applied just as we wanted. But it is not very clear when we click the system icon what is going on.
+
+### Adding some text using the ColorScheme component
+
+Let's add something that can help the user understand it.
+
+If you are doing SSR (`nuxt start` or `nuxt generate`) and if `$colorMode.preference` is set to `'system'`, using `$colorMode` in your Vue template will lead to a flash. This is due to the fact that we cannot know the user preferences when pre-rendering the page since they are detected on client-side.
+
+To avoid the flash, we have to guard any rendering path which depends on `$colorMode` with `$colorMode.unknown` to render a placeholder or use our `` component.
+
+Let's create a ColorScheme component under our `
      ` with a placeholder and a tag of `span`. Inside it we can add some text and display the `$colorMode.preference` which we receive from the color-mode module.
+
+```html{}[components/ColorModePicker.vue]
+
+  Color mode: {{ $colorMode.preference }}
+
+```
+
+You will now see in the browser that if you change the icon the text will appear that corresponds to the icon clicked.
+
+::video-player
+---
+sources:
+- src: /blog/going-dark-with-nuxtjs-color-mode/color-mode-text-icons.mp4
+  type: video/mp4
+---
+::
+
+### Adding a text when system is chosen
+
+We can improve this further by seeing when the preference is the system and adding another message that shows which value was detected.
+
+```html{}[components/ColorModePicker.vue]
+
+  Color mode: {{ $colorMode.preference }}
+  ({{ $colorMode.value }} mode detected)
+
+```
+
+If you test it out in the browser you will see it's looking pretty good and we are almost there.
+
+### Tidying up our styles
+
+We now just have to tidy up a few styles. Let's get rid of the dots from the `
        ` and add some spacing and some style to our `
        ` tag.
+
+```css{}[components/ColorModePicker.vue]
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+ul li {
+  display: inline-block;
+  padding: 5px;
+}
+p {
+  margin: 0;
+  padding-top: 5px;
+  padding-bottom: 20px;
+}
+```
+
+And in order to center it we can wrap our ColorModePicker component in a div with the class of container.
+
+```html{}[pages/index.vue]
+
        
+  
+
        
+```
+
+And add the styles to the container class in our styles
+
+```html{}[pages/index.vue]
+
+```
+
+### Conclusion
+
+And there you have your beautiful and fully working color-mode component. Feel free to have some more fun by changing the icons or adding more colors or modifying the color scheme. Have fun.
+
+::video-player
+---
+sources:
+- src: /blog/going-dark-with-nuxtjs-color-mode/final-working-version.mp4
+  type: video/mp4
+---
+::
+
+### What to do next
+
+::alert{type="next"}
+To learn more about using the color-mode with Tailwind check out [this article](https://medium.com/@fayazara/quick-way-to-implement-darkmode-in-nuxt-js-tailwindcss-corona-virus-tracker-712d004a0846).
+::
+
+::alert{type="next"}
+[Subscribe to the newsletter](#subscribe-to-newsletter) to not miss the upcoming articles and resources.
+::
diff --git a/content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md b/content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md
new file mode 100644
index 0000000000..ec2f258288
--- /dev/null
+++ b/content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md
@@ -0,0 +1,287 @@
+---
+template: post
+title: 'Moving from @nuxtjs/dotenv to runtime config'
+description: 'In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors.'
+imgUrl: blog/moving-from-nuxtjs-dotenv-to-runtime-config/main.jpeg
+imgCredits: Norris Niman
+imgCreditsUrl: https://unsplash.com/@norrisniman
+date: 2020-06-15
+authors:
+  - name: "Debbie O'Brien"
+    avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg
+    link: https://twitter.com/debs_obrien
+tags:
+  - Nuxt
+  - env
+category: Tutorial
+---
+
+It's time to migrate from @nuxtjs/dotenv module to use our new runtime config which has been released as of Nuxt v2.13.
+
+- [What are environment variables](#what-are-environment-variables)
+- [Misconceptions](#misconceptions)
+- [Why we need webpack](#why-we-need-webpack)
+- [How environment variables work](#how-environment-variables-work)
+- [Introducing the Nuxt runtime config](#introducing-the-nuxtjs-runtime-config)
+  - [The new runtime config values are:](#the-new-runtime-config-values-are)
+- [Migrating to the Nuxt runtime config from @nuxtjs/dotenv](#migrating-to-the-nuxtjs-runtime-config-from-nuxtjsdotenv)
+- [Migrating to the Nuxt runtime config from the env property](#migrating-to-the-nuxtjs-runtime-config-from-the-env-property)
+- [The env property v runtime config](#the-env-property-v-runtime-config)
+- [Using your config values](#using-your-config-values)
+- [Migrating your config values in your script tags](#migrating-your-config-values-in-your-script-tags)
+- [Migrating your config values in your templates](#migrating-your-config-values-in-your-templates)
+- [Expand/Interpolation Support](#expandinterpolation-support)
+- [Best Practices:](#best-practices)
+- [What to do next](#what-to-do-next)
+
+## What are environment variables
+
+In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors. Instead, we can store sensitive information, like keys and secrets, in password-protected CI tools or deployment pipelines. However, when we are developing applications locally we might not have access to deployment pipelines and therefore need somewhere to store these environment variables.
+
+## Misconceptions
+
+It is very easy to think that your secret keys are safe by placing them somewhere other than your source code such as a `.env` file, which makes it very easy to expose your secret keys to client-side bundles. Adding your `.env` file to `.gitignore` means this file is not pushed to your version control and therefore not available for people to see which is important if your repo is public. However, the .env file is not encrypted, and therefore placing secrets in environment variables doesn't really provide us with an increase in security and really it just keeps sensitive data out of plain sight. A `.env` option can easily mislead developers to expose secret keys to client-side bundles so always make sure this file is added to your .gitignore.
+
+## Why we need webpack
+
+Isomorphic applications, otherwise known as universal applications, need to share code between both the server and the client. Babel is used to compile our modern ES6 JavaScript code down to ES5 JavaScript so that it can work across all platforms. Node.js which is an asynchronous event-driven JavaScript runtime that can be used in computers and servers outside of a browser environment, uses the module system.
+
+Using modules in Node.js is done using require, e.g. require('lodash'). However, browser support for modules is still incomplete and therefore we need bundling tools such as webpack to transpile these modules into code that the browsers can read. Webpack basically makes client-side development more "Node-like" with the same module system semantics. This means that a require statement or an ES6 import statement will resolve the same way. And as our applications are not only JavaScript but also HTML, CSS and images we can require these using webpack's loaders.
+
+## How environment variables work
+
+At runtime, Node.js automatically loads environment variables into `process.env` so that they are available to use in your application. The reference to the environment variable is replaced with the correct value. For example, if you had an `API_SECRET` key with the value of `'my-secret'` then in your application where you had used `process.env.API_SECRET` this would be replaced with the value of my-secret.
+
+Values are read during build time and persisted in the webpack bundle. Therefore if we change our `API_SECRET` we will need to rebuild our application so that it can read the new value.
+
+## Introducing the Nuxt runtime config
+
+With Nuxt 2.13+ we have runtime config and built-in dotenv support providing better security and faster development! Two new options are added to your `nuxt.config.js` file which will allow passing runtime configuration which is then accessible using `$config` from the context. Despite the `env` option, runtime config is added to the Nuxt payload so there is no need to rebuild in order to update the runtime configuration when working in development or with Server-side rendering or single-page applications. Although for static sites you will still need to regenerate your site to see these changes.
+
+```js{}[nuxt.config.js]
+export default {
+  publicRuntimeConfig: {},
+  privateRuntimeConfig: {}
+}
+```
+
+### The new runtime config values are:
+
+- `publicRuntimeConfig` should hold all env variables that are public as these will be exposed on the frontend. This could include a reference to your public URL for example.
+- `privateRuntimeConfig` should hold all env variables that are private and that should not be exposed on the frontend. This could include a reference to your API secret tokens for example.
+
+::alert{type="warning"}
+privateRuntimeConfig always overrides publicRuntimeConfig on server-side. `$config` in server mode is { ...public, ...private } but for client mode only { ...public }
+::
+
+## Migrating to the Nuxt runtime config from @nuxtjs/dotenv
+
+If you have the `@nuxtjs/dotenv` module installed then you can remove this module by uninstalling it and removing it from the modules section of your nuxt.config file. You can then migrate to the Nuxt runtime config by adding the new properties to your nuxt.config.js file. And then you can add your variables from your `.env` files into your public and private runtime config properties so that Nuxt has access to these variables at runtime.
+
+If your `.env` file looks something like this:
+
+```{}[.env]
+BASE_URL=https://nuxtjs.org
+API_SECRET=1234
+```
+
+Then migrating it to the new runtime config would look something like:
+
+```js{}[nuxt.config.js]
+export default {
+  publicRuntimeConfig: {
+    baseURL: process.env.BASE_URL
+  },
+  privateRuntimeConfig: {
+    apiSecret: process.env.API_SECRET
+  }
+}
+```
+
+This can be simplified even further by using a default value instead of having to maintain the value in both the runtime config and the `.env` file when using non-sensitive values.
+
+```js{}[nuxt.config.js]
+export default {
+  publicRuntimeConfig: {
+    baseURL: process.env.BASE_URL || 'https://nuxtjs.org'
+  }
+}
+```
+
+Also this can be a better replacement for `.env.example` and the default values can point to staging keys/configs.
+
+```js{}[nuxt.config.js]
+export default {
+  publicRuntimeConfig: {
+    baseURL: process.env.NODE_ENV === 'production' ? 'https://nuxtjs.org' : 'https://dev.nuxtjs.org'
+  }
+}
+```
+
+## Migrating to the Nuxt runtime config from the env property
+
+If you have your env variables stored in your nuxt.config then you can migrate these to use the new runtime configs by adding them to your nuxt.config file.
+
+If your env variables in your nuxt.config look like this:
+
+```js{}[nuxt.config.js]
+export default {
+  env: {
+    BASE_URL: 'https://nuxtjs.org',
+    API_SECRET: '1234'
+  }
+}
+```
+
+Then migrating it to the new runtime config would look something like:
+
+```js{}[nuxt.config.js]
+export default {
+  publicRuntimeConfig: {
+    baseURL: 'https://nuxtjs.org'
+  },
+  privateRuntimeConfig: {
+    apiSecret: process.env.API_SECRET
+  }
+}
+```
+
+::alert{type="warning"}
+Remember secret keys should not be placed in your nuxt.config file so if you do have them in your env variables then you should remove them. You can create a .env file if needed or else your secret keys can be stored just in your hosting environment.
+::
+
+## The env property v runtime config
+
+You can still use the env property and it is still useful for env variables that are required at build time rather than runtime such as NODE_ENV=staging or VERSION=1.2.3. However for runtime env variables the runtime config is preferred as using the env property can be as dangerous as using the dotenv module when used incorrectly.
+
+## Using your config values
+
+Once you have stored your values in the public or private runtime config in your `nuxt.config` file you can then access these values anywhere by using the context in your pages, store, components and plugins by using `this.$config` or `context.$config` instead.
+
+```html{}[pages/index.vue]
+
+```
+
+And inside your templates you can access it directly using `{{ $config.* }}`
+
+```html{}[pages/index.vue]
+
+```
+
+## Migrating your config values in your script tags
+
+If you are already using the env variable in your script tags such as in async data
+
+```js
+async asyncData ({ env }) {
+```
+
+then you can just replace env for \$config when passing into the context. Here we also pass in the key from the config that we want to access. In this case baseURL.
+
+```js
+async asyncData ({ $config: { baseURL } }) {
+```
+
+Then instead of using env.apiUrl
+
+```js
+const posts = await fetch(`${env.baseURL}/posts`)
+```
+
+you can use baseURL direct in your code as we have already passed this in into the config option above and therefore we don't have to reference \$config in our fetch.
+
+```js
+const posts = await fetch(`${baseURL}/posts`)
+```
+
+## Migrating your config values in your templates
+
+If you have code that is using the env variables you can migrate to using the \$config option. For example if in your code you had
+
+```html
+
        {{process.env.baseURL}}
        
+```
+
+You can change this by using \$config instead
+
+```html
+
        {{$config.baseURL}}
        
+```
+
+## Expand/Interpolation Support
+
+Expand for run time config happens only if there is already a key.
+
+```bash{}[.env]
+API_SECRET=1234
+```
+
+```js{}[nuxt.config.js]
+export default {
+  privateRuntimeConfig: {
+    API_SECRET: ''
+  }
+}
+```
+
+Interpolation allows nesting env vars.
+
+```bash{}[.env]
+BASE_URL=/api
+PUBLIC_URL=https://nuxtjs.org
+```
+
+```js{}[nuxt.config.js]
+export default {
+  privateRuntimeConfig: {
+    baseURL: '${PUBLIC_URL}${BASE_URL}'
+  }
+}
+```
+
+::alert{type="info"}
+It is also possible to use a function for publicRuntimeConfig and privateRuntimeConfig but not recommended.
+::
+
+## Best Practices:
+
+::list{type="danger"}
+- Don’t commit sensitive values or secret keys to git
+::
+
+::list{type="danger"}
+- Don't store secret keys or sensitive values in your nuxt.config or `.env` unless is gitignored
+::
+
+::list{type="success"}
+- Use default values for runtimeConfig such as process.env.baseURL || 'https://nuxtjs.org'
+::
+
+::list{type="success"}
+- Store secret keys correctly using your hosting platform such as on Heroku or Netlify etc
+::
+
+::list{type="success"}
+- Follow JS naming convention (secretKey rather than SECRET_KEY) for runtimeConfig
+::
+
+::list{type="success"}
+- Prefer using runtimeConfig rather than `env` option
+::
+
+## What to do next
+
+::alert{type="next"}
+To learn more about going full static checkout [this article](/announcements/going-full-static).
+::
+
+::alert{type="next"}
+[Subscribe to the newsletter](#subscribe-to-newsletter) to not miss the upcoming articles and resources.
+::
diff --git a/content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md b/content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md
new file mode 100644
index 0000000000..bf51f14bc7
--- /dev/null
+++ b/content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md
@@ -0,0 +1,586 @@
+---
+template: post
+title: 'Build a dev.to clone with Nuxt new fetch'
+description: Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI.
+imgUrl: blog/build-dev-to-clone-with-nuxt-new-fetch/main.jpeg
+imgCredits: Patrick Mueller
+imgCreditsUrl: https://unsplash.com/@pietyo
+date: 2020-04-08
+authors:
+  - name: Sergey Bedritsky
+    avatarUrl: https://pbs.twimg.com/profile_images/1244291720566669315/pGg6Xn-M_400x400.jpg
+    link: https://twitter.com/sergeybedritsky
+  - name: Sebastien Chopin
+    avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
+    link: https://twitter.com/Atinux
+tags:
+  - Nuxt
+  - Fetch
+  - Asynchronous Data Fetching
+  - API
+category: Tutorial
+---
+
+_Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI._
+
+::video-player
+---
+sources:
+- src: /blog/build-dev-to-clone-with-nuxt-new-fetch/dev-clone-nuxt.mp4
+  type: video/mp4
+---
+::
+
+
        
+  View demo /
+  Source
+
        
+
+This article is intended to demonstrate use cases and awesomeness of new Nuxt `fetch` functionality [introduced in release v2.12](/docs/components-glossary/fetch#nuxt-gt-2-12), and show you how to apply its power in your own projects. For in-depth technical analysis and details of the new `fetch` you can check [Krutie Patel’s article](/announcements/understanding-how-fetch-works-in-nuxt-2-12).
+
+Here’s the high-level outline of how we will build our dev.to clone using `fetch` hook. We will:
+
+- use `$fetchState` for showing nice placeholders while data is fetching on the client side
+- use `keep-alive` and `activated` hook to efficiently cache API requests on pages that have already been visited
+- reuse the `fetch` hook with `this.$fetch()`
+- set `fetchOnServer` value to control when we need to render our data on the server side or not
+- find a way to handle errors from `fetch` hook.
+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [DEV API](#dev-api)
+- [Setting up the Project](#setting-up-the-project)
+  - [CSS Styles](#css-styles)
+  - [UI Design](#ui-design)
+  - [SVG icons](#svg-icons)
+  - [Dependencies](#dependencies)
+- [Developing the Application](#developing-the-application)
+  - [URL structure](#url-structure)
+  - [Caching requests with `keep-alive` and `activated` hook](#caching-requests-with-keep-alive-and-activated-hook)
+  - [Using `fetch` in page components](#using-fetch-in-page-components)
+  - [Reuse `fetch` with `this.$fetch()`](#reuse-fetch-with-thisfetch)
+  - [Applying placeholders with `$fetchState`](#applying-placeholders-with-fetchstate)
+  - [Using `fetch` in any other component 🔥](#using-fetch-in-any-other-component-)
+  - [Error handling](#error-handling)
+- [Conclusion](#conclusion)
+
+## DEV API
+
+In September 2019 DEV [opened](https://twitter.com/bendhalpern/status/1176663688742395904) their public API that we can now use to access articles, users and other resources data. _Please note that it’s still Beta, so it could change in future or some things might not work as expected._
+
+For creating our DEV clone we are interested in such API endpoints:
+
+- [getArticles](https://docs.dev.to/api/#operation/getArticles): to access a list of articles, filtered by the `tag`, `state`, `top`, `username` and paginated with `page` parameters
+- [getArticleById](https://docs.dev.to/api/#operation/getArticleById): to access an article content
+- [getUser](https://docs.dev.to/api/#operation/getUser): to access user data
+- [getCommentsByArticleId](https://docs.dev.to/api/#operation/getCommentsByArticleId): to fetch comments related to the article
+
+To keep it simple, for communication with the DEV API we will use native JavaScript [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) .
+
+## Setting up the Project
+
+If you are an experienced developer you can skip this part and [get straight to the point](#developing-the-application).
+
+Make sure you have Node and npm installed. We will use `create-nuxt-app` to [initialize](/docs/get-started/installation#using-code-create-nuxt-app-code-) the project, so just type the following command in terminal:
+
+```
+npx create-nuxt-app nuxt-dev-to-clone
+# leave the default answers for each question
+```
+
+Now `cd nuxt-dev-to-clone/` and run `npm run dev`. Congrats, your Nuxt app is running on [http://localhost:3000](http://localhost:3000/)!
+
+Let’s install necessary packages and discuss how we will build our app next.
+
+### CSS Styles
+
+For styling we will use the most common CSS pre-processor Sass/SCSS and leverage Vue.js [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html) feature, to keep our components styles encapsulated. To [use Sass/SCSS with Nuxt](/docs/features/configuration#pre-processors) run:
+
+::code-group
+```bash [Yarn]
+yarn add sass sass-loader@10 -D
+```
+```bash [NPM]
+npm install sass sass-loader@10 --save-dev
+```
+::
+
+We also will use [@nuxtjs/style-resources](https://github.com/nuxt-community/style-resources-module) module that will help us to use our design tokens defined in SCSS variables in any Vue file without the necessity of using `@import` statements in each file.
+
+::code-group
+```bash [Yarn]
+yarn add @nuxtjs/style-resources
+```
+```bash [NPM]
+npm install @nuxtjs/style-resources
+```
+::
+
+Now tell Nuxt to use it by adding this code to `nuxt.config.js`
+
+```js{}[nuxt.config.js]
+buildModules: ['@nuxtjs/style-resources']
+```
+
+Read more about this module [here](https://github.com/nuxt-community/style-resources-module#scss-example), regarding `buildModules`, you can learn more on it in the [modules vs buildModules](/docs/configuration-glossary/configuration-modules#-code-buildmodules-code-) section of the documentation.
+
+Let’s define our design tokens as SCSS variables, put them in `~/assets/styles/tokens.scss` and tell `@nuxtjs/style-resources` to load them by adding to `nuxt.config.js`
+
+```js{}[nuxt.config.js]
+styleResources: {
+  scss: ['~/assets/styles/tokens.scss']
+}
+```
+
+Our design tokens are now available through SCSS variables in every Vue component.
+
+### UI Design
+
+It will be kinda boring just to copy the existing DEV design and layout, so why don’t we experiment a little bit. You have probably already heard of the new UI trend — neumorphism. If you missed it somehow, read more about it [here](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6).
+
+We can find a lot of [Dribbble shots](https://dribbble.com/tags/neumorphism) (from where this trend came from), but still only a few examples of real-world web apps built with neumorphism style interface, so we just can’t miss the chance to recreate it with CSS and Vue.js. It’s simple, clean and fresh.
+
+I am not going to describe the styling aspect of this application in detail, but if you are interested, you can check this awesome article from [CSS Tricks](https://css-tricks.com/neumorphism-and-css/) about neumorphism and CSS.
+
+### SVG icons
+
+For SVG icons lets use [@nuxt/svg](https://github.com/nuxt-community/svg-module). This module allows us to import `.svg` files as inline SVG, while keeping SVG sources in single place and not polluting Vue template markup with loads of SVG code.
+
+::code-group
+```bash [Yarn]
+yarn add @nuxtjs/svg -D
+```
+```bash [NPM]
+npm install @nuxtjs/svg -D
+```
+::
+
+```js{}[nuxt.config.js]
+buildModules: ['@nuxtjs/svg', '@nuxtjs/style-resources']
+```
+
+### Dependencies
+
+To keep the frontend app fast and simple we will use only two dependencies, both from Vue.js core members:
+
+- [vue-observe-visibility](https://github.com/Akryum/vue-observe-visibility) by [Guillaume Chau](https://twitter.com/Akryum), for effective detecting elements in viewport with IntersectionObserver and trigger lazy loading. Only 1.6kB gzipped
+- [vue-content-placeholders](https://github.com/michalsnik/vue-content-placeholders) by [Michał Sajnóg](https://twitter.com/michalsnik), for showing nicely animated placeholders for UI elements while content is fetching. Only 650B gzipped.
+
+Let’s add them as Nuxt [plugins](/docs/configuration-glossary/configuration-plugins), by creating two files.
+
+```js{}[vue-observe-visibility.client.js]
+import Vue from 'vue'
+import VueObserveVisibility from 'vue-observe-visibility'
+
+Vue.use(VueObserveVisibility)
+```
+
+```js{}[vue-placeholders.js]
+import Vue from 'vue'
+import VueContentPlaceholders from 'vue-content-placeholders'
+
+Vue.use(VueContentPlaceholders)
+```
+
+And add them to ``
+
+```js{}[nuxt.config.js]
+plugins: [
+  '~/plugins/vue-placeholders.js',
+  '~/plugins/vue-observe-visibility.client.js'
+]
+```
+
+## Developing the Application
+
+Now we finally can start developing our DEV clone powered by Nuxt and [new fetch](/docs/components-glossary/fetch).
+
+### URL structure
+
+Let’s imitate the DEV URL structure for our simple app. Our [pages](/docs/concepts/views#pages) folder should look like this:
+
+```
+├── index.vue
+├── t
+│   └── _tag.vue
+├── top.vue
+└── _username
+    ├── _article.vue
+    └── index.vue
+```
+
+We will have 2 [static pages](/docs/get-started/routing#automatic-routes):
+
+- `index.vue`: latest articles about Nuxt will be listed
+- `top.vue`: most popular articles for last year period.
+
+For the rest of the app URL’s we will use convenient Nuxt file based [dynamic routes](/docs/directory-structure/pages#dynamic-pages) feature to scaffold necessary pages by creating such file structure:
+
+- `_username/index.vue` - user profile page with list of his published articles
+- `_username/_article.vue` - this is where article, author profile and comments will be rendered
+- `t/_tag.vue` - list of best articles by any tag that exist on DEV
+
+That’s all. Pretty simple, right?
+
+### Caching requests with `keep-alive` and `activated` hook
+
+One of the coolest practical features of the new `fetch` is its ability to work with `keep-alive` directive to save `fetch` calls on pages you have already visited. Let’s apply this feature in `layouts/default.vue` layout like this.
+
+```html{}[layouts/default.vue]
+
+```
+
+With this directive `fetch` will trigger only on the first page visit, after that Nuxt will save rendered components in memory, and on every subsequent visit it will be just reused from the cache. Could it be simpler than that?
+
+Moreover, Nuxt gives us fine grained control over `keep-alive` with the `keep-alive-props` property where you can set the number of components which you want to cache, and `activated` hook, where you can control TTL (time to live) of the cache. We will use the latest one in our app in the next sections.
+
+### Using `fetch` in page components
+
+Let’s dive into the `fetch` feature itself.
+
+Currently as you can see from the [final result](https://dev-clone.nuxtjs.app/) we have 3 page components that basically reuse the same code — it’s the `index.vue`, `top.vue` and `t/_tag.vue` page components. They simply render a list of article preview cards.
+
+```html{}[index.vue]
+
+
+
+```
+
+Pay attention to this code block:
+
+```js{}[index.vue]
+async fetch() {
+  const articles = await fetch(`https://dev.to/api/articles?tag=nuxt&state=rising&page=${this.currentPage}`).then((res) => res.json())
+
+  this.articles = this.articles.concat(articles)
+}
+```
+
+Here we are making a request to the DEV `/articles` endpoint, with query parameters that API understands. Don’t confuse the `fetch` hook with the JavaScript [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) interface which simply helps us to send a request to the DEV API, and then parse the response with `res.json()`.
+
+Also notice that the new `fetch` hook doesn’t serve just to dispatch Vuex store action or committing mutation to set state, now it has access to `this` context, and is able to mutate component’s data directly. This is a very important new feature, and you can [read more](/announcements/understanding-how-fetch-works-in-nuxt-2-12) about it in the previous article about `fetch`.
+
+Now let’s markup the `` component which receives `article` prop and renders its data nicely.
+
+```html{}[ArticleCardBlock.vue]
+
+
+
+```
+
+### Reuse `fetch` with `this.$fetch()`
+
+It already should display a list of articles fetched from DEV - but it feels like we are not making full use of this API. Let’s add lazy loading to the articles list, and use the pagination parameter provided by this API. So when we scroll to the bottom of the page a new chunk of articles will be fetched and rendered.
+
+To efficiently detect when to fetch the next page it’s better to use [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). For that we will use a previously installed Vue plugin called `vue-observe-visibility` which is basically a wrapper around this API and it will detect when an element is becoming visible or hidden on the page. This plugin provides us a possibility to use `v-observe-visibility` directive on any element, so let’s add it to last `` component:
+
+```html{}[index.vue]
+
+```
+
+As you can guess from the code above, when the last `` appears in viewport `lazyLoadArticles` will be fired. Let’s look at it:
+
+```js
+lazyLoadArticles(isVisible) {
+  if (isVisible) {
+    if (this.currentPage < 5) {
+      this.currentPage++
+      this.$fetch()
+    }
+  }
+}
+```
+
+And here we see the power of the new `fetch` hook. We can just reuse `$fetch` as a method and fetch the next page when lazy loading is triggered.
+
+### Applying placeholders with `$fetchState`
+
+If you already applied code from the previous section and tried client-side navigation between `index.vue`, `top.vue` and `t/_tag.vue` page components you probably noticed that it shows an empty page for the moment, while it’s waiting for the API request to complete. This is intended behavior, and it’s different from the old `fetch` and `asyncData` hooks that triggered before page navigation.
+
+Thanks to `$fetchState.pending` wisely provided by the `fetch` hook we can use this flag to display a placeholder when fetch is being called on client-side. `vue-content-placeholders` plugin will be used as a placeholder.
+
+```html{}[index.vue]
+
+```
+
+We imitate how `` looks with [vue-content-placeholders components](https://github.com/michalsnik/vue-content-placeholders#available-components-and-properties), and as you could see in source code it will be used in almost every component that uses the `fetch` hook, so let’s not pay attention on those parts of code anymore (they are basically the same in each component).
+
+### Using `fetch` in any other component 🔥
+
+This is probably the most interesting feature of the new `fetch` hook. **We can now use the `fetch` hook in any Vue component without worrying about breaking SSR!** This means far less headache about how to structure your async API calls and components.
+
+To explore this great functionality let’s move to `_username/_article.vue` page component.
+
+```html{}[_username/_article.vue]
+
+
+
+```
+
+Here we see no data fetching at all, only a template layout consisting of 3 components: ``, ``, ``. And each of those components has its own `fetch` hook. With old `fetch` or current `asyncData` earlier we would have to make all three requests to three different DEV endpoints and then pass them to each component as a prop. But now those components are completely encapsulated.
+
+In `` we use `fetch` just like we’d use it in a page component.
+
+```js
+async fetch() {
+  const article = await fetch(
+    `https://dev.to/api/articles/${this.$route.params.article}`
+  ).then((res) => res.json())
+
+  if (article.id && article.user.username === this.$route.params.username) {
+    this.article = article
+    this.$store.commit('SET_CURRENT_ARTICLE', this.article)
+  } else {
+    // set status code on server
+    if (process.server) {
+      this.$nuxt.context.res.statusCode = 404
+    }
+    // throwing an error will set $fetchState.error
+    throw new Error('Article not found')
+  }
+}
+```
+
+Now, remember in the section about caching I mentioned that there’s an `activated` hook that can be used for managing TTL of `fetch`? This is example of such usage:
+
+```js
+activated() {
+	if (this.$fetchState.timestamp <= Date.now() - 60000) {
+	  this.$fetch()
+	}
+}
+```
+
+With this code in place we will call fetch again if last fetch was more than 60 sec ago. All other requests within this period will be cached.
+
+There’s also interesting usage of another `fetch` feature called `fetchOnServer` in the `` component. We don’t really want to render this content on the server side, because comments are user generated and could be irrelevant or spammy. We don’t need any SEO for this content block. Now, with the help of mentioned `fetchOnServer` we have such control:
+
+```js
+async fetch() {
+  this.comments = await fetch(
+    `https://dev.to/api/comments?a_id=${this.$route.params.article}`
+  ).then((res) => res.json())
+},
+fetchOnServer: false
+```
+
+### Error handling
+
+Last thing that should be mentioned is error handling. You probably already saw that we used error handling above, but let’s pay more attention to this important topic.
+
+As you know, `fetch` is handled at the **component level**, when doing server-side rendering, the parent (virtual) dom tree is already rendered when rendering the component, so we cannot change it by calling `$nuxt.error(...)`, instead we have to **handle the error at the component level**.
+
+`$fetchState.error` is set if an error is thrown in the `fetch` hook, so we can use it in our template to display an error message:
+
+```html
+
+```
+
+Then, in our `fetch` hook, we will throw the error if we don't find the article corresponding for the defined author:
+
+```js
+async fetch() {
+  const article = await fetch(
+    `https://dev.to/api/articles/${this.$route.params.article}`
+  ).then((res) => res.json())
+
+  if (article.id && article.user.username === this.$route.params.username) {
+    this.article = article
+  } else {
+    // set status code on server
+    if (process.server) {
+      this.$nuxt.context.res.statusCode = 404
+    }
+    throw new Error('Article not found')
+  }
+}
+```
+
+Note here that we wrap `this.$nuxt.context.res.statusCode = 404` around `process.server`, this is used to set the HTTP status code on the server-side for correct SEO.
+
+## Conclusion
+
+In this article we explored Nuxt new `fetch` and built an app with the basic DEV content features and structure using only this `fetch` hook. I hope you've got some inspiration to build your own version of DEV.TO. Don’t forget to check out the [source code](https://github.com/bdrtsky/nuxt-dev-to-clone) for a more complete example and functionality.
+
+**What to do next:**
+
+::alert{type="next"}
+Read [Krutie Patel article](/announcements/understanding-how-fetch-works-in-nuxt-2-12) with in-depth analysis of how new `fetch` hook works
+::
+
+::alert{type="next"}
+Check [nuxt-hackernews](https://github.com/nuxt/hackernews) for similar usage of [Hacker News API](https://github.com/HackerNews/API)
+::
+
+::alert{type="next"}
+[Subscribe](#subscribe-to-newsletter) to the newsletter to not miss the upcoming articles and resources, I plan to write an article about how to create your personal blog using Nuxt, with DEV as the CMS.
+::
diff --git a/content/fa/tutorials/index.md b/content/fa/tutorials/index.md
new file mode 100644
index 0000000000..36655a3739
--- /dev/null
+++ b/content/fa/tutorials/index.md
@@ -0,0 +1,6 @@
+---
+template: blog
+title: Tutorials
+description: Discover tutorials made by the Nuxt community.
+blogPostList: true
+---
diff --git a/content/fa/video-courses/index.md b/content/fa/video-courses/index.md
new file mode 100644
index 0000000000..c20d1c915c
--- /dev/null
+++ b/content/fa/video-courses/index.md
@@ -0,0 +1,64 @@
+---
+template: blog
+title: 'Video Courses'
+description: 'Discover and learn more about the Nuxt Framework with free and premium video courses.'
+---
+::video-courses-list
+---
+video-courses:
+  one:
+    title: Learn Nuxt by Building a Real World App
+    description: Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework.
+    image: /img/video-courses/mastering_nuxt.png
+    link: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite'
+    tier: Premium
+  two:
+    title: Get Started with Nuxt
+    description: Learn the essentials for how to build and deploy a Nuxt site including dynamic routes, data fetching, SEO, lazy loading, global styles and transitions as well as how to generate and deploy your Nuxt app.
+    image: /img/video-courses/jamstack_explorer.png
+    link: 'https://explorers.netlify.com/learn/get-started-with-nuxt'
+    tier: Free
+  three:
+    title: Learn Nuxt with Debbie
+    description: A playlist of YouTube videos covering all things Nuxt including short videos and live streams.
+    image: /img/video-courses/learn_nuxt_with_debbie.png
+    link: 'https://www.youtube.com/c/DebbieOBrien'
+    tier: Free
+  four:
+    title: Building Applications with Vue & Nuxt
+    description: Build dynamic web applications with Vue and Nuxt! Throughout the course you’ll build out a variety of projects leveraging the tools in the Vue ecosystem including the Vue CLI, Nuxt, Vuex Store, and more.
+    image: /img/video-courses/building_applications_fe_masters.png
+    link: 'https://frontendmasters.com/courses/vue-nuxt-apps/'
+    tier: Premium
+  five:
+    title: Build a Job Board with Laravel, GraphQL, Nuxt and Apollo
+    description: Learn while you build a GraphQL API with Laravel Lighthouse, then build a Nuxt frontend with Apollo to consume it. All styled with Tailwind.
+    image: /img/video-courses/job_board.png
+    link: 'https://codecourse.com/courses/build-a-job-board-with-laravel-graphql-nuxt-and-apollo'
+    tier: Premium
+  six:
+    title: Nuxt - Vue.js on Steroids
+    description: Build highly engaging Vue JS apps with Nuxt. Nuxt adds easy server-side-rendering and a folder-based config approach.
+    image: /img/video-courses/vuejs_on_steroids.png
+    link: 'https://www.udemy.com/course/nuxtjs-vuejs-on-steroids/'
+    tier: Premium
+  seven:
+    title: Scaling Vue with Nuxt
+    description: Once you are comfortable with Vue, learning a framework like Nuxt allows you to create production-ready web apps which follow best practices.
+    image: /img/video-courses/scaling_vue_with_nuxt.png
+    link: 'https://www.vuemastery.com/courses/scaling-vue-with-nuxt-js/why-use-nuxt'
+    tier: Premium
+  eight:
+    title: Nuxt Fundamentals
+    description: Learn the fundamentals of Nuxt in this course that we created together with the founders of Nuxt. The course covers what you need to know from scaffolding to deploying your first Nuxt application.
+    image: /img/video-courses/nuxt_fundamentals.png
+    link: 'https://vueschool.io/courses/nuxtjs-fundamentals?friend=nuxt&utm_source=Nuxtjs.org&utm_medium=Link&utm_content=Courses&utm_campaign=nuxtjs-fundamentals'
+    tier: Free
+  nine:
+    title: Create a News App with Vue.js and Nuxt
+    description: You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.
+    image: /img/video-courses/news_app.png
+    link: 'https://egghead.io/courses/create-a-news-app-with-vue-js-and-nuxt'
+    tier: Free
+---
+::

From 831a5ad96f99a5c10d626fff00ddc46ac4c63021 Mon Sep 17 00:00:00 2001
From: soroush ebadi 
Date: Sun, 6 Feb 2022 16:24:37 +0330
Subject: [PATCH 2/2] feat(add persian content): add only  persian content to
 directory structure

---
 content/fa/_collections/design/colors.md      |  13 -
 content/fa/_collections/design/logos.md       |  19 -
 content/fa/_collections/design/monogram.md    |  16 -
 content/fa/_collections/events/2019.md        |  47 -
 content/fa/_collections/events/2020.md        |  80 --
 content/fa/_collections/events/2021.md        |  48 -
 content/fa/_collections/events/index.md       |   3 -
 content/fa/_collections/navigations/footer.md |  55 --
 content/fa/_collections/navigations/header.md | 103 --
 content/fa/_collections/teams/1.framework.md  |  51 -
 content/fa/_collections/teams/2.community.md  | 240 -----
 content/fa/_collections/teams/index.md        |   3 -
 content/fa/_collections/testimonials/index.md |  85 --
 .../0.nuxt-static-improvements.md             | 169 ----
 .../fa/announcements/1.going-full-static.md   | 173 ----
 ...erstanding-how-fetch-works-in-nuxt-2-12.md | 336 -------
 .../3.nuxtjs-from-terminal-to-browser.md      |  55 --
 .../4.introducing-smart-prefetching.md        |  31 -
 content/fa/announcements/5.nuxt3-beta.md      |  84 --
 content/fa/announcements/index.md             |   9 -
 content/fa/case-studies/0.github.md           |  55 --
 content/fa/case-studies/1.livementor.md       |  56 --
 content/fa/case-studies/2.stores.md           |  46 -
 content/fa/case-studies/3.parent-scheme.md    |  60 --
 content/fa/case-studies/4.line.md             |  56 --
 .../fa/case-studies/5.404-place-vendome.md    |  44 -
 content/fa/case-studies/6.komercia.md         |  46 -
 .../case-studies/7.new-york-public-radio.md   |  46 -
 content/fa/case-studies/index.md              |   9 -
 content/fa/contribution-guide/index.md        | 105 --
 content/fa/deployments/0.vercel.md            |  70 --
 content/fa/deployments/1.netlify.md           |  73 --
 content/fa/deployments/2.layer0.md            |  75 --
 content/fa/deployments/21yunbox.md            |  61 --
 content/fa/deployments/amazon-web-services.md | 413 --------
 content/fa/deployments/azure-portal.md        | 157 ---
 .../fa/deployments/azure-static-web-apps.md   | 121 ---
 content/fa/deployments/bip.md                 |  60 --
 content/fa/deployments/cleavr.md              |  53 -
 content/fa/deployments/cloudflare.md          |  26 -
 content/fa/deployments/digital-ocean.md       |  63 --
 content/fa/deployments/dokku.md               |  67 --
 content/fa/deployments/fume.md                |  44 -
 content/fa/deployments/github-pages.md        | 293 ------
 content/fa/deployments/google-appengine.md    |  76 --
 content/fa/deployments/google-cloud-run.md    | 127 ---
 content/fa/deployments/heroku.md              |  57 --
 content/fa/deployments/hostman.md             |  85 --
 content/fa/deployments/index.md               |   8 -
 content/fa/deployments/koyeb.md               | 128 ---
 content/fa/deployments/nginx.md               | 252 -----
 content/fa/deployments/platformsh.md          |  39 -
 content/fa/deployments/pm2.md                 |  65 --
 content/fa/deployments/qovery.md              |  70 --
 content/fa/deployments/stormkitio.md          |  60 --
 content/fa/deployments/surge.md               |  54 -
 content/fa/design/index.md                    |  75 --
 content/fa/events/index.md                    |   7 -
 .../fa/examples/1.routing/1.hello-world.md    |  21 -
 .../1.routing/2.active-link-classes.md        |  25 -
 .../fa/examples/1.routing/3.dynamic-pages.md  |  25 -
 .../fa/examples/1.routing/4.nested-pages.md   |  25 -
 content/fa/examples/1.routing/index.md        |   5 -
 content/fa/examples/10.modules/1.local.md     |  23 -
 content/fa/examples/10.modules/2.axios.md     |  30 -
 content/fa/examples/10.modules/index.md       |   5 -
 .../examples/2.data-fetching/1.async-data.md  |  25 -
 .../examples/2.data-fetching/2.fetch-hook.md  |  29 -
 content/fa/examples/2.data-fetching/index.md  |   5 -
 .../3.assets-management/1.pre-processors.md   |  29 -
 .../3.assets-management/2.webpack-assets.md   |  29 -
 .../fa/examples/3.assets-management/index.md  |   5 -
 .../examples/4.transitions/1.transitions.md   |  24 -
 content/fa/examples/4.transitions/index.md    |   5 -
 content/fa/examples/5.seo/1.html-head.md      |  29 -
 content/fa/examples/5.seo/2.twitter-og.md     |  29 -
 content/fa/examples/5.seo/index.md            |   5 -
 .../6.loading/1.customize-nuxt-loading.md     |  23 -
 .../2.customize-loading-indicator.md          |  24 -
 .../6.loading/3.custom-loading-component.md   |  25 -
 content/fa/examples/6.loading/index.md        |   5 -
 .../fa/examples/7.miscellaneous/1.layouts.md  |  23 -
 .../2.lazy-loading-components.md              |  28 -
 .../examples/7.miscellaneous/3.vuex-store.md  |  23 -
 .../fa/examples/7.miscellaneous/4.helpers.md  |  29 -
 content/fa/examples/7.miscellaneous/index.md  |   5 -
 content/fa/examples/8.middlewares/1.router.md |  27 -
 content/fa/examples/8.middlewares/2.named.md  |  27 -
 .../fa/examples/8.middlewares/3.anonymous.md  |  23 -
 content/fa/examples/8.middlewares/index.md    |   5 -
 content/fa/examples/9.plugins/1.vue.md        |  27 -
 .../fa/examples/9.plugins/2.client-only.md    |  23 -
 .../examples/9.plugins/3.external-packages.md |  31 -
 content/fa/examples/9.plugins/4.custom.md     |  34 -
 content/fa/examples/9.plugins/index.md        |   5 -
 content/fa/examples/index.md                  |  11 -
 content/fa/index.md                           | 282 ------
 content/fa/modules/index.md                   |  20 -
 content/fa/partners/index.md                  |  36 -
 content/fa/releases/index.md                  |   6 -
 content/fa/showcases/index.md                 |  25 -
 content/fa/sponsors/index.md                  |  27 -
 content/fa/support/index.md                   |  70 --
 content/fa/teams/index.md                     |  36 -
 content/fa/testimonials/index.md              |   7 -
 content/fa/themes/index.md                    |  45 -
 .../fa/tutorials/0.creating-a-nuxt-module.md  | 433 --------
 .../1.creating-blog-with-nuxt-content.md      | 935 ------------------
 ...veloper-experience-with-nuxt-components.md | 440 ---------
 .../3.going-dark-with-nuxtjs-color-mode.md    | 493 ---------
 ...ng-from-nuxtjs-dotenv-to-runtime-config.md | 287 ------
 ....build-dev-to-clone-with-nuxt-new-fetch.md | 586 -----------
 content/fa/tutorials/index.md                 |   6 -
 content/fa/video-courses/index.md             |  64 --
 114 files changed, 9391 deletions(-)
 delete mode 100644 content/fa/_collections/design/colors.md
 delete mode 100644 content/fa/_collections/design/logos.md
 delete mode 100644 content/fa/_collections/design/monogram.md
 delete mode 100644 content/fa/_collections/events/2019.md
 delete mode 100644 content/fa/_collections/events/2020.md
 delete mode 100644 content/fa/_collections/events/2021.md
 delete mode 100644 content/fa/_collections/events/index.md
 delete mode 100644 content/fa/_collections/navigations/footer.md
 delete mode 100644 content/fa/_collections/navigations/header.md
 delete mode 100644 content/fa/_collections/teams/1.framework.md
 delete mode 100644 content/fa/_collections/teams/2.community.md
 delete mode 100644 content/fa/_collections/teams/index.md
 delete mode 100644 content/fa/_collections/testimonials/index.md
 delete mode 100644 content/fa/announcements/0.nuxt-static-improvements.md
 delete mode 100644 content/fa/announcements/1.going-full-static.md
 delete mode 100644 content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md
 delete mode 100644 content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md
 delete mode 100644 content/fa/announcements/4.introducing-smart-prefetching.md
 delete mode 100644 content/fa/announcements/5.nuxt3-beta.md
 delete mode 100644 content/fa/announcements/index.md
 delete mode 100644 content/fa/case-studies/0.github.md
 delete mode 100644 content/fa/case-studies/1.livementor.md
 delete mode 100644 content/fa/case-studies/2.stores.md
 delete mode 100644 content/fa/case-studies/3.parent-scheme.md
 delete mode 100644 content/fa/case-studies/4.line.md
 delete mode 100644 content/fa/case-studies/5.404-place-vendome.md
 delete mode 100644 content/fa/case-studies/6.komercia.md
 delete mode 100644 content/fa/case-studies/7.new-york-public-radio.md
 delete mode 100644 content/fa/case-studies/index.md
 delete mode 100644 content/fa/contribution-guide/index.md
 delete mode 100644 content/fa/deployments/0.vercel.md
 delete mode 100644 content/fa/deployments/1.netlify.md
 delete mode 100644 content/fa/deployments/2.layer0.md
 delete mode 100644 content/fa/deployments/21yunbox.md
 delete mode 100644 content/fa/deployments/amazon-web-services.md
 delete mode 100644 content/fa/deployments/azure-portal.md
 delete mode 100644 content/fa/deployments/azure-static-web-apps.md
 delete mode 100644 content/fa/deployments/bip.md
 delete mode 100644 content/fa/deployments/cleavr.md
 delete mode 100644 content/fa/deployments/cloudflare.md
 delete mode 100644 content/fa/deployments/digital-ocean.md
 delete mode 100644 content/fa/deployments/dokku.md
 delete mode 100644 content/fa/deployments/fume.md
 delete mode 100644 content/fa/deployments/github-pages.md
 delete mode 100644 content/fa/deployments/google-appengine.md
 delete mode 100644 content/fa/deployments/google-cloud-run.md
 delete mode 100644 content/fa/deployments/heroku.md
 delete mode 100644 content/fa/deployments/hostman.md
 delete mode 100644 content/fa/deployments/index.md
 delete mode 100644 content/fa/deployments/koyeb.md
 delete mode 100644 content/fa/deployments/nginx.md
 delete mode 100644 content/fa/deployments/platformsh.md
 delete mode 100644 content/fa/deployments/pm2.md
 delete mode 100644 content/fa/deployments/qovery.md
 delete mode 100644 content/fa/deployments/stormkitio.md
 delete mode 100644 content/fa/deployments/surge.md
 delete mode 100644 content/fa/design/index.md
 delete mode 100644 content/fa/events/index.md
 delete mode 100644 content/fa/examples/1.routing/1.hello-world.md
 delete mode 100644 content/fa/examples/1.routing/2.active-link-classes.md
 delete mode 100644 content/fa/examples/1.routing/3.dynamic-pages.md
 delete mode 100644 content/fa/examples/1.routing/4.nested-pages.md
 delete mode 100644 content/fa/examples/1.routing/index.md
 delete mode 100644 content/fa/examples/10.modules/1.local.md
 delete mode 100644 content/fa/examples/10.modules/2.axios.md
 delete mode 100644 content/fa/examples/10.modules/index.md
 delete mode 100644 content/fa/examples/2.data-fetching/1.async-data.md
 delete mode 100644 content/fa/examples/2.data-fetching/2.fetch-hook.md
 delete mode 100644 content/fa/examples/2.data-fetching/index.md
 delete mode 100644 content/fa/examples/3.assets-management/1.pre-processors.md
 delete mode 100644 content/fa/examples/3.assets-management/2.webpack-assets.md
 delete mode 100644 content/fa/examples/3.assets-management/index.md
 delete mode 100644 content/fa/examples/4.transitions/1.transitions.md
 delete mode 100644 content/fa/examples/4.transitions/index.md
 delete mode 100644 content/fa/examples/5.seo/1.html-head.md
 delete mode 100644 content/fa/examples/5.seo/2.twitter-og.md
 delete mode 100644 content/fa/examples/5.seo/index.md
 delete mode 100644 content/fa/examples/6.loading/1.customize-nuxt-loading.md
 delete mode 100644 content/fa/examples/6.loading/2.customize-loading-indicator.md
 delete mode 100644 content/fa/examples/6.loading/3.custom-loading-component.md
 delete mode 100644 content/fa/examples/6.loading/index.md
 delete mode 100644 content/fa/examples/7.miscellaneous/1.layouts.md
 delete mode 100644 content/fa/examples/7.miscellaneous/2.lazy-loading-components.md
 delete mode 100644 content/fa/examples/7.miscellaneous/3.vuex-store.md
 delete mode 100644 content/fa/examples/7.miscellaneous/4.helpers.md
 delete mode 100644 content/fa/examples/7.miscellaneous/index.md
 delete mode 100644 content/fa/examples/8.middlewares/1.router.md
 delete mode 100644 content/fa/examples/8.middlewares/2.named.md
 delete mode 100644 content/fa/examples/8.middlewares/3.anonymous.md
 delete mode 100644 content/fa/examples/8.middlewares/index.md
 delete mode 100644 content/fa/examples/9.plugins/1.vue.md
 delete mode 100644 content/fa/examples/9.plugins/2.client-only.md
 delete mode 100644 content/fa/examples/9.plugins/3.external-packages.md
 delete mode 100644 content/fa/examples/9.plugins/4.custom.md
 delete mode 100644 content/fa/examples/9.plugins/index.md
 delete mode 100644 content/fa/examples/index.md
 delete mode 100644 content/fa/index.md
 delete mode 100644 content/fa/modules/index.md
 delete mode 100644 content/fa/partners/index.md
 delete mode 100644 content/fa/releases/index.md
 delete mode 100644 content/fa/showcases/index.md
 delete mode 100644 content/fa/sponsors/index.md
 delete mode 100644 content/fa/support/index.md
 delete mode 100644 content/fa/teams/index.md
 delete mode 100644 content/fa/testimonials/index.md
 delete mode 100644 content/fa/themes/index.md
 delete mode 100644 content/fa/tutorials/0.creating-a-nuxt-module.md
 delete mode 100644 content/fa/tutorials/1.creating-blog-with-nuxt-content.md
 delete mode 100644 content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md
 delete mode 100644 content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md
 delete mode 100644 content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md
 delete mode 100644 content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md
 delete mode 100644 content/fa/tutorials/index.md
 delete mode 100644 content/fa/video-courses/index.md

diff --git a/content/fa/_collections/design/colors.md b/content/fa/_collections/design/colors.md
deleted file mode 100644
index db0a6754dd..0000000000
--- a/content/fa/_collections/design/colors.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-colors:
--
-  name: Green Default
-  bg_color: bg-primary
-  hexa: '#00DC82'
-  rgb: '0 220 130'
--
-  name: Sky Darker
-  bg_color: bg-secondary-darker
-  hexa: '#002E3B'
-  rgb: '0 46 59'
----
diff --git a/content/fa/_collections/design/logos.md b/content/fa/_collections/design/logos.md
deleted file mode 100644
index 5c4646b06c..0000000000
--- a/content/fa/_collections/design/logos.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-logos:
--
-  type: Text colored
-  logoImg: '/design-kit/colored-text'
-  color: dark
--
-  type: Text black
-  logoImg: '/design-kit/black-text'
-  color: dark
--
-  type: Text white
-  logoImg: '/design-kit/white-text'
-  color: light
--
-  type: Text colored & white
-  logoImg: '/design-kit/colored-white-text'
-  color: light
----
diff --git a/content/fa/_collections/design/monogram.md b/content/fa/_collections/design/monogram.md
deleted file mode 100644
index 82c505b59a..0000000000
--- a/content/fa/_collections/design/monogram.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-logos:
--
-  type: Logo colored
-  logoImg: '/design-kit/colored-logo'
-  color: dark
--
-  type: Logo black
-  logoImg: '/design-kit/black-logo'
-  color: dark
--
-  type: Logo white
-  logoImg: '/design-kit/white-logo'
-  color: light
--
----
diff --git a/content/fa/_collections/events/2019.md b/content/fa/_collections/events/2019.md
deleted file mode 100644
index 90a2e2fafe..0000000000
--- a/content/fa/_collections/events/2019.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-events:
-  -
-    name: 'ReactiveConf 2019'
-    title: 'Be Lazy, Be Smart, Be Nuxt'
-    speaker: 'Sébastien Chopin'
-    description: 'Sebastien demonstrates how to create a web application quickly by using Nuxt and explaining how it works under the hood. Giving you confidence for your next Vue applications.'
-    logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg'
-    eventLogo: 'reactive_conf.svg'
-    eventLink: 'https://reactiveconf.com/'
-    link: 'https://youtu.be/vbsPXHCu8Xg'
-    date: '30/10/2019'
-    lang: 'en'
-  -
-    name: 'VueJS Amsterdam'
-    title: 'Nuxt 2019'
-    speaker: 'Sébastien Chopin'
-    description: 'Sébastien gives an overview of Nuxt in 2019'
-    logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg'
-    eventLogo: 'vuejs_amsterdam.svg'
-    eventLink: 'https://vuejs.amsterdam/'
-    link: 'https://youtu.be/m0UtuJoigvQ'
-    date: '20/02/2019'
-    lang: 'en'
-  -
-    name: 'Vue Day Alicante 2019'
-    title: 'Deep Dive into Nuxt internals'
-    speaker: 'Sébastien Chopin'
-    description: 'Ever wondered how Nuxt works? Sebastien, creator of Nuxt will explain how the framework works internally. Giving you the knowledge to enjoy the full power of Nuxt and its module ecosystem.'
-    logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg'
-    eventLogo: 'vue_day.svg'
-    eventLink: 'https://vueday.org/'
-    link: 'https://youtu.be/mxJlUMFC9Ns'
-    date: '14/06/2019'
-    lang: 'en'
-  -
-    name: 'VueConf Toronto'
-    title: 'Leave your legacy code behind and go Nuxt'
-    speaker: "Debbie O'Brien"
-    description: "A case study on how Debbie and her team built their client's site, what they used and how they made it as performant as possible and were able to deliver better results to their clients and how now they have left the legacy code behind and have fully gone Nuxt."
-    logo: 'https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg'
-    eventLogo: 'vueconf_toronto.svg'
-    eventLink: 'https://www.vuetoronto.com/'
-    link: 'https://youtu.be/FBEOIuDUZh4'
-    date: '20/11/2019'
-    lang: 'en'
----
diff --git a/content/fa/_collections/events/2020.md b/content/fa/_collections/events/2020.md
deleted file mode 100644
index ea9cd58030..0000000000
--- a/content/fa/_collections/events/2020.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-events:
-  -
-    name: 'VueConf Toronto'
-    title: 'The state of Nuxt'
-    description: 'Sébastien presents the state of Nuxt in 2020 at the VueConf Toronto'
-    speaker: 'Sébastien Chopin'
-    logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg'
-    eventLogo: 'vueconf_toronto.svg'
-    eventLink: 'https://www.vuetoronto.com/'
-    link: 'https://youtu.be/LMONTMOc1zI'
-    date: '08/11/2020'
-    lang: 'English'
-  -
-    name: 'Vuejs Global'
-    title: 'Nuxt Architecture'
-    description: "Discover the framework architecture and what's coming with Nuxt3 with Pooya"
-    speaker: 'Pooya Parsa'
-    logo: 'https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg'
-    eventLogo: 'vuejs_amsterdam.svg'
-    eventLink: 'https://vuejs.amsterdam/'
-    link: 'https://youtu.be/oZtsiw2rBgQ'
-    date: '21/10/2020'
-    lang: 'English'
-  -
-    name: 'Vuejs Amsterdam'
-    title: 'Deep dive into Nuxt'
-    speaker: 'Pooya Parsa'
-    description: 'Learn how Nuxt is built under the hood to make it modular and accomodate a large set of use-cases'
-    logo: 'https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg'
-    eventLogo: 'vuejs_amsterdam.svg'
-    eventLink: 'https://vuejs.amsterdam/'
-    link: 'https://youtu.be/n2JQ0-BWRV8'
-    date: '20/02/2020'
-    lang: 'English'
-  -
-    name: 'Vue.js fwdays'
-    title: 'Nuxt and the Composition API'
-    speaker: 'Alexander Lichter'
-    description: 'Alexander demonstrates how you can use the composition API in Nuxt starting today, and what benefits it can bring.'
-    logo: 'https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg'
-    eventLogo: 'vuejs_fwdays.svg'
-    eventLink: 'https://fwdays.com/'
-    link: 'https://youtu.be/iheIYq5ZlsE'
-    date: '28/11/2020'
-    lang: 'English'
-  -
-    name: 'GOTOpia Europe 2020'
-    title: 'Going Static in a Dynamic World with Hasura and Nuxt'
-    speaker: "Debbie O'Brien"
-    description: 'Debbie covers how to use Nuxt SSG with Hasura, from setting up your endpoint, adding the query to Nuxt to display your data with Apollo and GraphQL, how to setup a hook so that it triggers a deploy of your site on content change as static sites need to be redeployed on content change.'
-    logo: 'https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg'
-    eventLogo: 'gotopia.svg'
-    eventLink: 'https://gotopia.eu/'
-    link: 'https://youtu.be/1j9DIX32GpY'
-    date: '15/12/2020'
-    lang: 'English'
-  -
-    name: 'VueConf US 2020'
-    title: 'Nuxt js + Netlify CMS'
-    speaker: 'Daniel Kelly'
-    description: 'Daniel talks to us about how he creates a surprisingly dynamic static site by using Nuxt and Netlify CMS.'
-    logo: 'https://pbs.twimg.com/profile_images/1419775557475184643/Vx7ZKWL5_400x400.jpg'
-    eventLogo: 'vuejs.svg'
-    eventLink: 'https://us.vuejs.org/'
-    link: 'https://youtu.be/1bAeI2GPG44'
-    date: '15/05/2020'
-    lang: 'English'
-  -
-    name: 'Jamstack Paris'
-    title: 'Nuxt Live Coding: Full Static et Live Preview avec Strapi'
-    speaker: 'Sébastien Chopin'
-    description: "Dans ce talk à la Jamstack Paris, Sébastien explique tout sur le full static avec Nuxt, et l'utilisation du live preview mode"
-    logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg'
-    eventLogo: 'jamstack_paris.svg'
-    eventLink: 'https://jamstack.paris/'
-    link: 'https://youtu.be/orKv4jhpbtw'
-    date: '10/08/2020'
-    lang: 'French'
----
diff --git a/content/fa/_collections/events/2021.md b/content/fa/_collections/events/2021.md
deleted file mode 100644
index 52aea9cfde..0000000000
--- a/content/fa/_collections/events/2021.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-events:
-  -
-    name: 'Vuejs Amsterdam'
-    title: 'Nuxt3 in Action'
-    speaker: 'Sébastien Chopin'
-    description: 'Get a first glance at what Nuxt3 looks like from a user perspective with this demo from Sébastien'
-    logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg'
-    eventLogo: 'vuejs_amsterdam.svg'
-    eventLink: 'https://vuejs.amsterdam/'
-    link: 'https://youtu.be/ClF9BvKCVwY'
-    date: '26/02/2021'
-    lang: 'English'
-  -
-    name: 'Vuejs Amsterdam'
-    title: 'State of Nuxt3'
-    speaker: 'Pooya Parsa'
-    description: 'In this talk, Pooya recaps how Nuxt works, and gives details about what Nuxt3 brings to the table, including Nitro, Nuxt Kit and the new CLI.'
-    logo: 'https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg'
-    eventLogo: 'vuejs_amsterdam.svg'
-    eventLink: 'https://vuejs.amsterdam/'
-    link: 'https://youtu.be/_-wqph-IaAw'
-    date: '26/02/2021'
-    lang: 'English'
-  -
-    name: 'Vuejs Amsterdam'
-    title: 'Edge-rendering with Nuxt'
-    speaker: 'Daniel Roe'
-    description: 'Take a sneak peek at the next-generation rendering engine that will power Nuxt 3 and Nuxt 2. Look at how this revolutionises building SSR Vue apps, and what you need to do to use this today.'
-    logo: 'https://pbs.twimg.com/profile_images/1326211963614007302/UJyvtK2f_400x400.jpg'
-    eventLogo: 'vuejs_amsterdam.svg'
-    eventLink: 'https://vuejs.amsterdam/'
-    link: 'https://youtu.be/ApUPE8b-m04'
-    date: '26/02/2021'
-    lang: 'English'
-  -
-    name: 'Strapi Conf'
-    title: 'Nuxt + Strapi + Composition API'
-    speaker: 'Alexander Lichter'
-    description: 'In this session, Alexander builds the fitting frontend for a Strapi CMS backend by leveraging the Composition API and ensure it is performant and fast. Get insights into the world of Vue and Nuxt, useful patterns for the Composition API and possibly some sneak peaks'
-    logo: 'https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg'
-    eventLogo: 'strapi.jpeg'
-    imgUrl: '/img/events/light/strapi-conf-alexander-lichter.png'
-    eventLink: 'https://conf.strapi.io/'
-    link: 'https://youtu.be/WZI5lt607ww'
-    date: '06/05/2021'
-    lang: 'English'
----
diff --git a/content/fa/_collections/events/index.md b/content/fa/_collections/events/index.md
deleted file mode 100644
index dc762ec9a6..0000000000
--- a/content/fa/_collections/events/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-navigation: false
----
diff --git a/content/fa/_collections/navigations/footer.md b/content/fa/_collections/navigations/footer.md
deleted file mode 100644
index 8d2f1a5bdc..0000000000
--- a/content/fa/_collections/navigations/footer.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-links:
-  - title: 'About'
-    items:
-      - title: 'Contact us'
-        href: 'mailto:hello@nuxtjs.com'
-      - title: 'Enterprise support'
-        to: '/support'
-      - title: 'NuxtLabs company'
-        href: 'https://nuxtlabs.com/'
-      - title: 'Open Source Software'
-        href: 'https://github.com/nuxt'
-      - title: 'Partnerships'
-        to: '/partners'
-      - title: 'Telemetry'
-        href: 'https://github.com/nuxt/telemetry'
-  - title: 'Ecosystem'
-    items:
-      - title: 'Announcements'
-        to: '/announcements'
-      - title: 'Contribute'
-        to: '/contribution-guide'
-      - title: 'Chat with us'
-        href: 'https://discord.nuxtjs.org/'
-      - title: 'Events'
-        to: '/events'
-      - title: 'Sponsors'
-        to: '/sponsors'
-      - title: 'Teams'
-        to: '/teams'
-      - title: 'Tutorials'
-        to: '/tutorials'
-      - title: 'Video courses'
-        to: '/video-courses/'
-  - title: 'Resources'
-    items:
-      - title: 'Design'
-        to: '/design'
-      - title: 'Documentation'
-        to: '/docs'
-      - title: 'Examples'
-        to: '/examples'
-      - title: 'Deployments'
-        to: '/deployments'
-      - title: 'Master courses'
-        href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite'
-      - title: 'Modules'
-        href: 'https://modules.nuxtjs.org'
-      - title: 'Releases'
-        to: '/releases'
-      - title: 'Showcases'
-        to: '/showcases'
-      - title: 'Themes'
-        to: '/themes'
----
diff --git a/content/fa/_collections/navigations/header.md b/content/fa/_collections/navigations/header.md
deleted file mode 100644
index 06b630e502..0000000000
--- a/content/fa/_collections/navigations/header.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-links:
-  - title: 'Discover'
-    items:
-      - title: 'Showcases'
-        subtitle: 'Selection of websites built with Nuxt'
-        slug: 'showcases'
-        to: '/showcases'
-        icon: 'showcases.svg'
-        color: 'bg-sand'
-      - title: 'Case studies'
-        subtitle: 'How companies use Nuxt'
-        slug: 'case-studies'
-        to: '/case-studies'
-        icon: 'case-studies.svg'
-        color: 'bg-sand-dark'
-      - title: 'Testimonials'
-        subtitle: 'What they think about us'
-        slug: 'testimonials'
-        to: '/testimonials'
-        icon: 'testimonials.svg'
-        color: 'bg-sand-darker'
-  - title: 'Learn'
-    items:
-      - title: 'Docs'
-        subtitle: 'Create fast websites easily'
-        slug: 'docs'
-        to: '/docs'
-        icon: 'docs.svg'
-        color: 'bg-green-500'
-
-      - title: 'Examples'
-        subtitle: 'Understand everything in Nuxt'
-        slug: 'examples'
-        to: '/examples'
-        icon: 'examples.svg'
-        color: 'bg-green-600'
-      - title: 'Tutorials'
-        subtitle: 'Learn with concrete cases'
-        slug: 'tutorials'
-        to: '/tutorials'
-        icon: 'tutorials.svg'
-        color: 'bg-green-700'
-      - title: 'Master courses'
-        subtitle: 'Learn more with experts'
-        href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite'
-        icon: 'master-courses.svg'
-        color: 'bg-green-800'
-  - title: 'Explore'
-    items:
-      - title: 'Deployments'
-        subtitle: 'How to Deploy Nuxt'
-        slug: 'deployments'
-        to: '/deployments'
-        icon: 'deployments.svg'
-        color: 'bg-indigo-light'
-      - title: 'Modules'
-        subtitle: 'Extend the power of Nuxt'
-        href: 'https://modules.nuxtjs.org'
-        icon: 'modules.svg'
-        color: 'bg-indigo'
-      - title: 'Themes'
-        subtitle: 'Get started with themes'
-        slug: 'themes'
-        to: '/themes'
-        icon: 'themes.svg'
-        color: 'bg-indigo-dark'
-      - title: 'Video Courses'
-        subtitle: 'Learn step by step'
-        slug: 'video-courses'
-        to: '/video-courses'
-        icon: 'video-courses.svg'
-        color: 'bg-indigo-darker'
-  - title: 'Community'
-    items:
-      - title: 'Announcements'
-        subtitle: 'Latest news about Nuxt'
-        slug: 'announcements'
-        to: '/announcements'
-        icon: 'announcements.svg'
-        color: 'bg-mint-lighter'
-      - title: 'Teams'
-        subtitle: 'They are Nuxt'
-        slug: 'teams'
-        to: '/teams'
-        icon: 'teams.svg'
-        color: 'bg-mint-light'
-      - title: 'Releases'
-        subtitle: 'All the code we have released'
-        slug: 'releases'
-        to: '/releases'
-        icon: 'releases.svg'
-        color: 'bg-mint'
-      - title: 'Sponsors'
-        subtitle: 'They trust us'
-        slug: 'sponsors'
-        to: '/sponsors'
-        icon: 'sponsors.svg'
-        color: 'bg-mint-dark'
-  - title: 'Partners'
-    slug: 'partners'
-    to: '/partners'
----
diff --git a/content/fa/_collections/teams/1.framework.md b/content/fa/_collections/teams/1.framework.md
deleted file mode 100644
index 84dda91bca..0000000000
--- a/content/fa/_collections/teams/1.framework.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-members:
-  -
-    avatarUrl: 'https://github.com/alexchopin.png'
-    name: 'Alexandre Chopin'
-    location: 'Bordeaux, France'
-    socials:
-      - gitHub: 'https://github.com/alexchopin'
-      - twitter: 'https://twitter.com/iamnuxt'
-      - linkedIn: 'https://www.linkedin.com/in/alexchopin/'
-  -
-    avatarUrl: 'https://github.com/atinux.png'
-    name: 'Sebastien Chopin'
-    location: 'Bordeaux, France'
-    socials:
-      - gitHub: 'https://github.com/Atinux'
-      - twitter: 'https://twitter.com/Atinux'
-      - linkedIn: 'https://www.linkedin.com/in/atinux/'
-  -
-    avatarUrl: 'https://github.com/pi0.png'
-    name: 'Pooya Parsa (پویا پارسا)'
-    location: 'Haarlem, Netherlands'
-    socials:
-      - gitHub: 'https://github.com/pi0'
-      - twitter: 'https://twitter.com/_pi0_'
-      - linkedIn: 'https://www.linkedin.com/in/pooyaparsa/'
-  -
-    avatarUrl: 'https://github.com/danielroe.png'
-    name: 'Daniel Roe'
-    location: 'Durham, UK'
-    socials:
-      - gitHub: 'https://github.com/danielroe'
-      - twitter: 'https://twitter.com/danielroe'
-      - linkedIn: 'https://www.linkedin.com/in/daniel-roe/'
-  -
-    avatarUrl: 'https://github.com/clarkdo.png'
-    name: 'Clark Du (杜欣)'
-    location: 'Dublin, Ireland'
-    socials:
-      - gitHub: 'https://github.com/clarkdo'
-      - twitter: 'https://twitter.com/ClarkDu_'
-      - linkedIn: 'https://www.linkedin.com/in/clark-du/'
-  -
-    avatarUrl: 'https://github.com/antfu.png'
-    name: 'Anthony Fu'
-    location: 'Hangzhou, China'
-    socials:
-      - gitHub: 'https://github.com/antfu'
-      - twitter: 'https://twitter.com/antfu7'
-      - website: 'https://antfu.me/'
----
diff --git a/content/fa/_collections/teams/2.community.md b/content/fa/_collections/teams/2.community.md
deleted file mode 100644
index 4defd98b68..0000000000
--- a/content/fa/_collections/teams/2.community.md
+++ /dev/null
@@ -1,240 +0,0 @@
----
-members:
-  -
-    avatarUrl: 'https://github.com/manniL.png'
-    name: 'Alexander Lichter'
-    location: 'Leipzig, Germany'
-    socials:
-      - gitHub: 'https://github.com/manniL'
-      - twitter: 'https://twitter.com/TheAlexLichter'
-      - website: 'https://blog.lichter.io'
-  -
-    avatarUrl: 'https://github.com/aldarund.png'
-    name: 'Dmitry Molotkov'
-    location: 'Gomel, Belarus'
-    socials:
-      - gitHub: 'https://github.com/aldarund'
-      - twitter: 'https://twitter.com/aldarund'
-      - stackOverflow: 'https://stackoverflow.com/users/239354/aldarund'
-  -
-    avatarUrl: 'https://github.com/pimlie.png'
-    name: 'Pim'
-    location: 'The Netherlands'
-    socials:
-      - gitHub: 'https://github.com/pimlie'
-  -
-    avatarUrl: 'https://github.com/ricardogobbosouza.png'
-    name: 'Ricardo Gobbo de Souza'
-    location: 'The Netherlands'
-    socials:
-      - gitHub: 'https://github.com/ricardogobbosouza'
-      - twitter: 'https://twitter.com/gobbo_ricardo'
-      - website: 'https://datalogix.com.br'
-  -
-    avatarUrl: 'https://github.com/Krutie.png'
-    name: 'Krutie Patel'
-    location: 'Brisbane, Australia'
-    socials:
-      - gitHub: 'https://github.com/Krutie'
-      - twitter: 'https://twitter.com/KrutiePatel'
-      - website: 'https://krutiepatel.com/'
-  -
-    avatarUrl: 'https://github.com/hecktarzuli.png'
-    name: 'Josh Deltener'
-    location: 'North Dakota, USA'
-    socials:
-      - gitHub: 'https://github.com/hecktarzuli'
-      - twitter: 'https://twitter.com/JoshDeltener'
-      - website: 'https://deltener.com'
-  -
-    avatarUrl: 'https://github.com/mayashavin.png'
-    name: 'Maya Shavin'
-    location: 'Israel'
-    socials:
-      - gitHub: 'https://github.com/mayashavin'
-      - twitter: 'https://twitter.com/MayaShavin'
-      - website: 'https://mayashavin.com/'
-  -
-    avatarUrl: 'https://github.com/f3ltron.png'
-    name: 'Giraud Florent'
-    location: 'Montreal, Canada'
-    socials:
-      - gitHub: 'https://github.com/f3ltron'
-      - twitter: 'https://twitter.com/giraud_florent'
-      - website: 'https://florent.dev'
-  -
-    avatarUrl: 'https://github.com/Dawntraoz.png'
-    name: 'Alba Silvente'
-    location: 'Amsterdam, NL'
-    socials:
-      - gitHub: 'https://github.com/Dawntraoz'
-      - twitter: 'https://twitter.com/dawntraoz'
-      - website: 'https://www.dawntraoz.com'
-  -
-    avatarUrl: 'https://github.com/timbenniks.png'
-    name: 'Tim Benniks'
-    location: 'Paris, France'
-    socials:
-      - gitHub: 'https://github.com/timbenniks'
-      - twitter: 'https://twitter.com/timbenniks'
-      - website: 'https://timbenniks.dev'
-  -
-    avatarUrl: 'https://github.com/lauragift21.png'
-    name: 'Gift Egwuenu'
-    location: 'Amsterdam, NL'
-    socials:
-      - gitHub: 'https://github.com/lauragift21'
-      - twitter: 'https://twitter.com/lauragift_'
-      - website: 'https://www.giftegwuenu.com/'
-  -
-    avatarUrl: 'https://github.com/bencodezen.png'
-    name: 'Ben Hong'
-    location: 'Washington D.C., USA'
-    socials:
-      - gitHub: 'https://github.com/bencodezen'
-      - twitter: 'https://twitter.com/bencodezen'
-      - website: 'https://www.bencodezen.io/'
-  -
-    avatarUrl: 'https://github.com/farnabaz.png'
-    name: 'Ahad Birang'
-    location: 'Tehran, Iran'
-    socials:
-      - gitHub: 'https://github.com/farnabaz'
-      - twitter: 'https://twitter.com/a_birang'
-      - linkedIn: 'https://www.linkedin.com/in/ahadbirang'
-  -
-    avatarUrl: 'https://github.com/bdrtsky.png'
-    name: 'Sergey Bedritsky'
-    location: 'Kiev, Ukraine'
-    socials:
-      - gitHub: 'https://github.com/bdrtsky'
-      - twitter: 'https://twitter.com/sergeybedritsky'
-      - linkedIn: 'https://www.linkedin.com/in/sergey-bedritsky'
-  -
-    avatarUrl: 'https://github.com/clemcode.png'
-    name: 'Clement Ollivier'
-    location: 'Bordeaux, France'
-    socials:
-      - gitHub: 'https://github.com/clemcode'
-      - twitter: 'https://twitter.com/clemcodes'
-      - linkedIn: 'https://www.linkedin.com/in/clementollivier1'
-  -
-    avatarUrl: 'https://github.com/Flosciante.png'
-    name: 'Florent Delerue'
-    location: 'Bordeaux, France'
-    socials:
-      - gitHub: 'https://github.com/Flosciante'
-      - twitter: 'https://twitter.com/Flosciante'
-      - linkedIn: 'https://www.linkedin.com/in/florent-delerue-84b24a83'
-  -
-    avatarUrl: 'https://github.com/R-mooon.png'
-    name: 'Vincent Rodriguez'
-    location: 'Bordeaux, France'
-    socials:
-      - gitHub: 'https://github.com/R-mooon'
-      - twitter: 'https://twitter.com/RodrigodelaNoch'
-      - linkedIn: 'https://www.linkedin.com/in/vincent-rodriguez-rmoon'
-  -
-    avatarUrl: 'https://github.com/Tahul.png'
-    name: 'Yaël Guilloux'
-    location: 'Nantes, France'
-    socials:
-      - gitHub: 'https://github.com/Tahul'
-      - linkedIn: 'https://www.linkedin.com/in/yaelguilloux'
-  -
-    avatarUrl: 'https://github.com/benjamincanac.png'
-    name: 'Benjamin Canac'
-    location: 'Bordeaux, France'
-    socials:
-      - gitHub: 'https://github.com/benjamincanac'
-      - twitter: 'https://twitter.com/benjamincanac'
-      - linkedIn: 'https://www.linkedin.com/in/benjamincanac'
-  -
-    avatarUrl: 'https://github.com/geminii.png'
-    name: "Jimmy Jouanne"
-    location: 'Le Havre, France'
-    socials:
-      - gitHub: 'https://github.com/geminii'
-      - linkedIn: 'https://www.linkedin.com/in/jimmy-jouanne-7b218a62/'
-  -
-    avatarUrl: 'https://github.com/debs-obrien.png'
-    name: "Debbie O'Brien"
-    location: 'Palma de Mallorca, Spain'
-    socials:
-      - gitHub: 'https://github.com/debs-obrien'
-      - twitter: 'https://twitter.com/debs_obrien'
-      - website: 'https://debbie.codes'
-  -
-    avatarUrl: 'https://github.com/kazupon.png'
-    name: "Kazuya Kawaguchi"
-    location: 'Tokyo, Japan'
-    socials:
-      - gitHub: 'https://github.com/kazupon'
-      - twitter: 'https://twitter.com/kazu_pon'
-  -
-    avatarUrl: 'https://github.com/farzadso.png'
-    name: "Farzad Soltani"
-    location: 'Tehran, Iran'
-    socials:
-      - gitHub: 'https://github.com/farzadso'
-      - twitter: 'https://twitter.com/farzadso'
-  -
-    avatarUrl: 'https://github.com/lihbr.png'
-    name: "Lucie Haberer"
-    location: 'Paris, France'
-    socials:
-      - gitHub: 'https://github.com/lihbr'
-      - twitter: 'https://twitter.com/li_hbr'
-      - website: 'https://lihbr.com'
-  -
-    avatarUrl: 'https://github.com/lupas.png'
-    name: "Pascal Luther"
-    location: 'Zurich, Switzerland'
-    socials:
-      - gitHub: 'https://github.com/lupas'
-      - linkedIn: 'https://www.linkedin.com/in/pascalluther/'
-  -
-    avatarUrl: 'https://github.com/NicoPennec.png'
-    name: "Nicolas PENNEC"
-    location: 'Zurich, Switzerland'
-    socials:
-      - gitHub: 'https://github.com/NicoPennec'
-      - twitter: 'https://twitter.com/NicoPennec'
-      - website: 'https://pennec.io'
-  -
-    avatarUrl: 'https://github.com/JoaoPedroAS51.png'
-    name: "João Pedro Antunes Silva"
-    location: 'Brazil'
-    socials:
-      - gitHub: 'https://github.com/JoaoPedroAS51'
-  -
-    avatarUrl: 'https://github.com/NozomuIkuta.png'
-    name: "Nozomu Ikuta"
-    location: 'Japan'
-    socials:
-      - gitHub: 'https://github.com/NozomuIkuta'
-      - twitter: 'https://twitter.com/NozomuIkuta'
-  -
-    avatarUrl: 'https://github.com/kissu.png'
-    name: "Konstantin BIFERT"
-    location: 'Bordeaux, France'
-    socials:
-      - gitHub: 'https://github.com/kissu'
-      - stackOverflow: 'https://stackoverflow.com/users/8816585/kissu'
-      - website: 'https://www.kissu.io/'
-  -
-    avatarUrl: 'https://github.com/rchl.png'
-    name: "Rafał Chłodnicki"
-    location: 'Oslo, Norway'
-    socials:
-      - gitHub: 'https://github.com/rchl'
-      - linkedIn: 'https://www.linkedin.com/in/rafa%C5%82-ch%C5%82odnicki-1307b0b7/'
-  -
-    avatarUrl: 'https://github.com/kevinmarrec.png'
-    name: "Kévin Marrec"
-    location: 'Rennes, France'
-    socials:
-      - gitHub: 'https://github.com/kevinmarrec'
-      - twitter: 'https://twitter.com/K_Marrec'
-      - website: 'https://marrec.io/'
----
diff --git a/content/fa/_collections/teams/index.md b/content/fa/_collections/teams/index.md
deleted file mode 100644
index dc762ec9a6..0000000000
--- a/content/fa/_collections/teams/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-navigation: false
----
diff --git a/content/fa/_collections/testimonials/index.md b/content/fa/_collections/testimonials/index.md
deleted file mode 100644
index 73bf33acbd..0000000000
--- a/content/fa/_collections/testimonials/index.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-testimonials:
-  -
-    testimonial: 'Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake.'
-    author: 'Evan You'
-    authorIcon: 'evan'
-    authorUrl: 'https://twitter.com/youyuxi'
-    job: 'Creator of Vue.js'
-    jobIcon: 'vue'
-    jobUrl: 'https://vuejs.org'
-  -
-    testimonial:
-      'Nuxt has outstanding developer productivity, experience, and performance right out of the gate!
        There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications.'
-    author: 'Sarah Drasner'
-    authorIcon: 'sarah'
-    authorUrl: 'https://twitter.com/sarah_edo'
-    job: 'Core Team of Vue.js'
-    jobIcon: 'vue'
-    jobUrl: 'https://vuejs.org'
-  -
-    testimonial:
-      'Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX.'
-    author: 'Addy Osmani'
-    authorIcon: 'addy'
-    authorUrl: 'https://twitter.com/addyosmani'
-    job: 'Chief Engineer of Chrome'
-    jobIcon: 'chrome'
-    jobUrl: 'https://www.google.com/chrome/'
-  -
-    testimonial:
-      'Nuxt has been an incredible source of innovation and inspiration for developers and framework authors alike. It’s been amazing to see its growth in web projects of all sizes on the web.'
-    author: 'Guillermo Rauch'
-    authorIcon: 'guillermo'
-    authorUrl: 'https://twitter.com/rauchg'
-    job: 'Founder of Vercel'
-    jobIcon: 'vercel-light'
-    jobIconDark: 'vercel-dark'
-    jobUrl: 'https://vercel.com'
-  -
-    testimonial:
-      'Nuxt has a unique approach of combining a great developer experience with reusable, fully integrated features that speed up the development and performance of your next website or application.'
-    author: 'Dominik Angerer'
-    authorIcon: 'dominik'
-    authorUrl: 'https://twitter.com/domangerer'
-    job: 'Founder of Storyblok'
-    jobIcon: 'storyblok'
-    jobUrl: 'https://www.storyblok.com'
-  -
-    testimonial:
-      'Nuxt is our primary choice for offering a seamless website development experience to our users. Its simplicity and progressive learning curve makes it our ideal choice for SliceMachine.'
-    author: 'Sadek Drobi'
-    authorIcon: 'sadek'
-    authorUrl: 'https://twitter.com/Sadache'
-    job: 'Founder of Prismic'
-    jobIcon: 'prismic'
-    jobUrl: 'https://prismic.io'
-  -
-    testimonial:
-      "Every serious full stack development team needs to stop take a look at Nuxt. Vue's developer productivity combined with Nuxt's server side rendering, is the foundation for instant loading web sites that delight users and improve team velocity."
-    author: 'Ajay Kapur'
-    authorIcon: 'ajay'
-    authorUrl: 'https://www.linkedin.com/in/ajaykapur/'
-    job: 'Founder of Layer0'
-    jobIcon: 'layer0-light'
-    jobIconDark: 'layer0-dark'
-    jobUrl: 'https://www.layer0.co/'
-  -
-    testimonial:
-      'Nuxt has an ideal balance of approachability for developers new to JAMstack, and power for experienced teams working on complex applications. The modules and first-class integration with the rest of the Vue ecosystem makes for a superb DX.'
-    author: 'Dave Loneragan'
-    authorIcon: 'dave'
-    authorUrl: 'https://twitter.com/paper_tokyo'
-    job: 'Co-founder of Swell'
-    jobIcon: 'swell'
-    jobUrl: 'https://swell.is'
-  -
-    testimonial:
-      'The moment I used Nuxt for the first time I felt in love with it. Apart from its scalability, performance and developer experience, the team behind of it is also fantastic. Thanks for developing such a great framework and making our lives much easier!'
-    author: 'Savas Vedova'
-    authorIcon: 'savas'
-    authorUrl: 'https://www.linkedin.com/in/savas-vedova/'
-    job: 'Founder of Stormkit'
-    jobIcon: 'stormkit'
-    jobUrl: 'https://www.stormkit.io/'
----
diff --git a/content/fa/announcements/0.nuxt-static-improvements.md b/content/fa/announcements/0.nuxt-static-improvements.md
deleted file mode 100644
index 07a0417028..0000000000
--- a/content/fa/announcements/0.nuxt-static-improvements.md
+++ /dev/null
@@ -1,169 +0,0 @@
----
-template: post
-title: Nuxt Static Improvements
-description: With Nuxt version 2.13, the full-static mode has been introduced. In addition, a new command nuxt export was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... until now.
-imgUrl: blog/nuxt-static-improvements/main.jpeg
-imgCredits: Naresh Bojja
-imgCreditsUrl: https://unsplash.com/@nareshbojja
-date: 2020-07-27
-authors:
-  - name: Alexander Lichter
-    avatarUrl: https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg
-    link: https://twitter.com/TheAlexLichter
-  - name: Sébastien Chopin
-    avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
-    link: https://twitter.com/atinux
-  - name: Pooya Parsa
-    avatarUrl: https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg
-    link: https://twitter.com/_pi0_
-tags:
-  - release
-  - full-static
-  - framework
-category: Release
----
-
-## Introduction
-
-With Nuxt version 2.13, the [full-static mode](/announcements/going-full-static) has been introduced. In addition, a new command `nuxt export` was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... **until now.**
-
-- [Introduction](#introduction)
-- [Faster Static Deployments](#faster-static-deployments)
-- [Generate time: cache vs full webpack build](#generate-time-cache-vs-full-webpack-build)
-- [Using in your projects](#using-in-your-projects)
-  - [Excluding Files from Cache](#excluding-files-from-cache)
-  - [Module Authors](#module-authors)
-- [How it works](#how-it-works)
-  - [Back to old school commands](#back-to-old-school-commands)
-- [What to do next](#what-to-do-next)
-
-## Faster Static Deployments
-
-With v2.14, `nuxt generate` will **automagically skip webpack build step when no code has been changed** and use the previous build using cache. This will help to drastically improve static deployments time by avoiding unnecessary builds which is usually the most time-consuming part of generation process. Cache support is **platform-agnostic** and works on Netlify, Vercel, or any other CI/CD setup that is caching `node_modules`.
-
-::video-player
----
-sources:
-- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.webm
-  type: video/webm
-- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.mp4
-  type: video/mp4
-- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.ogv
-  type: video/ogg
-poster: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.jpg
----
-::
-
-## Generate time: cache vs full webpack build
-
-See the comparison in seconds between two `nuxt generate`:
-
-- `Build` is when a webpack build is required
-- `Cache` is only when the content has changed (webpack build skipped)
-
-
-
-::alert{type="next"}
-The static site generation of our projects on content changes are now **~3.6x times** faster 🚀
-::
-
-Project links: [Basic](https://github.com/pi0/nuxt-static-demo), [Strapi Module Docs](https://github.com/nuxt-community/strapi-module/tree/master/docs), [Content Module Docs](https://github.com/nuxt/content/tree/master/docs) and [Nuxt Docs](https://github.com/nuxt/nuxtjs.org).
-
-## Using in your projects
-
-1. Update `nuxt` to the latest minor version, which is v2.14.
-
-::code-group
-```bash [Yarn]
-yarn upgrade nuxt
-```
-```bash [NPM]
-npm update
-```
-::
-
-2. Ensure `target` is `static` inside your `nuxt.config`
-
-```js{}[nuxt.config.js]
-export default {
-  target: 'static'
-  // ...
-}
-```
-
-`nuxt generate` will behave as before to avoid breaking changes and provide legacy compatibility if you keep `target: ‘server’` or don't specify target.
-
-3. That’s it 🙌
-
-Now, the `nuxt generate` command will build the project only if necessary, which is the case when files inside the project have been changed. It will always re-render your routes to static HTML files, like `nuxt export` is doing already.
-
-Now you only have to change your build command back from `nuxt build && nuxt export` to `nuxt generate` on the platform you are using. If you are using a CI, ensure that you are properly caching `node_modules`.
-
-### Excluding Files from Cache
-
-By default, nuxt ignores these directories so if any change happens inside them, build will not be triggered:
-
-- Build directory (`.nuxt/`)
-- Static directory (`static/`)
-- Generate dist (`dist/`)
-- `node_modules`
-- `README.md`
-- Hidden dotfiles (like `.npmrc`)
-
-You can add more patterns using [generate.cache.ignore](/docs/configuration-glossary/configuration-generate#cache) option in `nuxt.config`:
-
-```js{}[nuxt.config.js]
-export default {
-  generate: {
-    cache: {
-      ignore: [
-        // When something changed in the docs folder, do not re-build via webpack
-        'docs'
-      ]
-    }
-  }
-}
-```
-
-It is also possible to use a function for `ignore` option to override default ignore entries.
-
-### Module Authors
-
-What if you are developing a nuxt module that is working with files that should not trigger a rebuild? The best example is for [@nuxt/content](https://content.nuxtjs.org) module that reads markdown files from the repository. In this case, these files are used within a runtime module, which is the case when using `@nuxt/content`, the module itself can tell nuxt to ignore these files for you already so you don't have to do anything! Module authors can use the new `generate:cache:ignore` hook to do so:
-
-```js
-nuxt.hook('generate:cache:ignore', ignore => ignore.push('content'))
-```
-
-## How it works
-
-When using the new `nuxt generate` with `static` target, a snapshot including checksum of non-ignored project files as well as nuxt version and some other configuration will be written `.nuxt/build.json`. In addition, we also move the build directory to `node_modules/.cache/nuxt`. Because `node_modules` is cached by all major platforms (Netlify, Vercel, ...) and common CI/CD scripts, this solution works out of the box without additional configuration.
-
-When `nuxt generate` is called subsequently, it will again create a checksum based on your project files and then compare it to the existing one inside `node_modules/.cache/nuxt/build.json`.
-
-If they match, it means that nothing is changed that needs rebuild so we can directly start rendering pages.
-
-If a mismatch is detected, it means that a full rebuild would be necessary. You can also see what file caused rebuild by checking console logs. After the build, nuxt generate will save the new checksum inside `.nuxt/build.json`. You can check full implementation [here](https://github.com/nuxt/nuxt.js/pull/7712).
-
-### Back to old school commands
-
-With Nuxt v2.13, we introduced `nuxt export` and `nuxt serve` specially designed for the static target. With Nuxt v2.14, they are deprecated as `nuxt generate` and `nuxt start` is smart to detect the target and build when necessary.
-
-Server target:
-
-- `nuxt dev` = development server
-- `nuxt build` = build your application for production
-- `nuxt start` = start the production server (use it for Node.js hosting like Heroku, Digital Ocean, etc)
-
-Static target:
-
-- `nuxt dev` = development server
-- `nuxt generate` = build if needed and statically export to `dist/`
-- `nuxt start` = serve the `dist/` directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying
-
-## What to do next
-
-- Upgrade your project to [nuxt@2.14.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.14.0)
-- Use `nuxt generate` instead of `nuxt export`
-- Use `nuxt start` instead of `nuxt serve`
-- Enjoy fast deployments 🤙
diff --git a/content/fa/announcements/1.going-full-static.md b/content/fa/announcements/1.going-full-static.md
deleted file mode 100644
index d06dd4c381..0000000000
--- a/content/fa/announcements/1.going-full-static.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-template: post
-title: 'Going Full Static'
-description: 'Long awaited features for JAMstack fans has been shipped in v2.13: full static export, improved smart prefetching, integrated crawler, faster re-deploy, built-in web server and new target option for config ⚡️'
-imgUrl: blog/going-full-static/main.jpeg
-imgCredits: Vincent Ledvina
-imgCreditsUrl: https://unsplash.com/@vincentledvina
-date: 2020-06-18
-authors:
-  - name: Sebastien Chopin
-    avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
-    link: https://twitter.com/Atinux
-tags:
-  - Nuxt
-  - Static
-  - Crawler
-  - Live Preview
-category: Release
----
-
-## Too long to read
-
-1. Upgrade nuxt to `2.14.0`
-2. Set `target: 'static'` in your `nuxt.config.js`
-3. Run `nuxt generate`
-4. That's it ✨
-
-_Bonus: you can run `nuxt start` to run a local server serving your generated static application._
-
-::video-player
----
-sources:
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.webm
-  type: video/webm
-- src: https://res.cloudinary.com/nuxt/video/upload/v1592503417/nuxt-full-static_rnnbvm.mp4
-  type: video/mp4
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.ogv
-  type: video/ogg
-poster: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.jpg
----
-::
-
-
        
-
-Note: in this video we are using `nuxt export` which has been deprecated in favor of `nuxt generate`.
-
-
        
-
-## Table of Contents
-
-- [Too long to read](#too-long-to-read)
-- [Table of Contents](#table-of-contents)
-- [History](#history)
-- [Current issues](#current-issues)
-- [New config option: `target`](#new-config-option-target)
-- [Smarter `nuxt generate`](#smarter-nuxt-generate)
-  - [Crazy fast static applications](#crazy-fast-static-applications)
-  - [Crawler integrated](#crawler-integrated)
-  - [Faster re-deploy](#faster-re-deploy)
-- [Smarter `nuxt start`](#smarter-nuxt-start)
-- [Preview mode](#preview-mode)
-- [Commands](#commands)
-  - [What to do next](#what-to-do-next)
-
-## History
-
-Nuxt had the static generation feature with `nuxt generate` since [v0.3.2](https://github.com/nuxt/nuxt.js/releases/tag/v0.3.2) (November 2016), since then we have improved it in multiple ways but never achieved full static generation. Today I am excited to announce that full static export is now possible with Nuxt 2.13.
-
-## Current issues
-
-`nuxt generate` is mostly pre-rendering, when you navigate client-side, `asyncData` and `fetch` are called, _making a request to your API_. A lot of users asked to support a "full static" mode, meaning to not call these 2 hooks on navigation, since the next page has been already pre-rendered.
-
-Also, the developer experience is not optimal:
-
-- You have access to `req` or `res` on SSR but not when running `nuxt generate`
-- `process.static` is `true` only when running `nuxt generate`, making it slow to develop Nuxt modules or plugins for static generation
-- You have to specify all your [dynamic routes](/docs/features/file-system-routing#dynamic-routes) in `generate.routes`, making it harder since you don't have access to nuxt modules there.
-- You cannot test the [SPA fallback](/docs/concepts/static-site-generation#spa-fallback) in development, the fallback is a client-only version of your Nuxt application that loads when hitting a 404 page
-- `nuxt generate` runs `nuxt build` by default, making it slower to generate your website if only your content changed
-
-Note that it was possible to have full static support with [nuxt-payload-extractor](https://github.com/DreaMinder/nuxt-payload-extractor) module but it was more verbose to use and had limitations.
-
-## New config option: `target`
-
-To improve the user experience as well as telling Nuxt that you want to export your application to static hosting, we are introducing a `target` option in your `nuxt.config.js`:
-
-```js{}[nuxt.config.js]
-export default {
-  target: 'static' // default is 'server'
-}
-```
-
-
-
-Full static doesn't work with `ssr: 'false'` (which is the same as the deprecated `mode: 'spa'`) as this is used for client-side rendering only (Single Page Applications).
-
-
-
-Running `nuxt dev` with the static target will improve the developer experience:
-
-- Remove `req` & `res` from context
-- Fallback to client-side rendering on 404, errors and redirects (see [SPA fallback](/docs/concepts/static-site-generation#spa-fallback))
-- `$route.query` will always be equal to `{}` on server-side rendering
-- `process.static` is `true`
-
-We are also exposing `process.target` for modules author to add logic depending on the user target.
-
-## Smarter `nuxt generate`
-
-Now with `v2.14.0`, you can use `nuxt generate`, it will smartly know if it has to build or not.
-
-### Crazy fast static applications
-
-`nuxt generate` with `target: 'static'` will pre-render all your pages to HTML and save a payload file in order to mock `asyncData` and `fetch` on client-side navigation, this means **no** **more HTTP calls to your API on client-side navigation.** By extracting the page payload to a js file, **it also reduces the HTML size** served as well as preloading it (from the  in the header) for optimal performance.
-
-We also improved the [smart prefetching](/announcements/introducing-smart-prefetching) when doing full static, it will also fetch the payloads, making navigation instant 👀
-
-### Crawler integrated
-
-On top of that, it also has a crawler inside, detecting every relative link and generating it:
-
-If you want to exclude a bunch of routes, use the [generate.exclude](/docs/configuration-glossary/configuration-generate#exclude). You can keep using [generate.routes](/docs/configuration-glossary/configuration-generate#routes) to add extra routes that the crawler could not detect.
-
-To disable the crawler, set `generate.crawler: false` in your `nuxt.config.js`
-
-### Faster re-deploy
-
-By separating `nuxt build` and `nuxt export`, we are opening a new range of improvements: pre-render your pages only if you content has changed, this means: no webpack build → faster re-deployments.
-
-## Smarter `nuxt start`
-
-Once you statically generated your Nuxt app into `dist/`, use `nuxt start` to start a production HTTP server and serve your static app, supporting [SPA Fallback](/docs/concepts/static-site-generation#spa-fallback).
-
-This command is perfect to locally test your static application before pushing to your favorite static hosting provider.
-
-## Preview mode
-
-We do support live preview out of the box to keep calling your API:
-
-```js{}[plugins/preview.client.js]
-export default async function ({ query, enablePreview }) {
-  if (query.preview) {
-    enablePreview()
-  }
-}
-```
-
-It will automatically refresh the page data (calling `nuxtServerInit`, `asyncData` and `fetch`).
-
-When the preview mode is activated, `asyncData` and `fetch` original methods will be called.
-
-## Commands
-
-Depending of the `target`, you can run these commands.
-
-- `server`
-  - `nuxt dev`: Start the development server
-  - `nuxt build`: Bundle your Nuxt application for production
-  - `nuxt start`: Start the production server
-- `static`
-  - `nuxt dev`: Start the development server (static aware)
-  - `nuxt generate`: Bundle your Nuxt application for production if needed (static aware) and export your application to static HTML in `dist/` directory
-  - `nuxt start`: Serve your production application from `dist/`
-
-### What to do next
-
-::alert{type="next"}
-To learn more about how to move from @nuxtjs/dotenv to runtime config check out [this article](/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config).
-::
-
-::alert{type="next"}
-[Subscribe to the newsletter](#subscribe-to-newsletter) to not miss the upcoming articles and resources.
-::
diff --git a/content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md b/content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md
deleted file mode 100644
index 65afefda84..0000000000
--- a/content/fa/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md
+++ /dev/null
@@ -1,336 +0,0 @@
----
-template: post
-title: 'Understanding how fetch works in Nuxt 2.12'
-description: Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications.
-imgUrl: blog/understanding-how-fetch-works-in-nuxt-2-12/main.jpeg
-imgCredits: Rahul Bhosale
-imgCreditsUrl: https://unsplash.com/@rahul_design
-date: 2020-04-06
-authors:
-  - name: Krutie Patel
-    avatarUrl: https://pbs.twimg.com/profile_images/780651635932434432/YtbSkumD_400x400.jpg
-    link: https://twitter.com/KrutiePatel
-tags:
-  - Nuxt
-  - Fetch
-  - Asynchronous Data Fetching
-  - API
-category: Release
----
-
-Nuxt introduces a new `fetch` with the latest release of version 2.12. Fetch provides a brand new way to bring data into Nuxt applications.
-
-In this post, we will explore different features of the fetch hook and try to understand how it works.
-
-## Fetch Hook and Nuxt Lifecycle
-
-In terms of Nuxt lifecycle hooks, `fetch` sits within Vue lifecycle after `created` hook. As we already know that, all Vue lifecycle hooks are called with their `this` context. The same applies to `fetch` hook as well.
-
-![New fetch in Nuxt lifecycle](/blog/understanding-how-fetch-works-in-nuxt-2-12/new-fetch-lifecycle-hooks.png)
-
-Fetch hook is called after the component instance is created on the server-side. That makes `this` context available inside the `fetch`.
-
-```js
-export default {
-  fetch() {
-    console.log(this)
-  }
-}
-```
-
-Let’s see what this could mean for page components.
-
-### Page Components
-
-With the help of `this` context, fetch is able to mutate component’s data directly. It means we can set the component’s local data without having to dispatch Vuex store action or committing mutation from the page component.
-
-As a result, Vuex becomes optional, but not impossible. We can still use `this.$store` as usual to access Vuex store if required.
-
-## Availability of fetch hook
-
-With `fetch`, we can prefetch the data asynchronously **in any Vue components**. It means, other than page components found in `/pages` directory, every other `.vue` components found in `/layouts` and `/components` directories can also benefit from the fetch hook.
-
-Let's see what this could mean for layout and building-block components.
-
-### Layout Components
-
-Using new `fetch`, now we can make API calls directly from the layout components. This was impossible prior to the release of v2.12.
-
-**Possible use cases**
-
-- Fetch config data from the back-end in Nuxt layouts to generate footer and navbar dynamically
-- Fetch user related data (i.e. user profile, shopping-cart item count) in the navbar
-- Fetch site relevant data on `layouts/error.vue`
-
-### Building-block (Child/Nested) Components
-
-With `fetch` hook available in child components as well, we can off-load some of the data-fetching tasks from page-level components, and delegate them over to nested components. This was also impossible prior to the release of v2.12.
-
-This reduces the responsibility of route-level components to a great extent.
-
-**Possible use case -** We can still pass props to child components, but if the child components need to have their own data-fetching logic, now they can!
-
-## Call order of multiple fetch hooks
-
-Since each component can have its own data-fetching logic, you may ask what would be the order in which each of them are called?
-
-Fetch hook is called on server-side once (on the first request to the Nuxt app) and then on client-side when navigating to further routes. But since we can define one fetch hook for each component, fetch hooks are called in sequence of their hierarchy.
-
-### Disabling fetch on server-side
-
-In addition, we can even disable fetch on the server-side if required.
-
-```js
-export default {
-  fetchOnServer: false
-}
-```
-
-And this way, the fetch hook will only be called on client-side. When `fetchOnServer` is set to false, `$fetchState.pending` becomes `true` when the component is rendered on server-side.
-
-## Error Handling
-
-New `fetch` handles error at component level. Let’s see how.
-
-Because we’re fetching data asynchronously, the new fetch() provides a `$fetchState` object to check whether the request has finished and progressed successfully.
-
-Below is what the `$fetchState` object looks like.
-
-```
-$fetchState = {
-  pending: true | false,
-  error: null | {},
-  timestamp: Integer
-};
-```
-
-We have three keys,
-
-1. **Pending -** lets you display a placeholder when fetch is being called on client-side
-2. **Error -** lets you show an error message
-3. **Timestamp -** shows timestamp of the last fetch which is useful for caching with `keep-alive`
-
-These keys are then used directly in the template area of the component to show relevant placeholders during the process of fetching data from the API.
-
-```html
-
-```
-
-When error occurs at **component-level**, we can set HTTP status code on server-side by checking `process.server` in fetch hook and follow it up with `throw new Error()` statement.
-
-```js
-async fetch() {
-  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`)
-                     .then((res) => res.json())
-
-  if (post.id === this.$route.params.id) {
-      this.post = post
-    } else {
-      // set status code on server and
-      if (process.server) {
-        this.$nuxt.context.res.statusCode = 404
-      }
-      // use throw new Error()
-      throw new Error('Post not found')
-    }
-}
-```
-
-Setting the HTTP status code this way **is useful for correct SEO**.
-
-## Fetch as a method
-
-New fetch hook also acts as a method that can be invoked upon user interaction or invoked programmatically from the component methods.
-
-```html
-
-
-```
-
-```js
-// from component methods in script section
-export default {
-  methods: {
-    refresh() {
-      this.$fetch()
-    }
-  }
-}
-```
-
-## Making Nuxt pages more performant
-
-We can use `:keep-alive-props` prop and `activated` hook to make Nuxt page components more performant using a new fetch hook.
-
-Nuxt allows **caching a certain number of pages** in the memory along with their fetched data. And also allows **adding a number of seconds** before we can re-fetch the data.
-
-For any of the above methods to work, we have to use the `keep-alive` prop in generic `` and ` components.
-
-```html{}[layouts/default.vue]
-
-```
-
-In addition, we can pass `:keep-alive-props` to `` component to cache a number of pages along with their fetched data.
-
-`:keep-alive-props` prop allow us to indicate the maximum number of pages that should be kept in the memory while we navigate elsewhere within the site.
-
-```html{}[layouts/default.vue]
-
-```
-
-Above is one way to boost page performance which is more high-level and generic, while the next one drills down to optimize the fetch request calls by using the `timestamp` property of `$fetchState` and comparing it against the number of seconds delay before it re-fetches the data.
-
-Vue’s `activated` hook is used here with Nuxt's `keep-alive` prop to re-fetch the data.
-
-```js
-export default {
-  activated() {
-    // Call fetch again if last fetch more than a minute ago
-    if (this.$fetchState.timestamp <= Date.now() - 60000) {
-      this.$fetch()
-    }
-  }
-}
-```
-
-## asyncData vs Fetch
-
-As far as page components are concerned, new `fetch` seems way too similar to `asyncData()` because they both deal with the local data. But there are some key differences worth taking note of as below.
-
-As of Nuxt 2.12, `asyncData` method is still an active feature. Let’s examine some of the key differences between `asyncData` and new `fetch`.
-
-### asyncData
-
-1. `asyncData` is limited to only page-level components
-2. `this` context is unavailable
-3. Adds payload by **returning** the data
-
-```js
-export default {
-  async asyncData(context) {
-    const data = await context.$axios.$get(
-      `https://jsonplaceholder.typicode.com/todos`
-    )
-    // `todos` does not have to be declared in data()
-    return { todos: data.Item }
-    // `todos` is merged with local data
-  }
-}
-```
-
-### New Fetch
-
-1. `fetch` is available in all Vue components
-2. `this` context is available
-3. Simply **mutates** the local data
-
-```js
-export default {
-  data() {
-    return {
-      todos: []
-    }
-  },
-  async fetch() {
-    const { data } = await axios.get(
-      `https://jsonplaceholder.typicode.com/todos`
-    )
-    // `todos` has to be declared in data()
-    this.todos = data
-  }
-}
-```
-
-## Fetch before Nuxt 2.12
-
-If you have been working with Nuxt for a while, then you’ll know that the previous version of `fetch` was significantly different.
-
-> **Is this a breaking change?**
-
-> No, it isn't. Actually, the old fetch can still be used by passing the `context` as the first argument to avoid any breaking changes in your existing Nuxt applications.
-
-Here’s the list of notable changes in `fetch` hook compared with **before** and **after** v2.12.
-
-### 1. Call order of `fetch` hook
-
-**Before -** `fetch` hook was called before initiating the component, hence `this` wasn’t available inside the fetch hook.
-
-**After -** `fetch` is called after the component instance is created on the server-side when the route is accessed.
-
-### 2. `this` vs `context`
-
-**Before -** We had access to the Nuxt `context` on page-level components, given that the `context` is passed as a first parameter.
-
-```js
-export default {
-  fetch(context) {
-    // …
-  }
-}
-```
-
-**After -** We can access `this` context just like Vue client-side hooks without passing any parameters.
-
-```js
-export default {
-  fetch() {
-    console.log(this)
-  }
-}
-```
-
-### 3. Availability of `fetch` hook
-
-**Before -** Only page (route-level) components were allowed to fetch data on the server-side.
-
-**After -** Now, we can prefetch the data asynchronously in any Vue components.
-
-### 4. Call order of `fetch` hook
-
-**Before -** `fetch` could be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.
-
-**After -** New `fetch` is the same as an old fetch, but…
-
-…since we can have one `fetch` for each component, `fetch` hooks are called in sequence of their hierarchy.
-
-### 5. Error Handling
-
-**Before -** We used the `context.error` function that showed a custom error page when an error occurred during API calls.
-
-**After -** New `fetch` uses the `$fetchState` object to handle errors in the template area during API calls.
-
-Error handling is performed at component level.
-
-> **Does this mean we cannot show users a custom error page like we did prior to Nuxt 2.12?**
-
-Yes we can, but only with `asyncData()` when it's about page-level component data. When using `fetch`, we can utilize `this.$nuxt.error({ statusCode: 404, message: 'Data not found' })` to show a custom error page.
-
-## Conclusion
-
-New fetch hook brings a lot of improvements and provides more flexibility in fetching data and organizing route-level & building-block components in a whole new way!
-
-It will certainly make you think a little differently when you plan and design your new Nuxt project that requires multiple API calls within the same route.
-
-I hope this article has helped you get acquainted with the new `fetch` feature. I'd love to see what you build with it.
-
-## What's next
-
-::alert{type="next"}
-Read [Sergey Bedritsky's article](/tutorials/build-dev-to-clone-with-nuxt-new-fetch) to see new `fetch` hook in action as he shows how to build a dev.to clone!
-::
-
-::alert{type="next"}
-Already missed March newsletter? [Subscribe to Nuxt newsletter](#subscribe-to-newsletter) and get latest articles and resources delivered right into your inbox.
-::
diff --git a/content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md b/content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md
deleted file mode 100644
index 84feef4094..0000000000
--- a/content/fa/announcements/3.nuxtjs-from-terminal-to-browser.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-template: post
-title: 'Nuxt: From Terminal to Browser'
-description: How we changed the developer experience to stop switching between the terminal and browser.
-imgUrl: blog/nuxtjs-from-terminal-to-browser/main.jpeg
-imgCredits: Dave Ruck
-imgCreditsUrl: https://unsplash.com/@daveruck
-date: 2019-06-04
-authors:
-  - name: Sébastien Chopin
-    avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
-    link: https://twitter.com/atinux
-tags:
-  - webpack
-  - DX
-category: Release
----
-
-> Nuxt is a Vue.js framework to create different kind of web applications with the **same directory structure & conventions**: Universal, Single Page, PWA or Static Generated.
-
-_ℹ️ These features are all available with [v2.8.0 release](https://github.com/nuxt/nuxt.js/releases/tag/v2.8.0)._
-
-## [](#problems)Problems
-
-1.  Developing JavaScript applications with Webpack or any bundler requires to switch between your browser and terminal for debugging purpose.
-2.  Using `console.log` to debug when the app is server rendered requires to remember that logs will be displayed on the terminal when refreshing the page.
-
-## [](#solutions)Solutions
-
-1.  Forwarding Webpack build state right in the browser and display them in a fancy manner.
-
-![foward-webpack-build-state](https://res.cloudinary.com/practicaldev/image/fetch/s--1u6wSHPt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58880743-ec7a3280-86d8-11e9-8856-8d9d22b89b70.gif)
-
-2.  Same for Hot Module Replacement (really useful when the project gets bigger and takes more time to re-build).
-
-![nuxt-build-indicator-hmr](https://res.cloudinary.com/practicaldev/image/fetch/s--faVtF222--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58547105-129a6100-8207-11e9-9c61-a93956a17727.gif)
-
-3.  Forwarding SSR logs to the browser in development mode
-
-![nuxt-ssr-logs-forwarding](https://res.cloudinary.com/practicaldev/image/fetch/s--bwQ8iEq2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58566291-a3396700-8230-11e9-9dd6-09c3ff8578d2.gif)
-
-## [](#nuxtjs-vision)Nuxt Vision
-
-The purpose to these changes is to use the terminal for commands only.
-
-Now you can focus right on your code and its visual result 🙂
-
-> Be lazy, be smart, be Nuxt.
-
-Links:
-
-- Documentation: [https://nuxtjs.org](https://nuxtjs.org)
-- GitHub: [https://github.com/nuxt/nuxt.js](https://github.com/nuxt/nuxt.js)
-- Loading Screen source code: [https://github.com/nuxt/loading-screen](https://github.com/nuxt/loading-screen)
-- Twitter: [https://twitter.com/nuxt_js](https://twitter.com/nuxt_js)
diff --git a/content/fa/announcements/4.introducing-smart-prefetching.md b/content/fa/announcements/4.introducing-smart-prefetching.md
deleted file mode 100644
index e2f2edf3b6..0000000000
--- a/content/fa/announcements/4.introducing-smart-prefetching.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-template: post
-title: Introducing Smart Prefetching
-description: 'Starting from Nuxt v2.4.0, Nuxt will automagically prefetch the code-splitted pages linked with a nuxt-link when visible in the viewport by default.'
-imgUrl: blog/introducing-smart-prefetching/main.jpeg
-imgCredits: Mateus Maia
-imgCreditsUrl: https://unsplash.com/@mateusmaia
-date: 2019-01-28
-authors:
-  - name: Sébastien Chopin
-    avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
-    link: https://twitter.com/atinux
-tags:
-  - framework
-  - feature
-  - performance
-category: Release
----
-
-## Introducing Smart prefetching ⚡️
-
-Starting from [Nuxt v2.4.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.4.0), Nuxt will automagically prefetch the code-splitted pages linked with `` when visible in the viewport **by default**. This hugely improves the end user performances, inspired by [quicklink](https://github.com/GoogleChromeLabs/quicklink).
-
-![nuxt-prefetch-comparison](https://res.cloudinary.com/practicaldev/image/fetch/s--jP7Crsw7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/51692960-4158be80-1ffe-11e9-9299-61881d06412e.gif)
-
-Demos are online and we recommend you to try it out to feel the difference:
-
-- No prefetching (v2.3): [https://nuxt-no-prefetch.surge.sh](https://nuxt-no-prefetch.surge.sh)
-- With prefetching (v2.4): [https://nuxt-prefetch.surge.sh](https://nuxt-prefetch.surge.sh)
-
-You can learn more about this feature in the [``](/docs/features/nuxt-components#the-nuxtlink-component) section of the documentation.
diff --git a/content/fa/announcements/5.nuxt3-beta.md b/content/fa/announcements/5.nuxt3-beta.md
deleted file mode 100644
index 0f7b6efabd..0000000000
--- a/content/fa/announcements/5.nuxt3-beta.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-template: post
-title: Introducing Nuxt 3 Beta
-description: "468 days after the first commit, the Nuxt 3 beta has finally arrived. Discover what's inside and what to expect from it. Yes, it includes Vue 3 and Vite ⚡️"
-imgUrl: blog/nuxt3-beta/main.jpg
-date: 2021-10-12
-authors:
-  - name: Sébastien Chopin
-    avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
-    link: https://twitter.com/atinux
-  - name: Pooya Parsa
-    avatarUrl: https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg
-    link: https://twitter.com/_pi0_
-  - name: Daniel Roe
-    avatarUrl: https://pbs.twimg.com/profile_images/1326211963614007302/UJyvtK2f_400x400.jpg
-    link: https://twitter.com/danielcroe
-  - name: Alexandre Chopin
-    avatarUrl: https://pbs.twimg.com/profile_images/1255027239458091009/qMp_q8vy_400x400.jpg
-    link: https://twitter.com/IAmNuxt
-tags:
-  - framework
-  - release
-  - beta
-category: Release
----
-
-We are excited to open source Nuxt 3 after more than a year of intense development. The repository is available on GitHub on [nuxt/framework](https://github.com/nuxt/framework) under the [MIT](https://github.com/nuxt/nuxt.js/blob/dev/LICENSE) license.
-
-::alert{type=success}
-The documentation is available on https://v3.nuxtjs.org.
-::
-
-## A new foundation
-
-On top of supporting [Vue 3](https://v3.vuejs.org) or [Vite](https://vitejs.dev), Nuxt 3 contains a new [server engine](https://v3.nuxtjs.org/concepts/server-engine), unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern cloud hosting providers.
-
-In production, it builds your Vue application and server into one universal `.output` directory. This output is light: minified and without any other Node.js dependencies (except polyfills). You can deploy this output on any system supporting JavaScript, whether Node.js, Serverless, Workers, Edge-side rendering or purely static.
-
-**Bonus:** this server engine can be used on existing Nuxt 2 projects with [Nuxt Bridge](https://v3.nuxtjs.org/getting-started/bridge) 🚀
-
-Head over the [Nuxt 3 homepage](https://v3.nuxtjs.org) to learn more about Nuxt Nitro and Nuxt Bridge.
-
-## Important notes
-
-Nuxt 3 is currently in beta, so expect things to break (and be fixed quickly). We have [plenty of work left](https://github.com/nuxt/framework/issues) but we want to open it publicly to gather feedback and contributions from the community 💚
-
-**Do not use it for production until we reach the first release candidate.**
-
-During the beta, almost every commit will [trigger a new npm release](https://github.com/nuxt/framework/blob/main/.github/workflows/ci.yml#L111-L119); you may want to look at the [merged pull requests](https://github.com/nuxt/framework/pulls?q=is%3Apr+is%3Amerged) until we begin generating automated changelogs in the documentation.
-
-We are working every day to improve the documentation, explaining as much as possible all the concepts, features and usage of Nuxt 3.
-
-Check out the community section of the Nuxt 3 website for [getting help](https://v3.nuxtjs.org/community/getting-help), [reporting bugs](https://v3.nuxtjs.org/community/reporting-bugs) or [contributing to the framework](https://v3.nuxtjs.org/community/contribution).
-
-## Timeline
-
-Here some major milestones we've achieved on the way to Nuxt 3:
-
-::list
-- **Jul 2, 2020**: Nuxt 3 first commit with full TypeScript rewrite
-- **Aug 7, 2020**: Webpack 5 support
-- **Sep 15, 2020**: [`pages/`](https://v3.nuxtjs.org/docs/directory-structure/pages) support
-- **Oct 29, 2020**: [Vue 3](https://v3.vuejs.org) support with bundle-renderer
-- **Nov 2, 2020**: [Nuxt Nitro](https://v3.nuxtjs.org/concepts/server-engine) initial work
-- **Jan 22, 2021**: Initial [Vite](https://vitejs.dev) support
-- **Feb 4, 2021**: Nuxt can deploy on [major serverless platforms](https://v3.nuxtjs.org/docs/deployment)
-- **Mar 6, 2021**: [UnJS](https://github.com/unjs) organisation created on GitHub
-- **Mar 28, 2021**: Init Nuxt Kit and Nuxt CLI ([nuxi](https://v3.nuxtjs.org/getting-started/commands))
-- **May 20, 2021**: [`app.vue`](https://v3.nuxtjs.org/docs/directory-structure/app) support (`pages/` becomes optional)
-- **Jun 30, 2021**: [`layouts/`](https://v3.nuxtjs.org/docs/directory-structure/layouts) support
-- **Jul 15, 2021**: Native ESM support
-- **Aug 10, 2021**: Auto import of composables and components
-- **Sep 5, 2021**: Init [Nuxt Bridge](https://v3.nuxtjs.org/getting-started/bridge) for improving Nuxt 2 experience
-- **Sep 7, 2021**: Support Vite build for production
-- **Oct 11, 2021**: Add [`useState`](https://v3.nuxtjs.org/docs/usage/state) and [`useFetch`](https://v3.nuxtjs.org/docs/usage/data-fetching#usefetch) composables
-::
-
-So far, we've merged [385 pull requests](https://github.com/nuxt/framework/pulls?q=is%3Apr+is%3Amerged), closed [229 issues](https://github.com/nuxt/framework/issues?q=is%3Aissue+is%3Aclosed) and made [925+ commits](https://github.com/nuxt/framework/commits/main).
-
-We are excited to hear your thoughts and we thank you for your patience.
-
-Now you can go over the [Nuxt 3 documentation](https://v3.nuxtjs.org) 😊
-
-Don't forget to follow us on [Twitter](https://twitter.com/nuxt_js) to get the latest news about Nuxt!
diff --git a/content/fa/announcements/index.md b/content/fa/announcements/index.md
deleted file mode 100644
index 2457826bb3..0000000000
--- a/content/fa/announcements/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-template: blog
-title: Announcements
-description: Discover articles from Nuxt team.
-blogPostList: true
-sortBy:
-  field: 'date'
-  direction: 'desc'
----
diff --git a/content/fa/case-studies/0.github.md b/content/fa/case-studies/0.github.md
deleted file mode 100644
index c07e2ebc71..0000000000
--- a/content/fa/case-studies/0.github.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-template: post
-title: GitHub Stars
-description: "GitHub Stars recognises those folks who are going above and beyond in helping others in the developer world. These exceptional folks are not only maintaining projects but they are going out there to educate. They are inspiring people and influencing people, both online and offline in everyday things that they do. It's for this purpose that GitHub created the GitHub Stars program."
-imgUrl: img/case-studies/github/cover.png
-headingImg:
-  hidden: true
----
-![Github Stars homepage](img/case-studies/github/main.png){width=736 height=370}
-
-## What is GitHub?
-
-GitHub is the home for millions of developers. We have over 65 million developers and essentially it's a place where developers can go and create, share and make their best code possible. We try and make it easy for developers to meet developers, work together, solve challenging problems and create the world's most important technologies. Our community is made up from a diverse set of people from students to hobbyists, enterprise professionals, partners and executives, and the list goes on. GitHub is not just code, it is much more than code, it's the home of open source collaboration. It's where new developers can come and get started. It's where experienced developers can expand their knowledge with developers solving the unsolvable and testing the limits of what software can do.
-
-## Is GitHub open sourced?
-
-It is an idea that is worth considering and there are parts of GitHub across infrastructure tooling that are already open source. At github.com/github you will be able to see all of the open source projects that we have there. Two notable examples are:
-
-  The [GitHub load balancer](https://github.blog/2018-08-08-glb-director-open-source-load-balancer/) which we open sourced back in 2018. It is our scalable load balancer solution for the bare metal data centres and it powers the majority of GitHub's web and git traffic as well as it is fronting some of the principal intel systems.
-
-  [GitHub Docs](https://github.blog/2020-10-14-how-we-open-sourced-docs-github-com/) which we open sourced in mid October 2020. With this effort, we're able to source new ideas from a broader and diverse set of individuals, especially from those who are  experts in the community and GitHub.
-
-## What is GitHub Stars?
-
-[GitHub Stars](http://stars.github.com/) recognises those folks who are going above and beyond in helping others in the developer world. These exceptional folks are not only maintaining projects but they are going out there to educate. They are inspiring people and influencing people, both online and offline in everyday things that they do. It's for this purpose that we created the [GitHub Stars program](http://stars.github.com/). 
-
-It's our way to say thank you to these amazing people. It gives Stars a platform to showcase their work, enable them to reach more people and help everyone benefit from the vast amount of knowledge, excitement and expertise that they have. A lot of these folks are doing what they are doing because they love it and it's all without an expectation of a reward. So they do things like podcasts, videos, blogs, meetups etc, to share their stories and best practices, their work and their learnings around GitHub. 
-
-We [officially launched the program in September 2020](https://github.blog/2020-09-03-introducing-the-github-stars-program/), and have already seen more than 12k nominations. It has been very exciting to see the sheer amount of nominations, which is a good problem to have, but it is a lot of nominations that we need to go through and review with strict criteria. We want to make sure we are rewarding these folks by giving them a platform so they can continue doing what they are doing and go out to help others. It has been a fantastic journey, difficult but very exciting, and we could not have done it without the help from Josep Jaume Rey and his team at [Codegram](https://www.codegram.com/). It has been great to put the website together and everything that has gone around that has really put the cherry on the top of the cake.
-
-## How is the GitHub Stars website built?
-
-At the very beginning we were planning on having a fully static website. The idea was to replicate what we did on the GitHub Hackaton website. The way people contributed to it was to send a pull request and when the pull request got merged the website would get re-generated. This was the initial idea to have it full static and rely on the GitHub repository but we figured that there were some interactions that were not that straight forward to do, such as nominating. This could be potentially a little bit risky to do it on the GitHub repo because we didn't know how many nominations there would be and it turns out it was a good call. Instead, we created a full static website with some refinements around the nomination part. For nominations, this hits an API which then talks to a GraphQL API that is built on top of an Apollo server and Prisma, which all synchronises with Airtable as an admin interface.
-
-## Why did you choose Nuxt as your frontend framework?
-
-Nuxt was the perfect candidate because of the fact that it can play well as a full static website but you can progressively change it to a fully dynamic website. We thought that maybe in the future, we might not be happy about having a bit of a delay due to having to regenerate the site when changes are made in the admin dashboard. We already loved Vue and Nuxt but this feature in particular was very helpful. We had the assurance that at any particular moment we could change the approach. 
-
-## Are you using dynamic or static rendering? Why?
-
-GitHub Stars is a statically generated website hosted on GitHub Pages and it gets redeployed and regenerated every 15 minutes. The nominations are sent to a Postgres database which gets stored there until the next redeploy. We don't need it in real-time as the nominations are not shown anywhere on the public website, so everything goes to the nominations database that gets synchronised to Airtable. From there, the GitHub team decides who gets awarded as a GitHub Star, which is then published on the website.
-
-![Github Stars page](img/case-studies/github/1.png){width=736 height=382}
-
-## What is your favorite feature?
-
-The full static mode and the way URLs are automatically crawled so you don't have to manually list them anymore. It was a really cool idea to solve that particular problem and things are faster now because of the pre-loading. We were able to remove a lot of code we had for generating URLs. We love that feature.
-
-Another great feature is the folder structure because for non-developers it makes it easier as they know exactly where to go and understand where to find things. I think the folder structure is genius. 
-
-And the fact that Nuxt is open source - and at GitHub we <3 open source, is definitely one of the things we love about Nuxt. As one of our top 100 open source projects, we work closely with Nuxt and take feedback to understand how we can improve GitHub.
-
-## Would you recommend Nuxt?
-
-Yes! We pride ourselves on providing a first-class developer experience. We’re developers too, and we love how the framework is simple, yet powerful.
diff --git a/content/fa/case-studies/1.livementor.md b/content/fa/case-studies/1.livementor.md
deleted file mode 100644
index 636e7b7368..0000000000
--- a/content/fa/case-studies/1.livementor.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-template: post
-title: LiveMentor
-description: LiveMentor is one of the world's leading education companies focused on entrepreneurship. They decided to migrate their existing front-end to Nuxt. We met with Romain and Alexandre to talk about their journey.
-imgUrl: img/case-studies/livementor/cover.png
-headingImg:
-  hidden: true
----
-
-![Livementor dashboard](img/case-studies/livementor/mockup-m1-3.png){width=736 height=404}
-
-## What is LiveMentor?
-
-LiveMentor is one of the world's leading education companies focused on entrepreneurship. We help creators to go from the idea stage to being able to make a living from their projects. So basically being profitable. We have been doing online courses for almost 10 years now, and trying a lot of different ways to teach online. We have tried what we called CBC (cool-off based courses), soft courses, courses with only content and eventually we decided four years ago to focus on one-on-one mentoring. Our three months' training is powered by a messaging app where you can chat with your mentor. We have trained more than 10,000 people so far and we are now on track to train 10,000 people per year.
-
-Our platform combines technology with storytelling, teachers and community integration. We teach the topics that are most important for someone who's starting a business: sales, marketing, hiring, financing, business planning, and all the basics that you need when you are creating a company.
-
-We focus on helping you start a business, quit your day job and make a living from your own business. We have students in 30 countries, but all our lessons are in French, so many of them are French people living abroad. We have 100 people working at LiveMentor.
-
-## How did you discover Nuxt?
-
-We started LiveMentor as a monolithic app on a Rails stack, which allowed us to iterate quickly during the first few years. Two years ago, we decided to solidify our codebase, and chose VueJS for a rich client-side experience.
-
-To make the transition progressively, we began by building micro Vue apps functioning at the page level, with a wrapper rendered by Rails. But loading times kept going up, and we knew we had to go a step further.
-
-We found Nuxt at this time, via [Twitter](https://twitter.com/nuxt_js), and made a Proof of Concept project that went very well. Since then, we have been moving all our pages to Nuxt progressively.
-
-## So you're making a progressive transition?
-
-Yes, and we're now close to the end. We really wanted to reduce that transition phase, so we extracted features "as-is" to Nuxt. **It's important to say that Nuxt made it really easy to make this progressive transition, it all fits together very simply.**
-
-Regarding deployments, Nuxt also helps a lot by abstracting the Node parts. We're using Heroku, and with a well configured Docker, it was seamless.
-
-## Are you using dynamic or static rendering? Why?
-
-We use dynamic rendering because our pages are not static and we have a lot of content updated constantly, so we use SSR to do this because it's not really a static site.
-
-We are focused like crazy on reactivity because all our pedagogical experience, all the learning experience is based on the messaging app between the mentor and the students. We had trouble with our previous messaging system, latency and messages not showing up.
-
-The Firebase plus Nuxt combo made it much better.
-
-## What is your favorite feature?
-
-The first feature that made us choose Nuxt was the project's architecture. Be it file-based routing or folder separation, it all fits in an intuitive way. Just dropping a file in your [pages/](/docs/directory-structure/pages) folder without having to configure a router is a must.
-
-At the moment, we use Vuex a lot, but we're thinking about moving a little bit away from it by leveraging the Composition API.
-
-## Do you have performance benchmarks before & after using Nuxt?
-
-On the migrated pages, **we managed to cut our loading time in half**. When we launched the new messaging, one of the first comments we had from our users was "Wow this is really fast!"
-
-We also noticed that the team velocity increased, as we can now have people who only focus on the front-end, and others on the API. There's a big bonus in development time. But we still work with cross-functional teams, where we're allowed to do Pull Requests in all repositories! So the teams are not siloed by technologies, but more focused.
-
-## Would you recommend Nuxt?
-
-Yes, of course. We have no doubts about the framework's future, it's well maintained by a [solid team](/teams). The community is reactive to our messages and we believe Nuxt will keep growing in the coming years.
diff --git a/content/fa/case-studies/2.stores.md b/content/fa/case-studies/2.stores.md
deleted file mode 100644
index 7fc1e6a4c8..0000000000
--- a/content/fa/case-studies/2.stores.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-template: post
-title: Stores.jp
-description: "stores.jp is an e-commerce platform which allows users to create their own e-commerce website. It focuses on users who don't have their own e-commerce site yet. That's why most of the features are designed so users can change the style and functionality easily without having any technical background knowledge."
-imgUrl: img/case-studies/stores/cover.png
-headingImg:
-  hidden: true
----
-
-![Stores.jp homepage](img/case-studies/stores/main.png){width=736 height=382}
-
-## What is Stores.jp?
-
-[stores.jp](http://stores.jp) is an e-commerce platform which allows users to create their own e-commerce website. It focuses on users who don't have their own e-commerce site yet. That's why most of the features are designed so users can change the style and functionality easily without having any technical background knowledge.
-
-In the store dashboard the shop owner can change the style, layout or add a banner etc by easily dragging and dropping. Stores.jp has the same features as the well known platform Shopify but it is specially designed for beginners. Most of the features can be enabled or disabled by simply clicking.
-
-## How did you discover Nuxt?
-
-We considered what is the best stack for us by researching articles and meetup sessions which are written and spoken in Japanese and that is how we found Nuxt. We considered all other choices like React, Angular JS, Angular 2 and Vue.js. For us it is very important to have the documentation in Japanese language as English is difficult especially for beginners.
-
-## Why did you choose Nuxt as your frontend framework?
-
-When we started we were just one frontend developer and one designer and sometimes the designer needed to edit HTML so in that case Vue.js single file components are the best. Contrary to React, Nuxt is easy to understand even for designers. At the time Nuxt was the only framework based on Vue.js.
-
-The old version of [stores.jp](http://stores.jp) was made in Angular JS. As our site grew bigger, our team of developers grew too. We needed to unify our codebase. When we want to add the logic we don't want to discuss if it should be an angular service or a factory so that is why we thought we need a framework instead of a library and that is why we chose Nuxt instead of just using Vue.js.
-
-## Are you using dynamic or static rendering? Why?
-
-The frontend of the store and then a dashboard with server rendered pages. The storefront is still in Angular JS but we want to migrate to Nuxt in the future. The dashboard was also made with Angular JS but we are currently working on replacing it with Nuxt. At the moment 20% of it is working on Nuxt using client side rending. Server side rendering, dynamic rendering is good for performance. Nuxt has a great option to switch between client side and server side rendering. The Angular JS dashboard was originally setup to work as an SPA so we can't change the architecture of this and we want to focus only on replacing the library which is why currently the dashboard is working with client side rendering.
-
-Then we have the main website which is built with Nuxt using SSR and target static. We choose static site generation because SEO is very important for those kind of pages and they don't have any dynamic content.
-
-## What is your favorite feature?
-
-We have 3 favorite features. The first is the plugins. This is our favorite feature. The mechanism which injects this into the context, it totally makes sense for Vue.js and is easy to use which is why we like the plugin architecture. The next is page components, generating page routing based on page component directory structure as it is so easy to understand. The last one is the mode, compared to other frameworks I think that Nuxt is an all in one framework. In React we needed to choose a framework based on the architecture, which means if we want to use an SPA we needed to use create-react-app and if we want server side rendering Next.js is better and if we want to use Static Site Generation then Next.js or Gatsby is better. On the other hand if you use Vue.js all you have to do is choose Nuxt as you can switch the architecture later. This is why the mode is my favourite option.
-
-![Stores.jp showcase](img/case-studies/stores/1.png){width=736 height=267}
-
-## Do you have performances benchmarks before & after using Nuxt?
-
-We haven't had any performance benchmarks yet because of our priority. It has been 8 years since we created [stores.jp](http://stores.jp) and now we are working hard at upgrading it to Nuxt so we don't have any time to look at performance margins. But we are interested in performance so sometimes if our service is slow we will check the lighthouse and try to modify our code. But currently we don't look at any metrics for performance.
-
-## Would you recommend Nuxt?
-
-Yes of course we would especially for a startup companies. As I mentioned earlier the fact you can change the strategy later to have client side rendering or server side rendering or static site generation based on the business requirements. That is why Nuxt is good for startups. And also for Japanese companies the fact that the Nuxt documentation is in Japanese is a big advantage. If there is no Japanese documentation it would be an obstacle for them to get started which is the case of Next.js
diff --git a/content/fa/case-studies/3.parent-scheme.md b/content/fa/case-studies/3.parent-scheme.md
deleted file mode 100644
index 2d3a81457d..0000000000
--- a/content/fa/case-studies/3.parent-scheme.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-template: post
-title: Parent Scheme
-description: "Parent Scheme is a UK-based start-up that works globally with organisations to help them support working parents. It offers livestreams, resources, articles, videos and coaching through an interactive platform."
-imgUrl: img/case-studies/parent-scheme/cover.png
-headingImg:
-  hidden: true
----
-
-![Parent Scheme homepage](img/case-studies/parent-scheme/main.png){width=736 height=318}
-
-## What is Parent Scheme?
-
-Parent Scheme is a UK-based start-up that works globally with organisations to help them support working parents. It offers livestreams, resources, articles, videos and coaching through an interactive platform. Parent Scheme is wholly inclusive and makes no assumptions about the gender, age, ethnicity and family circumstances of their users to allow them to find the right approach and solutions for their context. This is reflected in the graphic-based design. Parent Scheme also completely preserves users' privacy enabling them to customise the platform, favourite articles and save notes and coaching answers without having to worry their employer may see. All content on the platform is current and based on expert advice, covering topical challenges for every stage of the working parent lifecycle, from pregnancy and parental leave, through childcare options and the school years, to teens and young people starting university. There are sections for managers and HR as well. 
-
-2020 has been a challenging year for everyone, but it created unique challenges for working parents with schools and childcare settings closing, leaving them having to juggle remote working and helping their kids with homeschooling. As a company, Parent Scheme had to respond quickly to provide users with relevant support in constantly changing circumstances. We had to update and adapt content on an ongoing basis as the pandemic progressed. We were able to work together with experts in healthcare, psychology, education and HR to create a livestream programme addressing some of the most pressing questions for working parents and those that manage them.
-
-Our team has worked incredibly hard this year. And even though we've had to close our offices and move entirely to remote working, we've really thrived as a company. One of the things we're proud of is that within three days of the first UK lockdown being announced, we were able to release a completely new, fully branded, free site with huge amounts of functionality and topical articles to answer some of the most immediate questions for working parents. Within the first 24 hours the site received 15.000 visitors - just through organic sharing - and was then recommended by UK government departments.
-
-## How did you discover Nuxt?
-
-My initial involvement with Parent Scheme was running the creative agency asked to build the MVP (minimum viable product). We were asked to build it in WordPress but we refused. We believed in the project and said this is something that is going to be big and you don't want an MVP in Wordpress. We asked, 'how are you going to manage changing this as it becomes big? You are not going to be able to scale that.'  
-
-The client had no idea what Nuxt was so we described it to them as the kind of web technologies that companies like Google and Facebook use to build interactive apps, because talking to them about JavaScript frameworks would have been a step too far. 
-
-So we managed to persuade them to choose Nuxt from the beginning and we have never looked back. We then went on to acquire them and have now shut down our design agency. 
-
-With Nuxt we were able to build a mobile app just by using the same codebase because it was a progressive web app and we were able to seamlessly turn that into something that could be installed on the Google play store. That would never have been possible if we had built this on something like Wordpress. It is really good to have something solid as a foundation for the tech stack.
-
-For our content we initially used a markdown based CMS, Netlify CMS, which we self hosted and stored all content in a git repository. That was great, it was simple and easy to use and we ended up building a Jest test suite just for the content. We needed to ensure things like links weren't broken, external links were valid and adherence to our style guide especially for certain phrases that weren't our style. 
-
-That worked really well for us but recently we transitioned to using Sanity as our headless CMS, which has been fantastic. Sanity allows us to put our validation in at the editing level so that when someone is actually editing a file it will tell them right as they are typing something. If it doesn't meet our style guide it tells the user and advises them what to use instead, which is something our editors love.
-
-## Are you using dynamic or static rendering? Why?
-
-We have a number of different sites all running in Nuxt, our public client facing website, an account dashboard micro site that lets people manage their billing which is integrated with stripe, a type form clone which allows people answer surveys and our actual app. Our main enterprise app is server rendered and runs a Vercel serverless function which works really well for us. For us the dynamic side of things is really important because authentication is important and all of our content is gated so we can't pre-render that content and if were to pre-render it on the users browser it could potentially take longer to render with lots of API calls having to be made at that point. 
-
-Having a server rendered framework is a huge plus for user experience, which is a massive deal for us and therefore time to interaction and being able to serve fully rendered HTML to the browser so that from the first moment there is something visually interesting on the screen is really important for us. If we were doing entirely client side rendering we would lose seconds of users ability to see the information requested on first load.
-
-We use server side rendering for our main app, although there are very interesting developments happening with regards to Nuxt and serverless, so we may actually end up slightly changing how we do that. For all our other sites we use static. We use the Nuxt Fetch hook, which is phenomenal, and allows us to do really useful thinks like for example, getting our payment plan details from Stripe at generate time without then embedding that private key in our build files.
-
-## What is your favorite feature?
-
-The Nuxt modules. The ability to hook into how Nuxt works and make pretty profound changes and add new features. A lot of modules are from the Nuxt team and community and being able to add significant features by just adding a line in your config and installing a module is just incredible. If we want to hook in and change the behaviour of our own app in a testable way, we can build our own module which can then be used across multiple sites. 
-
-The full static mode and having fetched payloads is incredible as well.
-
-## Do you have performances benchmarks?
-
-We have a fairly big app and have lovely green performance scores, about 95% in performance. We also have a progressive web app as we use the PWA module which is really good for performance and we care a lot about that.
-
-## Would you recommend Nuxt?
-
-Absolutely I would. Nuxt works out of the box but you can customize and change anything you need to, which means that there is no down side because you get the ease of use but you are never in a position where you can't tinker under the hood with any setting that you need. I would recommend Nuxt to everyone. 
-
-We have talked to some really high up people at really big companies who have basically said the things that we are able to do with the Nuxt website are phenomenal. Nuxt means that we, as a small start up company, are able to pitch way above our weight in terms of offering something that is solid and a core part of our company.
-
-We had to pivot quite quickly. Our product has been through so many different features that we have released or rolled back and turned in a different direction and the codebase is still clean, which is incredible, and it is because of how it is built, as a Nuxt project which has enabled us to do things really quickly
-
-We have absolutely loved using Nuxt, I remember in the early days taking one of my developers who had only ever used Wordpress at that point and basically he had already started the work on building a Wordpress version and I told him were were going to be using Nuxt for this. His agony at the time, he said "I have never used it, I don't have any idea how to get into this new thing that I have never used before." But it took him very little time to pick it up and figure out how things worked and he has never looked back or touched a single line of code in a Wordpress site at any point after that. Something like Nuxt, the framework, the support it offers, it's really hard to go back once you have used it.
diff --git a/content/fa/case-studies/4.line.md b/content/fa/case-studies/4.line.md
deleted file mode 100644
index 1da2061af8..0000000000
--- a/content/fa/case-studies/4.line.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-template: post
-title: Line
-description: "LINE is a worldwide messaging platform with its main focus being in Asia and especially in Japan, where there are more than 86 million monthly active users, which is equivalent to about 70% of the Japanese population."
-imgUrl: img/case-studies/line/cover.png
-headingImg:
-  hidden: true
----
-
-![Line homepage](/img/case-studies/line/main.png){width=736 height=400}
-
-## What is Line ?
-
-LINE is a worldwide messaging platform with its main focus being in Asia and especially in Japan, where there are more than 86 million monthly active users, which is equivalent to about 70% of the Japanese population.
-
-LINE provides many different services including messaging, news, financial services and more. It makes extensive use of front-end technology in mini-apps which exist within the main app. More than 100 front-end engineers have developed more than 50 applications built with React, Vue, Nuxt, and other frameworks.
-
-Line uses Nuxt in HR applications such as its careers app, media applications such as apps for blogs and podcasts as well as in house applications.
-
-## How did you discover Nuxt?
-
-Before I joined LINE, I encountered Nuxt when I was simultaneously involved in many different job applications.
-
-Nuxt has all the elements necessary so that you don't have a chaotic Vue.js application architecture, and we continue to be impressed by it.
-
-We have been using Nuxt ever since, and LINE as a whole has been using Nuxt in various cases such as in its careers app, media applications such as apps for blogs and podcasts as well as in house applications.
-
-## Why did you choose Nuxt as your frontend framework?
-
-Nuxt provides the foundation for cleaner and amazing application architectures like never seen before ever. Nuxt’s convention not only makes engineers more productive, but also prevents noisy bikeshed discussions. We use Nuxt to deliver valuable products to our customers rapidly.
-
-![Line Healthcare](img/case-studies/line/1.png)
-
-## Are you using dynamic or static rendering? Why?
-
-We use both. When our products require realtime generation of HTML meta attribute (e.g. SEO, OGP), we use dynamic rendering using SSR. If not, we use static rendering using Single Page Application mode.
-
-In addition, for internal documents, we use the nuxt/content module with static site generation. Using this we have been able to create efficient documentation for our developers which has been much more readable than just writing markdown in Github.
-
-## What is your favorite feature?
-
-I really like how Nuxt gives you Convention over Configuration which makes it very efficient, but among the inherent features, I like the plugin system and the versatile build options.
-
-In Vue 2.x application development, managing global objects independent of the Vuex Store was always a headache for us. The Provide/Inject feature solved a lot of problems because of its easy-to-use and type friendly API.
-
-Nuxt is also packed with successfully managed plugins and modules, and the features that they have are indispensable for us.
-
-On the other hand, the versatile build options are also a great attraction. With Nuxt, we can ensure that we are writing universal JavaScript naturally, and we can smoothly switch from Single Page Applications to dynamic rendering or full static generation as needed.
-
-## Do you have performances benchmarks before & after using Nuxt?
-
-Sorry, we’re mainly using Nuxt for new development, so we can’t make a direct comparison with Vue.js. However, we are sure that Nuxt is bringing great value to us.
-
-## Would you recommend Nuxt?
-
-Of course. Nuxt is the option for all Vue.js application developers. If you’re reading this interview and you haven’t used Nuxt yet, you should try it now. It will surely help you solve many of the challenges you are having and help your product bring value to the market faster.
diff --git a/content/fa/case-studies/5.404-place-vendome.md b/content/fa/case-studies/5.404-place-vendome.md
deleted file mode 100644
index d38141a1ca..0000000000
--- a/content/fa/case-studies/5.404-place-vendome.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-template: post
-title: "404 Place Vendôme"
-description: "404 Place Vendôme is a jewellery company which was created in 2016 by two people. One of the founders father was a founder of gold and metals."
-imgUrl: img/case-studies/404-place-vendome/cover.png
-headingImg:
-  hidden: true
----
-
-![404 Place Vendôme homepage](img/case-studies/404-place-vendome/main.png){width=736 height=388}
-
-## What is 404 Place Vendôme ?
-
-404 Place Vendôme is a jewellery company which was created in 2016 by two people. One of the founders father was a founder of gold and metals. I joined the team, a few months after at the beginning of 2016. They asked for me to make, a configurator of products for the jewellery design. And then I made the website using 3JS and 3D and vanilla JS. At the time I didn't knew about, react or Vue. I showed them the concept I made with my godfather, and they were really impressed.
-
-## How did you discover Nuxt?
-
-I discovered Nuxt in 2018 after a year and a half of JavaScript fatigue. It took a long time to discover Nuxt through reading a lot of [medium articles](https://medium.com/vue-mastery/10-reasons-to-use-nuxt-js-for-your-next-web-application-522397c9366b) and then one of our developers who had just joined us told me Nuxt is great and was really enthusiastic about Nuxt. Then I discovered Next.js and [Guillermo Rauchs article](https://rauchg.com/2014/7-principles-of-rich-web-applications) from 2014 about what the web should be. It's a very old article about React and Next but it was really interesting and some of the principles in this article were not being applied to our website. I think there are a lot of things to learn from reading this.
-
-## Why did you choose Nuxt as your frontend framework?
-
-We first made the websites with React. We decided to make the back-office of the application first. Then we decided to switch to Vue, just to try for one day if the front of this website needs to be in Vue. And in one day we were so in love with Vue that I said, okay, let's make the front face with Vue, which is nonsense for a CTO because you have a front end with Vue and a backend app in React. Usually you use same technology for the back and the front office. We took a bet on the future to use Vue and it was so comfortable as a technology. Vue is really nice to learn, really easy.
-
-So we started to make the font face using Vue, and I separated all the JS and CSS and HTML in separate files. We released a first version of the website In 2017. Then we asked ourselves about how we could make the website faster especially on the homepage. The problem with the homepage was that it's a SPA and it was really huge. When it loads, it loads on the browser so it was really slow. It was really difficult. So we tried to look at code splitting. We searched a lot. By the time of 2018 . I think the first reason was the SEO and also because of the nature of the 3D configurator, which is a one MB package, we could not make the websites as an SPA if we wanted to have good performance. 
-
-We were very happy to use Nuxt because there is a layer of learning and maintaining which is really time demanding that you don't have to deal with. For me Nuxt really is a great technology.
-
-## Are you using dynamic or static rendering? Why?
-
-We decided to use static rendering because a page, with a lot of content, it's way better to have static rendering. Also you can just deploy to Amazon for free for your whole site.
-
-![404 Place Vendôme internal page](img/case-studies/404-place-vendome/1.png){width=736 height=339}
-
-## What is your favorite feature?
-
-Being performant by default is one of the best features. If you use threeJS or big libraries, you will need to code split so it will be way faster. Code splitting by default is a great feature, but there is also the progressive nature of the Nuxt framework. If you want to use a SCSS then in less than a minute, you install Sass as a package. And if you don't install it Nuxt will tell me there's a missing package. You don't have to think about technical problems, you think about creation. Nuxt is really easy to use.
-
-## Do you have performances benchmarks before & after using Nuxt?
-
-We used to have a really bad page speed. At the time it was 10 and with Nuxt it was 70.
-
-## Would you recommend Nuxt?
-
-Yes, definitively. I think Nuxt is really simple to use and I have recommend Nuxt to other friends and they all said, It's really easy and they were very happy to use it. I will be using it myself on future projects. I have worked on web technologies for a long time and I remember when I discovered Vue.js, I felt comfortable making websites for the first time and I was so happy to use the technology.
diff --git a/content/fa/case-studies/6.komercia.md b/content/fa/case-studies/6.komercia.md
deleted file mode 100644
index 2696994ff5..0000000000
--- a/content/fa/case-studies/6.komercia.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-template: post
-title: Komercia
-description: "Komercia is a platform from Columbia. They create online shops so people with no developer skills or who don't have a team of developers can easily create and add products to their shops."
-imgUrl: img/case-studies/komercia/cover.png
-headingImg:
-  hidden: true
----
-
-![Komercia homepage](img/case-studies/komercia/main.png){width=736 height=407}
-
-## What is Komercia ?
-
-Komercia is a platform from Columbia and we wanted to be known as the Shopify for Latin America. We create online shops so people with no developer skills or who don't have a team of developers can easily create and add products to their shops. Our focus is on small and medium sized companies which many don't have the knowledge or tools to go online. So we built a platform that now has now created 6,000 online shops which are all built with Nuxt.
-
-80% of our users are in Columbia and we also have a lot of users in Chile and Mexico as well as a small percentage of users in other countries. We have users who have set up shops from their garages and are now able to have an online shop with a delivery service which comes to their door to collect these products that are then delivered to their clients. 
-
-At Komercia we are a small team with only 5 people all working remotely.
-
-## How did you discover Nuxt?
-
-We first started off using Vue as a Single Page Application and we loved it. But we needed to go a step further and have server side rendering and quicker page loads as well as search engine optimization. We had to find another alternative and as we were already using Vue the easiest way to get all this was to implement Nuxt. 
-
-I heard about Nuxt at the end of 2019 but we didn't start using it until the March/April of 2020, the start of the Pandemia, when we started to get so many new users that we had to accelerate the migration of sites from Vue to Nuxt without the user even noticing. The only thing our users noticed was that the pages were loading faster, which is of course a good thing.
-
-## Why did you choose Nuxt as your frontend framework?
-
-We chose Nuxt for various reasons. The main one being performance and we saw a huge change when we migrated the stores to Nuxt. 
-
-The other important factor is Search Engine Optimization especially for those clients who want their shops to be well positioned in search engines. 
-
-Nuxt uses Vue under the hood which we love because the learning curve is lower meaning it is really quick to learn. As our team already knew Vue it was very easy for them to move to Nuxt.
-
-## What is your favorite feature?
-
-There are many things we like. The main one is probably the meta tags and how Nuxt manages SEO. When clients share their products with users on Facebook or Whatsapp it is really important for them that the meta tags are setup correctly with the title and description of each product.
-
-We also love the layouts as it allows us to create various sites in one place. We use the layouts to create a Whatsapp Catalog so we have a page and components specifically for this layout and we are working on a template builder so our users can easily have different layouts. They layouts features saves us lots of time as we don't need to have various different projects when we want to have multiple layouts.
-
-## Do you have performances benchmarks before & after using Nuxt?
-
-Our clients were really impressed when we migrated to Nuxt and some even thought we had changed the servers because their sites were loading so fast.
-
-## Would you recommend Nuxt?
-
-Of course. I would highly recommend it. We need that the Nuxt community gets bigger because we need more Nuxt developers to help us create more templates, modules. Nowadays if you look online you won't find many people who are creating ecommerce templates in Nuxt and we therefore need to train a lot of people or university students. The first thing of course is to learn Vue and Nuxt. We also plan to create more communities in Latin America so we can connect with and find more Nuxt developers. I believe Nuxt is going to become even more popular and there are huge advantages to using Nuxt.
diff --git a/content/fa/case-studies/7.new-york-public-radio.md b/content/fa/case-studies/7.new-york-public-radio.md
deleted file mode 100644
index b0f848fe76..0000000000
--- a/content/fa/case-studies/7.new-york-public-radio.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-template: post
-title: New York Public Radio
-description: "New York Public Radio is a nonprofit member network of National Public Radio. They recently rebuilt the WNYC radio page and their news website Gothamist with Nuxt. We talked with Kim LaRocca, Senior Engineering Manager at NYPR about their migration to Nuxt and their future plans."
-imgUrl: img/case-studies/nypr/cover.png
-headingImg:
-  hidden: true
----
-
-![WNYC Radio page](img/case-studies/nypr/main.png){width=736 height=407}
-
-## What is New York Public Radio?
-
-New York Public Radio is a nonprofit member network of [National Public Radio](https://www.npr.org). We also own several public radio stations such as WNYC, WQXR, New Jersey Public Radio and we own a performance space called the Green Space in New York City. And we also own [Gothamist](https://gothamist.com/), which is a news site for New York City. We're working on reshaping audio and news for the new generation, reaching out to our community. We're trying to stay on top of modern technologies to better serve our listeners and our members.
-
-## How did you discover Nuxt?
-
-I started using Vue five years ago, back when I was developing with PHP and Laravel. Vue was shipped with Laravel; that's how I found out about it and started using it. I loved Vue, and then we had a project where we needed SSR, so I did some research and I found Nuxt. Everyone loved it, so I just decided to try it out and really enjoyed it and I've been using it ever since.
-
-## A number of the New York Public Radio frontends were built with Ember. Why did you choose to migrate to Nuxt?
-
-Well Ember is tough to work with because no one knows it. On our engineering team in New York Public Radio history, we've never hired one person who already knew Ember, we had to teach them on the job and we kind of got stuck with it, and the community support isn't great. The learning curve is also very, very high. So, when they hired me to manage the engineering team, my boss at the time wanted to switch everything to Vue. So it became my job to switch everything to Vue and of course I'm going to use Nuxt because we need the SEO benefits for our sites, so we just started doing it very gradually. We had to rebuild our whole design system in Vue. And then we started chipping away at some of our websites.
-
-## What are your favorite Nuxt features?
-
-There's so many features that I love! How everything's built in, you don't have to worry about configuring the build process with Webpack and Babel. The automatic code splitting and [smart prefetching](/announcements/introducing-smart-prefetching) is amazing. **The first load is fast but then when you navigate between page, it's instant and everyone noticed that and even our users have commented on how fast it is.** Stuff like that already built in makes it amazing to use. 
-
-In addition, even something as simple as managing meta tags is really easy to do with Nuxt. Whereas with Ember, it was like you're jumping through all these hoops to figure out how to make that dynamic. Besides that, comparing this to other frameworks I've worked with, the community is great, the documentation is great, the modules are awesome. If we want to add Google Analytics or authentication, it's just a couple lines of code. You don't have to worry about it. **It really lets us focus on just building cool things and not worrying about the infrastructure**.
-
-## For now you have two projects built with Nuxt, the WNYC player, and Gothamist.
-
-Yes, the first thing we did was build the [WNYC radio page](https://www.wnyc.org/radio/) in Nuxt, it's a subset of the WNYC site where people can go to listen to the radio online to the FM stream or the AM stream. We have a stream coming in through WebSockets, and we built a couple NPM packages to help with streaming audio services. But besides that, everything else was just built in with Nuxt so it's pretty easy to do.
-
-![Gothamist article](img/case-studies/nypr/1.png){width=736 height=407}
-
-## What are your next steps, do you have any intents to build another project with Nuxt?
-
-We have every intention! All our new projects are going to use Nuxt and Vue, and the next step is rebuilding the Radiolab website, it's one of our most popular shows on the radio, and besides that we're probably going to rebuild the rest of the WNYC site to use Nuxt and Vue. Gothamist launch a couple of months ago has gotten rave reviews. Everyone noticed that it was fast so we have company approval now. Now we just need the time and the resources to actually start rebuilding but it is our every intention to use it for everything.
-
-## Your projects are open source, can you tell me more about it?
-
-I pushed for having [open source for all our projects](https://github.com/nypublicradio), so our design system is open source, and Gothamist code is open source. We're hoping that we can help some other developers along the way to make their sites better and also to attract people to work on the team because we're working with some cool technologies. We built the WNYC Radio and the design system in open source from the beginning. So if anyone was following it they saw all the problems and issues we had along the way, and how we solved them.
-
-## Would you recommend Nuxt, and for what kind of projects?
-
-Well, obviously, I'm highly gonna recommend Nuxt because I love it. At first I used to think that maybe it was overkill for small projects, but over the past couple of years I just started using it for everything so even if I have a one page, personal site, I'll still use it because it's just easier, it's faster to get it going and it's easier to work with. It's more fun than just the standard traditional Vue application so if anyone asks, I say: "Use it for everything. Any project."
diff --git a/content/fa/case-studies/index.md b/content/fa/case-studies/index.md
deleted file mode 100644
index dd29052845..0000000000
--- a/content/fa/case-studies/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-template: blog
-title: Case studies
-description: For the Case Studies series, we've been talking to companies using Nuxt to build their product. We'll explore their journey into the framework and its ecosystem, examine the variety of projects you can use Nuxt for, and consider the challenges they encountered and benefits they experienced.
-blogPostList: true
-sortBy:
-  field: 'position'
-  direction: 'asc'
----
diff --git a/content/fa/contribution-guide/index.md b/content/fa/contribution-guide/index.md
deleted file mode 100644
index ee9e9a5e73..0000000000
--- a/content/fa/contribution-guide/index.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-template: post
-title: Contribution Guide
-description: Any contribution to Nuxt is more than welcome!
-back: false
----
-
-> Any contribution to Nuxt is more than welcome!
-
-## Reporting Issues
-
-A great way to contribute to the project is to send a detailed report when you encounter an issue: [Bug report](https://github.com/nuxt/nuxt.js/issues/new?assignees=&labels=bug-report&template=bug-report.md&title=)
-
-Please make sure to include a reproduction repository or [CodeSandBox](https://template.nuxtjs.org/) so that bugs can be reproduced without great efforts. The better a bug can be reproduced, the faster we can start fixing it!
-
-## Pull Requests
-
-We'd love to see your pull requests, even if it's just to fix a typo!
-
-However, any significant improvement should be associated to an existing [feature request](https://feature.nuxtjs.org/) or [bug report](https://bug.nuxtjs.org/).
-
-### Getting started
-
-1. [Fork](https://help.github.com/articles/fork-a-repo/) the [Nuxt repository](https://github.com/nuxt/nuxt.js) to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
-2. Run `npm install` or `yarn install` to install the dependencies.
-
-> _Note that both **npm** and **yarn** have been seen to miss installing dependencies. To remedy that, you can either delete the `node_modules` folder in your example app and install again or do a local install of the missing dependencies._
-
-> If you are adding a dependency, please use `yarn add`. The `yarn.lock` file is the source of truth for all Nuxt dependencies.
-
-### Setup
-
-Before running any tests, make sure all dependencies are met and build all packages:
-
-```sh
-yarn
-yarn build
-```
-
-### Test structure
-
-A great PR, whether it includes a bug fix or a new feature, will often include tests. To write great tests, let us explain our test structure:
-
-#### Fixtures
-
-The fixtures (found under `tests/fixtures`) contain several Nuxt applications. To keep build time as short as possible, we don't build an own Nuxt application per test. Instead, the fixtures are built (`yarn test:fixtures`) before running the actual unit tests.
-
-Please make sure to **alter** or **add a new fixture** when submitting a PR to reflect the changes properly (if applicable).
-
-Also, don't forget to **rebuild** a fixture after changing it by running the corresponding test with `jest test/fixtures/my-fixture/my-fixture.test.js`!
-
-#### Unit tests
-
-The unit tests can be found in `tests/unit` and will be executed after building the fixtures. A fresh Nuxt server will be used per test so that no shared state (except the initial state from the build step) is present.
-
-After adding your unit tests, you can run them directly:
-
-```sh
-jest test/unit/test.js
-```
-
-Or you can run the whole unit test suite:
-
-```sh
-yarn test:unit
-```
-
-Again, please be aware that you might have to rebuild your fixtures before!
-
-### Testing your changes
-
-While working on your PR you will likely want to check if your fixture is set up correctly or debug your current changes.
-
-To do so you can use the Nuxt script itself to launch for example your fixture or an example app:
-
-```sh
-yarn nuxt examples/your-app
-yarn nuxt test/fixtures/your-fixture-app
-```
-
-> `npm link` could also (and does, to some extent) work for this, but it has been known to exhibit some issues. That is why we recommend calling `yarn nuxt` directly to run examples.
-
-### Examples
-
-If you are working on a larger feature, please set up an example app in `examples/`. This will help greatly in understanding changes and also help Nuxt users to understand the feature you've built in-depth.
-
-### Linting
-
-As you might have noticed already, we are using ESLint to enforce a code standard. Please run `yarn lint` before committing your changes to verify that the code style is correct. If not, you can use `yarn lint --fix` or `npm run lint -- --fix` (no typo!) to fix most of the style changes. If there are still errors left, you must correct them manually.
-
-### Documentation
-
-If you are adding a new feature, or refactoring or changing the behavior of Nuxt in any other manner, you'll likely want to document the changes. Please do so with a PR to the [docs](https://github.com/nuxt/docs/pulls) repository. You don't have to write documentation up immediately (but please do so as soon as your pull request is mature enough).
-
-### Final checklist
-
-When submitting your PR, there is a simple template that you have to fill out. Please tick all appropriate "answers" in the checklists.
-
-### Troubleshooting
-
-#### Debugging tests on macOS
-
-Searching for `getPort()` will reveal it's used to start new Nuxt processes during tests. It's been seen to stop working on macOS at times and may require you to manually set a port for testing.
-
-Another common issue is Nuxt processes that may hang in memory when running fixture tests. A ghost process will often prevent subsequent tests from working. Run `ps aux | grep -i node` to inspect any hanging test processes if you suspect this is happening.
diff --git a/content/fa/deployments/0.vercel.md b/content/fa/deployments/0.vercel.md
deleted file mode 100644
index f6d154d1fd..0000000000
--- a/content/fa/deployments/0.vercel.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-template: guide
-title: Vercel
-description: How to deploy a Nuxt app with Vercel?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/vercel.svg"
-  dark: "/img/companies/square/dark/vercel.svg"
----
-# Deploy Nuxt with Vercel
-
-How to deploy a Nuxt app with Vercel?
-
----
-
-## Static site with Vercel
-
-If you would like to deploy a static site on Vercel, no configuration is necessary. Vercel will detect that you are using Nuxt and will enable the correct settings for your deployment. For more information, see [this Vercel guide](https://vercel.com/guides/deploying-nuxtjs-with-vercel).
-
-## SSR with Vercel
-
-To deploy a serverless Nuxt runtime with [Vercel](https://vercel.com), the Nuxt team and contributors have produced an official [@nuxtjs/vercel-builder](https://github.com/nuxt/vercel-builder) package.
-
-All you have to do is to setup a `vercel.json` file:
-
-```json
-{
-  "builds": [
-    {
-      "src": "nuxt.config.js",
-      "use": "@nuxtjs/vercel-builder",
-      "config": {}
-    }
-  ]
-}
-```
-
-Check out [the documentation](https://github.com/nuxt/vercel-builder) for more information.
-
-### Service Worker with Nuxt PWA Module
-
-To avoid 404 for Service Workers, make sure to include `sw` to your routes settings.
-
-```json
-{
-  "version": 2,
-  "builds": [
-    {
-      "src": "nuxt.config.js",
-      "use": "@nuxtjs/vercel-builder",
-      "config": {
-        "serverFiles": ["package.json"]
-      }
-    }
-  ],
-  "routes": [
-    {
-      "src": "/sw.js",
-      "continue": true,
-      "headers": {
-        "Cache-Control": "public, max-age=0, must-revalidate",
-        "Service-Worker-Allowed": "/"
-      }
-    }
-  ]
-}
-```
-
-You can learn more and see examples on https://github.com/nuxt/vercel-builder
diff --git a/content/fa/deployments/1.netlify.md b/content/fa/deployments/1.netlify.md
deleted file mode 100644
index 5665d38cd6..0000000000
--- a/content/fa/deployments/1.netlify.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-template: guide
-title: Netlify
-description: How to deploy Nuxt on Netlify?
-target: Static
-category: deployment
-logo: "/img/companies/square/dark/netlify.svg"
----
-# Deploy Nuxt on Netlify
-
-How to deploy Nuxt on Netlify?
-
----
-
-Deploying to [Netlify](https://www.netlify.com) is a low friction option for getting a **statically generated** Nuxt site online quickly.
-
-The core of the process leverages the `nuxt generate`(<= v2.12) command during deployment to build a static version of your Nuxt app into a `dist` directory. The contents of this directory are then deployed to a production URL.
-
-
        
-  
-    
        
-      Watch a free lesson on How to deploy Nuxt to Netlify on Jamstack Explorers
-    
        
-          
-
        
-
-## Getting Started
-
-Press the _"New site from Git"_ button on the Netlify dashboard. Authenticate with your repository host, select a repository to deploy, and continue. You should land on step 3: _"Build options, and deploy!"_
-
-## Configure:
-
-### For a statically generated site
-
-Make sure you have `target: 'static'`in your `nuxt.config`.
-
-1. **Branch to deploy:** `main`, or which-ever branch you prefer
-1. **Build command:** `npm run generate`
-1. **Publish directory:** `dist`
-
-### For client side rendering only
-
-Make sure you have `target: 'static'` and `ssr: false`in your `nuxt.config`.
-
-1. **Branch to deploy:** `main`, or which-ever branch you prefer
-1. **Build command:** `npm run generate`
-1. **Publish directory:** `dist`
-
-For client side rendering there is a problem with refresh as by default on Netlify the site redirects to _"404 not found"_. For any pages that are not generated they will fallback to SPA mode and then if you refresh or share that link you will get Netlify's 404 page. This is because the pages that are not generated don't actually exist as they are actually a single page application so if you refresh this page you will get a 404 because the url for that page doesn't actually exist. By redirecting to the 404.html Nuxt will reload your page correctly in SPA fallback.
-
-The easiest way to fix this is by adding a [generate property](/docs/configuration-glossary/configuration-generate#fallback) in your `nuxt.config` and setting `fallback: true`. Then it will fallback to the generated 404.html when in SPA mode instead of Netlify's 404 page.
-
-```js
-export default {
-  generate: {
-    fallback: true
-  }
-}
-```
-
-If however you want to automatically apply headers and redirects of the application then there is a module for that, this is especially useful for when you have custom headers/redirects (in a `_headers` or `_redirects` file):
-
-[netlify-files-module](https://github.com/nuxt-community/netlify-files-module)
-
-> For more information on Netlify redirects see the [Netlify docs](https://www.netlify.com/docs/redirects/#rewrites-and-proxying).
-
-> For simple reference on Netlify redirects read blog [post](https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site) by Divya Sasidharan
-
-> Optionally, you can add additional ENV variables via the _"Advanced"_ button. These can be helpful for swapping in alternative API credentials and so on. Netlify also provides a [default ENV variables](https://www.netlify.com/docs/build-settings/#build-environment-variables) which can be read by your Nuxt application at build time.
-
-Click _"Deploy site"_ to immediately trigger a deploy. Your Netlify site will be assigned a random URL and deployed using the `nuxt generate` command.
-
-Voilà! Your Nuxt application is now hosted on Netlify!
diff --git a/content/fa/deployments/2.layer0.md b/content/fa/deployments/2.layer0.md
deleted file mode 100644
index 66c72bf261..0000000000
--- a/content/fa/deployments/2.layer0.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-template: guide
-title: Layer0
-description: How to deploy Nuxt app on Layer0?
-target: Server
-category: deployment
-logo: "/img/companies/square/dark/layer0.svg"
----
-# Deploy Nuxt on Layer0
-
-How to deploy Nuxt app on Layer0?
-
----
-
-Layer0 supports universal (SSR) Nuxt applications.
-
-[Layer0](https://www.layer0.co) is an all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your headless frontend. It is focused on large, dynamic websites and best-in-class performance through EdgeJS (a JavaScript-based Content Delivery Network), predictive prefetching, and performance monitoring. Layer0 offers a free tier.
-
-For detailed instructions consult the [Layer0 Nuxt documentation](https://docs.layer0.co/guides/nuxt).
-
-## Getting Started
-
-1. Sign up for a free account on [Layer0's signup page](https://app.layer0.co/signup).
-
-2. Install the [Layer0 CLI](https://docs.layer0.co/guides/cli)
-
-
-
-::code-group
-```bash [Yarn]
-yarn global add @layer0/cli
-```
-```bash [NPM]
-npm i -g @layer0/cli
-```
-::
-
-
-
-## Configure your project
-
-3. Make sure [server side rendering is enabled](/docs/configuration-glossary/configuration-ssr) and in your `nuxt.config.js` add the `@layer0/nuxt` module:
-
-```js
-// nuxt.config.js
-
-module.exports = {
-  modules: ['@layer0/nuxt/module']
-}
-```
-
-4. Run `layer0 init` which will configure your project for Layer0.
-
-## Running and deploying your project
-
-5. To test your app locally, run the following in your project directory:
-
-```js
-layer0 run
-```
-
-6. To deploy your app, run the following in your project directory:
-
-```js
-layer0 deploy
-```
-
-## Optimize your project's performance
-
-- (Optional) To optimize the performance of server side rendering in Nuxt, Layer0 recommends moving most your modules into `buildModules` as described in the [modules vs buildModules section](https://docs.layer0.co/guides/nuxt#section_modules_vs_buildmodules) of the Layer0 Nuxt guide.
-- (Optional) Layer0 automatically supports Nuxt's built-in routing scheme. However you can and should optimize the performance by customizing the routing, caching, and prefetching via EdgeJS as shown in the [Routing section](https://docs.layer0.co/guides/nuxt#section_routing) of the Layer0 Nuxt guide.
-
-## Get help
-
-If you have issues please check the [Troubleshooting section](https://docs.layer0.co/guides/nuxt#section_troubleshooting) of the guide or create a ticket in the [forums](https://forum.layer0.co).
diff --git a/content/fa/deployments/21yunbox.md b/content/fa/deployments/21yunbox.md
deleted file mode 100644
index 80684b1463..0000000000
--- a/content/fa/deployments/21yunbox.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-template: guide
-title: 21YunBox
-description: "How to deploy Nuxt on 21YunBox?"
-target: Static
-category: deployment
-logo:
-  light: "/img/companies/square/light/Yunbox.svg"
-  dark: "/img/companies/square/dark/Yunbox.svg"
----
-# Deploy Nuxt on 21YunBox
-
-How to deploy Nuxt on 21YunBox?
-
----
-
-[21YunBox](https://www.21yunbox.com) provides blazing fast Chinese CDN, continuous deployment, one-click HTTPS and [other services like managed databases and backend web services](https://www.21yunbox.com/docs/), providing an avenue to launch web projects in China.
-
-21YunBox includes the following features:
-
-- Continuous, automatic builds & deploys from GitHub and Gitee
-- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org)
-- Instant cache invalidation with a blazing fast, Chinese CDN
-- Unlimited [custom domains](https://www.21yunbox.com/docs/#/custom-domains)
-- Automatic [Brotli compression](https://en.wikipedia.org/wiki/Brotli) for faster sites
-- Native HTTP/2 support
-- Automatic HTTP → HTTPS redirects
-- Custom URL redirects and rewrites
-
-## Prerequisites
-
-This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started or fork 21YunBox's [Nuxt Example](https://gitee.com/eryiyunbox-examples/nuxtjs) before continuing.
-
-## Setup
-
-You can set up a Nuxt site on 21YunBox in two quick steps:
-
-1. Create a new web service on 21YunBox, and give 21YunBox permission to access your GitHub or Gitee repo.
-2. Use the following values during creation:
-
-   |                       |                                                     |
-   | --------------------- | --------------------------------------------------- |
-   | **Environment**       | `Static Site`                                       |
-   | **Build Command**     | `yarn && yarn generate` (or your own build command) |
-   | **Publish Directory** | `./dist` (or your own output directory)             |
-
-That's it! Your site will be live on your 21YunBox URL (which looks like `yoursite.21yunbox.com`) as soon as the build is done.
-
-## Continuous deploys
-
-Now that 21YunBox is connected to your repo, it will automatically build and publish your site any time you push to GitHub.
-
-## 21YunBox CDN and cache invalidation
-
-21YunBox hosts your site on a Chinese, blazing fast CDN which ensures the fastest possible download times for all your users across China.
-
-Every deploy automatically and instantly invalidates the CDN cache, so your users can always access the latest content on your site.
-
-## Custom domains
-
-Add your own domains to your site easily using 21YunBox's [custom domains](https://www.21yunbox.com/docs/#/custom-domains) guide.
diff --git a/content/fa/deployments/amazon-web-services.md b/content/fa/deployments/amazon-web-services.md
deleted file mode 100644
index 684bb110d8..0000000000
--- a/content/fa/deployments/amazon-web-services.md
+++ /dev/null
@@ -1,413 +0,0 @@
----
-template: guide
-title: Amazon Web Services
-description: Static Hosting on AWS with S3 Amplify and CloudFront
-target: Static
-category: deployment
-logo:
-  light: "/img/companies/square/light/AWS_Light.svg"
-  dark: "/img/companies/square/dark/AWS_Dark.svg"
----
-# Deploy Nuxt on Amazon Web Services
-
-Static Hosting on AWS with S3 Amplify and CloudFront
-
----
-
-AWS stands for Amazon Web Services.
-S3 is their static storage which can be configured for Static Site Hosting. CloudFront is their CDN (content delivery network)
-
-## AWS w/ the Amplify Console
-
-Hosting a **static generated** Nuxt app on AWS w/ the Amplify Console is powerful and cheap.
-
-First, push your Nuxt app to the Git provider of your choice. Then, visit the [Amplify Console](https://console.aws.amazon.com/amplify/home). Click the **GET STARTED** button under the **Deploy** header if you haven't used Amplify Hosting before, otherwise click the **Connect App** button.
-
-### From your existing code
-
-On the "From your existing code" page, select your Git provider and click **Continue**.
-
-### Add repository branch
-
-On the "Add repository branch" page, select your repository and the branch you want to deploy. Then, click **Next**.
-
-### Configure build settings
-
-On the "Configure build settings" page, click the `Edit` button under the "Build and test settings". Change the following:
-
-1. Set the **build** commands to `npm run generate`.
-2. Set the `baseDirectory` location to be `dist`.
-
-The settings should look like this once you are done editing them:
-
-```yml
-version: 1
-frontend:
-  phases:
-    preBuild:
-      commands:
-        - yarn install
-    build:
-      commands:
-        - npm run generate
-  artifacts:
-    # IMPORTANT - Please verify your build output directory
-    baseDirectory: dist
-    files:
-      - '**/*'
-  cache:
-    paths:
-      - node_modules/**/*
-```
-
-Then, click **Save** and **Next**.
-
-### Review
-
-On the review page, click **Save and deploy**.
-
-Then, your application will deploy. This may take a few minutes.
-
-Once `Provision`, `Build`, `Deploy`, and `Verify` are green, click on the URL that the Amplify Console provides to view your site.
-
-## AWS w/ S3 + CloudFront
-
-Hosting a **static generated** Nuxt app on AWS w/ S3 + CloudFront is powerful and cheap.
-
-> AWS is a death by 1000 paper cuts. If we missed a step, please submit a PR to update this document.
-
-### Overview
-
-We'll host super cheap with some AWS services. Briefly:
-
-- S3
-  - cloud data "bucket" for our website files
-  - can be configured to host static websites
-- CloudFront
-  - a CDN (content delivery network)
-  - offers free HTTPS certs
-  - Makes your site load faster
-
-We'll push the site like this:
-
-```
-Nuxt Generate -> Local folder -> AWS S3 Bucket -> AWS CloudFront CDN -> Browser
-  [      nuxt generate       ]    [         gulp deploy          ]
-  [                         deploy.sh                            ]
-```
-
-First, we'll generate the site with `nuxt generate`(<= v2.12). Then, we'll use [Gulp](https://gulpjs.com/) to publish the files to a S3 bucket and invalidate a CloudFront CDN.
-
-- [gulp](https://www.npmjs.com/package/gulp)
-- [gulp-awspublish](https://www.npmjs.com/package/gulp-awspublish)
-- [gulp-cloudfront-invalidate-aws-publish](https://www.npmjs.com/package/gulp-cloudfront-invalidate-aws-publish)
-- [concurrent-transform](https://www.npmjs.com/package/concurrent-transform) (for parallel uploads)
-
-Our deploy script needs these environment variables set:
-
-- AWS_BUCKET_NAME="example.com"
-- AWS_CLOUDFRONT="UPPERCASE"
-- AWS_ACCESS_KEY_ID="key"
-- AWS_SECRET_ACCESS_KEY="secret"
-
-We'll have these files:
-
-```
-deploy.sh       -  run `nuxt generate` and `gulp deploy`
-gulpfile.js     -  `gulp deploy` code to push files to S3 and invalidate CloudFront
-```
-
-### Setting it up
-
-1. Make a S3 bucket and configure it for static site hosting
-2. Create a CloudFront distribution
-3. Configure security access
-4. Setup build script in your project
-
-### AWS: Setup your S3 bucket and CloudFront Distribution
-
-Please follow this [tutorial to setup your S3 and CloudFront](https://learnetto.com/blog/cloudfront-s3) for step one and two.
-
-You should now have this data:
-
-- AWS_BUCKET_NAME="example.com"
-- AWS_CLOUDFRONT="UPPERCASE"
-
-### AWS: Configure security access
-
-For step 3, we need to create a user that can:
-
-- Update the bucket contents
-- Invalidate the CloudFront distribution (propagates changes to users faster)
-
-[Create a programmatic user with this policy](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html):
-
-> NOTE: replace 2x `example.com` with your S3 bucket name below. This policy allows pushing to the specified bucket, and invalidating any CloudFront distribution.
-
-```json
-{
-  "Version": "2012-10-17",
-  "Statement": [
-    {
-      "Effect": "Allow",
-      "Action": ["s3:ListBucket"],
-      "Resource": ["arn:aws:s3:::example.com"]
-    },
-    {
-      "Effect": "Allow",
-      "Action": [
-        "s3:PutObject",
-        "s3:PutObjectAcl",
-        "s3:GetObject",
-        "s3:GetObjectAcl",
-        "s3:DeleteObject",
-        "s3:ListMultipartUploadParts",
-        "s3:AbortMultipartUpload"
-      ],
-      "Resource": ["arn:aws:s3:::example.com/*"]
-    },
-    {
-      "Effect": "Allow",
-      "Action": [
-        "cloudfront:CreateInvalidation",
-        "cloudfront:GetInvalidation",
-        "cloudfront:ListInvalidations",
-        "cloudfront:UnknownOperation"
-      ],
-      "Resource": "*"
-    }
-  ]
-}
-```
-
-Then [get an access key and secret](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html).
-
-You should now have this data:
-
-- AWS_ACCESS_KEY_ID="key"
-- AWS_SECRET_ACCESS_KEY="secret"
-
-### Laptop: Setup your project's build script
-
-4.1) Create a `deploy.sh` script. See optional [nvm (node version manager)](https://github.com/creationix/nvm).
-
-```bash
-#!/bin/bash
-
-export AWS_ACCESS_KEY_ID="key"
-export AWS_SECRET_ACCESS_KEY="secret"
-export AWS_BUCKET_NAME="example.com"
-export AWS_CLOUDFRONT="UPPERCASE"
-
-# Load nvm (node version manager), install node (version in .nvmrc), and npm install packages
-[ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use
-# Npm install if not already.
-[ ! -d "node_modules" ] && npm install
-
-npm run generate
-gulp deploy
-```
-
-4.2) Make `deploy.sh` runnable and DON'T CHECK INTO GIT (deploy.sh has secrets in it)
-
-```bash
-chmod +x deploy.sh
-echo "
-# Don't commit build files
-node_modules
-dist
-.nuxt
-.awspublish
-deploy.sh
-" >> .gitignore
-```
-
-4.3) Add Gulp to your project and to your command line
-
-```bash
-npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform
-npm install -g gulp
-```
-
-4.4) Create a `gulpfile.js` with the build script
-
-```javascript
-const gulp = require('gulp')
-const awspublish = require('gulp-awspublish')
-const cloudfront = require('gulp-cloudfront-invalidate-aws-publish')
-const parallelize = require('concurrent-transform')
-
-// https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html
-
-const config = {
-  // Required
-  params: {
-    Bucket: process.env.AWS_BUCKET_NAME
-  },
-  credentials: {
-    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
-    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
-    signatureVersion: 'v3'
-  },
-
-  // Optional
-  deleteOldVersions: false, // NOT FOR PRODUCTION
-  distribution: process.env.AWS_CLOUDFRONT, // CloudFront distribution ID
-  region: process.env.AWS_DEFAULT_REGION,
-  headers: {
-    /* 'Cache-Control': 'max-age=315360000, no-transform, public', */
-  },
-
-  // Sensible Defaults - gitignore these Files and Dirs
-  distDir: 'dist',
-  indexRootPath: true,
-  cacheFileName: '.awspublish',
-  concurrentUploads: 10,
-  wait: true // wait for CloudFront invalidation to complete (about 30-60 seconds)
-}
-
-gulp.task('deploy', function () {
-  // create a new publisher using S3 options
-  // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property
-  const publisher = awspublish.create(config)
-
-  let g = gulp.src('./' + config.distDir + '/**')
-  // publisher will add Content-Length, Content-Type and headers specified above
-  // If not specified it will set x-amz-acl to public-read by default
-  g = g.pipe(
-    parallelize(publisher.publish(config.headers), config.concurrentUploads)
-  )
-
-  // Invalidate CDN
-  if (config.distribution) {
-    console.log('Configured with CloudFront distribution')
-    g = g.pipe(cloudfront(config))
-  } else {
-    console.log(
-      'No CloudFront distribution configured - skipping CDN invalidation'
-    )
-  }
-
-  // Delete removed files
-  if (config.deleteOldVersions) {
-    g = g.pipe(publisher.sync())
-  }
-  // create a cache file to speed up consecutive uploads
-  g = g.pipe(publisher.cache())
-  // print upload updates to console
-  g = g.pipe(awspublish.reporter())
-  return g
-})
-```
-
-4.5) Deploy and debug
-
-Run it:
-
-```bash
-./deploy.sh
-```
-
-You should get an output similar to this:
-
-```bash
-$ ./deploy.sh
-
-Found '/home/michael/scm/example.com/www/.nvmrc' with version <8>
-Now using node v8.11.2 (npm v5.6.0)
-
-> example.com@1.0.0 generate /home/michael/scm/example.com/www
-> nuxt generate
-
-  nuxt:generate Generating... +0ms
-  nuxt:build App root: /home/michael/scm/example.com/www +0ms
-  nuxt:build Generating /home/michael/scm/example.com/www/.nuxt files... +0ms
-  nuxt:build Generating files... +36ms
-  nuxt:build Generating routes... +10ms
-  nuxt:build Building files... +24ms
-  ████████████████████ 100%
-
-Build completed in 7.009s
-
-
-
- DONE  Compiled successfully in 7013ms                                                                                                                                     21:25:22
-
-Hash: 421d017116d2d95dd1e3
-Version: webpack 3.12.0
-Time: 7013ms
-                                   Asset     Size  Chunks             Chunk Names
-     pages/index.ef923f795c1cecc9a444.js  10.6 kB       0  [emitted]  pages/index
- layouts/default.87a49937c330bdd31953.js  2.69 kB       1  [emitted]  layouts/default
-pages/our-values.f60c731d5c3081769fd9.js  3.03 kB       2  [emitted]  pages/our-values
-   pages/join-us.835077c4e6b55ed1bba4.js   1.3 kB       3  [emitted]  pages/join-us
-       pages/how.75f8cb5bc24e38bca3b3.js  2.59 kB       4  [emitted]  pages/how
-             app.6dbffe6ac4383bd30a92.js   202 kB       5  [emitted]  app
-          vendor.134043c361c9ad199c6d.js  6.31 kB       6  [emitted]  vendor
-        manifest.421d017116d2d95dd1e3.js  1.59 kB       7  [emitted]  manifest
- + 3 hidden assets
-Hash: 9fd206f4b4e571e9571f
-Version: webpack 3.12.0
-Time: 2239ms
-             Asset    Size  Chunks             Chunk Names
-server-bundle.json  306 kB          [emitted]
-  nuxt: Call generate:distRemoved hooks (1) +0ms
-  nuxt:generate Destination folder cleaned +10s
-  nuxt: Call generate:distCopied hooks (1) +8ms
-  nuxt:generate Static & build files copied +7ms
-  nuxt:render Rendering url /our-values +0ms
-  nuxt:render Rendering url /how +67ms
-  nuxt:render Rendering url /join-us +1ms
-  nuxt:render Rendering url / +0ms
-  nuxt: Call generate:page hooks (1) +913ms
-  nuxt: Call generate:page hooks (1) +205ms
-  nuxt: Call generate:page hooks (1) +329ms
-  nuxt: Call generate:page hooks (1) +361ms
-  nuxt:generate Generate file: /our-values/index.html +2s
-  nuxt:generate Generate file: /how/index.html +0ms
-  nuxt:generate Generate file: /join-us/index.html +0ms
-  nuxt:generate Generate file: /index.html +0ms
-  nuxt:render Rendering url / +2s
-  nuxt: Call generate:done hooks (1) +4ms
-  nuxt:generate HTML Files generated in 11.8s +5ms
-  nuxt:generate Generate done +0ms
-[21:25:27] Using gulpfile ~/scm/example.com/www/gulpfile.js
-[21:25:27] Starting 'deploy'...
-Configured with CloudFront distribution
-[21:25:27] [cache]  README.md
-[21:25:27] [cache]  android-chrome-192x192.png
-[21:25:27] [cache]  android-chrome-512x512.png
-[21:25:27] [cache]  apple-touch-icon.png
-[21:25:27] [cache]  browserconfig.xml
-[21:25:27] [cache]  favicon-16x16.png
-[21:25:27] [cache]  favicon-32x32.png
-[21:25:27] [cache]  favicon.ico
-[21:25:27] [cache]  favicon.svg
-[21:25:27] [cache]  logo-branches.svg
-[21:25:27] [cache]  logo-small.svg
-[21:25:27] [cache]  logo.svg
-[21:25:27] [cache]  mstile-150x150.png
-[21:25:27] [cache]  og-image.jpg
-[21:25:27] [cache]  safari-pinned-tab.svg
-[21:25:27] [cache]  site.webmanifest
-[21:25:28] [create] _nuxt/manifest.421d017116d2d95dd1e3.js
-[21:25:29] [update] 200.html
-[21:25:30] [create] videos/flag.jpg
-[21:25:30] [create] _nuxt/vendor.134043c361c9ad199c6d.js
-[21:25:34] [create] videos/flag.mp4
-[21:25:34] [cache]  _nuxt/pages/how.75f8cb5bc24e38bca3b3.js
-[21:25:34] [cache]  _nuxt/pages/join-us.835077c4e6b55ed1bba4.js
-[21:25:34] [cache]  _nuxt/pages/our-values.f60c731d5c3081769fd9.js
-[21:25:36] [update] our-values/index.html
-[21:25:36] [create] _nuxt/layouts/default.87a49937c330bdd31953.js
-[21:25:36] [create] _nuxt/app.6dbffe6ac4383bd30a92.js
-[21:25:37] [create] _nuxt/pages/index.ef923f795c1cecc9a444.js
-[21:25:38] [update] join-us/index.html
-[21:25:38] [update] how/index.html
-[21:25:43] [create] videos/flag.webm
-[21:25:43] [update] index.html
-[21:25:43] CloudFront invalidation created: I16NXXXXX4JDOA
-[21:26:09] Finished 'deploy' after 42 s
-```
-
-Note that the `CloudFront invalidation created: XXXX` is the only output from the CloudFront invalidation npm package. If you don't see that, it's not working.
diff --git a/content/fa/deployments/azure-portal.md b/content/fa/deployments/azure-portal.md
deleted file mode 100644
index 36245f4bee..0000000000
--- a/content/fa/deployments/azure-portal.md
+++ /dev/null
@@ -1,157 +0,0 @@
----
-template: guide
-title: Azure Portal
-description: How to deploy a Nuxt application on Azure Portal?
-target: Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Azure.svg"
-  dark: "/img/companies/square/dark/Azure.svg"
----
-# Deploy Nuxt on Azure Portal
-
-How to deploy a Nuxt application on Azure Portal?
-
----
-
-## Requirements
-
-- It is required that you select a backend when setting up the project. Even if you don't need it, or else the site won't start up.
-- The server is running Node 8 or greater
-
-## What if I already have a project without a backend?
-
-No worries. It is easy to add an express server to an existing project.
-
-Create a new folder called `server` in the root of the project. Then create an `index.js` file inside the `server` folder and paste the following inside the `index.js`:
-
-```
-const express = require('express')
-const consola = require('consola')
-const { loadNuxt } = require('nuxt-start')
-const app = express()
-
-async function start () {
-  const nuxt = await loadNuxt(isDev ? 'dev' : 'start')
-  await nuxt.listen(process.env.PORT, process.env.HOST)
-}
-
-start()
-
-```
-
-Then edit your nuxt.config.js:
-
-Before:
-
-```
-import pkg from './package'
-
-export default {
-... config
-}
-```
-
-After:
-
-```
-module.exports = {
-... config
-}
-
-```
-
-**Remember to remove the references to the pkg object inside the config.**
-
-That's it!
-
-For an Azure App Service deployment, make sure you set the following two environment variables (application settings) in App Service › Settings › Configuration › Application settings.
-
-```
-HOST: '0.0.0.0'
-NODE_ENV: 'production'
-```
-
-## How to set Node version on Web App in DevOps
-
-You can set the Node version on the server, via the App setting inside the "Deploy Azure Web Service" task in the release pipeline
-
-Add this to the App settings field under "Application and Configuration Settings"
-
-```
--WEBSITE_NODE_DEFAULT_VERSION 10.16.3
-```
-
-It's recommended to use the LTS version.
-
-## Artifacts
-
-If you are using Azure DevOps and let the build pipeline do its work you and want to store artifacts. Files which are prefixed with a `.` must be moved to the artifact folder explicitly. Then you can create an Artifact Archive and download it afterwards in your Release Deployment.
-
-## Running the webserver
-
-For Azure Portal you will need a `web.config` file. If not supplied, it will create one itself. This one **won't work for Nuxt** though. Add a web.config file to your repository. For the latest version of `Nuxt` the server file is located at `server/index.js`. In the web.config you don't specify the exact path `server/index.js` but just `server`. See the example web.config below. If you don't do this the logs will tell you that Vue cannot find any routes.
-
-```xml
-
-
-
-
-  
-    
-    
-    
-      
-      
-    
-    
-      
-        
-        
-          
-        
-
-        
-        
-          
-        
-
-        
-        
-          
-            
-          
-          
-        
-      
-    
-
-    
-    
-      
-        
-          
-        
-      
-    
-
-    
-    
-
-    
-    
-  
-
-```
diff --git a/content/fa/deployments/azure-static-web-apps.md b/content/fa/deployments/azure-static-web-apps.md
deleted file mode 100644
index 6df7a3bb1b..0000000000
--- a/content/fa/deployments/azure-static-web-apps.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-template: guide
-title: Azure Static Web Apps
-description: How to deploy a Nuxt application on Azure Static Web Apps?
-target: Static
-category: deployment
-logo:
-  light: "/img/companies/square/light/Azure.svg"
-  dark: "/img/companies/square/dark/Azure.svg"
----
-# Deploy on Azure Static Web Apps
-
-How to deploy a Nuxt application on Azure Static Web Apps?
-
----
-
-You can now deploy your static sites to Azure using Azure static web apps. You will need to have your app in GitHub as Azure static web apps leverages GitHub actions which allow you to re-build your static site on every git push.
-
-There are 2 things you need to configure in order to deploy your app to Azure static web apps. The first one is to modify the build command as Azure reads the build command from your package.json and for static sites we need to use the generate command.
-
-`package.json`
-
-```json
-build: "nuxt generate"
-```
-
-The second one is to add a routes.json file which is important for catching custom 404 pages and spa fallback pages.
-
-`static/routes.json`
-
-```jsx
-{
- "routes": [],
- "platformErrorOverrides": [
-   {
-    "errorType": "NotFound",
-    "serve": "/200.html",
-    "statusCode": 200
-   }
- ]
-}
-```
-
-If you want to test out deploying to Azure static web apps, we have created a small demo application that is all setup and configured. You will just need to clone it and add it to your GitHub repo. You can then follow the steps on - Deploying your app with Azure Static Web Apps.
-
-[Clone the demo app](https://github.com/debs-obrien/nuxtjs-azure-static-app)
-
-## Deploying your app with Azure Static Web Apps
-
-### Step 1: **Create Azure static web apps**
-
-1. Navigate to the [Azure Portal](https://portal.azure.com/).
-2. Click **Create a Resource** then search for **Static App** and select it.
-3. Select a subscription from the *Subscription* drop-down list or use the default one.
-4. Click the **New** link below the *Resource group* dropdown. In *New resource group name*, type **nuxt** and click **OK**
-5. Provide a globally unique name for your app in the **Name** text box. Valid characters include `a-z`, `A-Z`, `0-9`, and `-`. The app name is used to identify the app in your list of resources therefore it is a good idea to name your app using the name of your repository.
-6. In the *Region* dropdown, choose a region closest to you.
-
-![Azure Portal resource and app setup](https://user-images.githubusercontent.com/13063165/82118135-71891b00-9775-11ea-8284-aa94d17a3bc3.png)
-
-### Step 2: **Add a GitHub repository**
-
-Azure App Service Static App needs access to the repository where your Nuxt app lives so it can automatically deploy commits:
-
-1. Click the **Sign in with GitHub button**
-2. Select the **Organization** under which you created the repo for your Nuxt project. It can also be your GitHub username.
-3. Find the name of the repository you created earlier and select it.
-4. Choose **master** as the branch from the *Branch* dropdown.
-
-![how to add github](https://user-images.githubusercontent.com/13063165/82118359-38ea4100-9777-11ea-9c5e-7ba5c4da708e.png)
-
-### Step 3: **Configure the build process**
-
-There are few things that Azure App Service Static App can assume - things like automatically installing npm modules and running `npm run build`. There are also few you have to be explicit about, like what folder will the static app be copied to after build so the static site can be served from there.
-
-1. Click on the **Build** tab to configure the static output folder.
-2. Type **dist** in the *App artifact location* text box.
-
-![Azure portal configure build](https://user-images.githubusercontent.com/13063165/82118277-71d5e600-9776-11ea-88ad-48cf0793905d.png)
-
-### Step 4: **Review and create**
-
-1. Click the **Review + Create** button to verify the details are all correct.
-2. Click **Create** to start the creation of the resource and also provision a GitHub Action for deployment.
-3. Once the deployment is completed, click **Go to resource**
-
-![azure portal deployment complete message](https://user-images.githubusercontent.com/13063165/82118390-67681c00-9777-11ea-9778-671dc768393e.png)
-
-4. On the resource screen, click the *URL* link to open your deployed application.
-
-![resource screen with url to your deployed app](https://user-images.githubusercontent.com/13063165/82118042-d001c980-9774-11ea-94f5-57d995aa5391.png)
-
-Congrats your static site is now hosted on Azure static web apps.
-
-## Rebuild your static app and monitoring deployment
-
-Now all you have to do is modify your code and push your changes. Pushing your changes will activate a GitHub action and your new site will automatically rebuild. You can monitor the workflow by clicking on the actions tab in your GitHub repo and you can inspect even further by selecting the last commit you made. You can then watch to see when the deploy is finished or inspect the log if you have any deployment errors.
-
-![GitHub actions screen](https://user-images.githubusercontent.com/13063165/82118249-34715880-9776-11ea-92e2-dbd21bbf7cb6.png)
-
-## Did you know?
-
-### **How to handle dynamic routes**
-
-If you are working with dynamic pages such as `_id.vue` then you you will need to add these routes to the generate property in your nuxt config.
-
-[See the documentation on how to handle dynamic routes.](/docs/configuration-glossary/configuration-generate#routes)
-
-
        
-If you are using Nuxt 2.13+ then you won't have to worry about this as there is a built in crawler which will crawl all dynamics by crawling the links in your site.
-
        
-
-### How to add an error page
-
-In order to not have the default 404 page you can create an `error.vue` file in your layouts folder.
-
-### How to add SPA fallback
-
-If you would like some pages to not be generated but act as a single page application you can do so using the generate.excludes property in your nuxt.config file.
-
-[See the documentation on spa fallback](/docs/configuration-glossary/configuration-generate#exclude)
diff --git a/content/fa/deployments/bip.md b/content/fa/deployments/bip.md
deleted file mode 100644
index 8220bca63f..0000000000
--- a/content/fa/deployments/bip.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-template: guide
-title: Bip
-description: How to deploy a Nuxt app with Bip?
-target: Static
-category: deployment
-logo:
-  light: "/img/companies/square/light/bip.png"
-  dark: "/img/companies/square/dark/bip.png"
----
-# Deploy Nuxt with Bip
-
-How to deploy a Nuxt app with Bip?
-
----
-
-[Bip](https://bip.sh) is a commercial hosting service which provides zero downtime deployment, a global CDN, SSL, unlimited bandwidth and more for Nuxt static websites. Plans are available on a pay as you go, per domain basis.
-
-The following guide will show you how to deploy your Nuxt static site to Bip in just a couple simple steps.
-
-## Prerequisites
-
-- You have [Yarn](https://yarnpkg.com/getting-started/install) installed.
-- You have the Bip CLI installed, along with a Bip account and domain ready to use. Visit the [Bip Get Started guide](https://bip.sh/getstarted) for further instructions.
-
-## Step 1: Initial setup
-
-You'll first need a Nuxt project ready to deploy and share with the world. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app):
-
-Use Yarn to create your new project:
-
-```bash
-yarn create nuxt-app 
-```
-
-Follow the prompts to setup your Nuxt project. Ensure that when you reach the 'Deployment target' setting, select 'Static (Static/JAMstack hosting)'.
-
-Once complete, move into your new directory:
-
-```bash
-cd 
-```
-
-Next, you'll need to initialize your project with Bip. This only needs to be done once.
-
-```bash
-bip init
-```
-
-Follow the prompts, where you'll be asked which domain you'd like to deploy to. Bip will detect that you're using Nuxt, and set project settings like the source file directory automatically.
-
-## Step 2: Deploy
-
-You're now ready to deploy your website. To do so, run:
-
-```bash
-yarn generate && bip deploy
-```
-
-That's it! After a few moments, your website will be deployed.
diff --git a/content/fa/deployments/cleavr.md b/content/fa/deployments/cleavr.md
deleted file mode 100644
index e9f77a8c98..0000000000
--- a/content/fa/deployments/cleavr.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-template: guide
-title: Cleavr
-description: How to deploy a Nuxt app with Cleavr?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/cleavr.svg"
-  dark: "/img/companies/square/dark/cleavr.svg"
----
-# Deploy Nuxt with Cleavr
-
-How to deploy a Nuxt app with Cleavr?
-
----
-
-[Cleavr](https://cleavr.io) is a server management console that integrates with multiple VPS (cloud hosting) providers and helps you configure servers to host your Nuxt apps as well as deploys your Nuxt apps in just a couple of clicks.
-
-Cleavr includes the following features:
-
-- Provision and configure servers ready to run Nuxt SSR and Static applications
-- Secure servers and provides free SSL certs
-- Deploy code from GitHub, GitLab, and Bitbucket repositories with zero-downtime
-- Auto-installs and configures PM2 (with cluster mode enabled) for Nuxt SSR apps
-- GitHub Actions integration to build app with no additional configuration required
-
-## Prerequisites
-
-- Your Cleavr account is connected to your VPS and version control (e.g. GitHub, GitLab, Bitbucket) providers
-- You have a Nuxt SSR or Static project ready to deploy
-- You have an existing provisioned server
-
-## Step 1: Initial setup
-
-In Cleavr, navigate to the server to add the new app to and select **Add Site**.
-
-Select either **Nuxt SSR** or **Nuxt Static** web app type depending on which target you intend to deploy. Fill out the remaining website info and click **Add**.
-
-This will add the site to your server and configure the server with any missing required environment dependencies.
-
-Once the site has been successfully added, go to the Web App section and navigate to settings > code repository for the web app that was added.
-
-Fill in your version control provider, repository, and branch to deploy fields and then click **Update**.
-
-## Step 2: Deploy
-
-You're now ready to deploy your web app.
-
-On the web app's deployment page, click **Deploy**.
-
-The deployment process will begin and complete in a few moments.
-
-[View the Cleavr documentation for more info.](https://docs.cleavr.io/guides/nuxt)
diff --git a/content/fa/deployments/cloudflare.md b/content/fa/deployments/cloudflare.md
deleted file mode 100644
index c3bdbf7b42..0000000000
--- a/content/fa/deployments/cloudflare.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-template: guide
-title: Cloudflare
-description: What needs to be considered when using Nuxt with Cloudflare
-category: deployment
-logo:
-  light: "/img/companies/square/light/Cloudflare.svg"
-  dark: "/img/companies/square/dark/Cloudflare.svg"
----
-# Deploy Nuxt on Cloudflare
-
-What needs to be considered when using Nuxt with Cloudflare
-
----
-
-In most cases, Nuxt can work with third party content that is not generated or created by Nuxt itself. But sometimes such content can cause problems, especially Cloudflare's "Minification and Security Options".
-
-Accordingly, you should make sure that the following options are unchecked / disabled in Cloudflare. Otherwise, unnecessary re-rendering or hydration errors could impact your production application.
-
-1. Speed > Optimization > Auto Minify: **Uncheck** JavaScript, CSS and HTML
-2. Speed > Optimization > **Disable** "Rocket Loader™"
-3. Speed > Optimization > **Disable** "Mirage"
-4. Scrape Shield > **Disable** "Email Address Obfuscation"
-5. Scrape Shield > **Disable** "Server-side Excludes"
-
-With these settings, you can be sure that Cloudflare won't inject scripts into your Nuxt application that may cause unwanted side effects.
diff --git a/content/fa/deployments/digital-ocean.md b/content/fa/deployments/digital-ocean.md
deleted file mode 100644
index 6adfe9e1ef..0000000000
--- a/content/fa/deployments/digital-ocean.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-template: guide
-title: Digital Ocean
-description: How to deploy Nuxt on DigitalOcean App Platform?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Digital_Ocean.svg"
-  dark: "/img/companies/square/dark/Digital_Ocean.svg"
----
-# Deploy Nuxt on DigitalOcean App Platform
-
-How to deploy Nuxt on DigitalOcean App Platform?
-
----
-
-[DigitalOcean App Platform](https://www.digitalocean.com/products/app-platform/) allows you to build, deploy, and scale apps quickly using a simple, fully managed solution. They’ll handle the infrastructure, app runtimes and dependencies, so that you can push code to production in just a few clicks.
-
-App Platform includes the following features:
-
-- Build, deploy, manage, and scale apps.
-- Secure apps automatically. They create, manage and renew your SSL certificates and also protect your apps from DDoS attacks.
-- Support for Node.js, static sites, Python, Django, Go, PHP, Laravel, React, Ruby, Ruby on Rails, Gatsby, Hugo, container images.
-- Deploy code directly from your GitHub and GitLab repositories. Automatically re-deploy the app when you push updates to your source code.
-- Zero infrastructure management. App Platform uses open, cloud native standards and automatically analyzes your code, creates containers, and runs them on Kubernetes clusters.
-- Highly scalable. Scale horizontally or vertically.
-
-## Prerequisites
-
-This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started.
-
-## Setup
-
-1. Link your repository: Create a new account on DigitalOcean and connect your GitHub or Gitlab account. Then select the repository you want to deploy.
-2. Choose a branch of your repo and a region to deploy your site.
-3. Choose the service that suits your website.
-
-   | Type       | Settings                                                               |
-   | ---------- | ---------------------------------------------------------------------- |
-   | **Server** | Web service - Build command `yarn build` & Run command `yarn start --hostname 0.0.0.0`    |
-   | **Static** | Static Sites - Build command `yarn generate` & Output directory `dist` |
-
-   ::alert{type="warning"}
-    Warning: For the server type you need to change the **HTTP port** from 8080 to **3000** in the Web service settings. 
         More information at [this article](https://dev.to/tillsanders/deploy-nuxt-js-on-digitalocean-app-platform-in-5-minutes-or-less-2dij).
-   ::
-
-   ![DO App platform Web Service Nuxt configuration](https://i.imgur.com/BhBu49J.png)
-
-4. If you have any environment variable, add them manually in the key-value pair inputs.
-
-Once you pass the process, you hit deploy and your site will be live on an autogenerated url as soon as the build is done.
-
-## Continuous deployment (CD)
-
-Now that App Platform is connected to your repo, it will automatically build and publish your site any time you push a new change.
-
-## Add custom domains
-
-Add your own domains to your site easily on Settings > Domains > Add domain or follow this [How to Manage Domains in App Platform](https://www.digitalocean.com/docs/app-platform/how-to/manage-domains/) guide.
-
-## Deploy to DigitalOcean button
-
-The Deploy to DigitalOcean Button allows users to launch an application onto App Platform. It can be embedded in the README file for GitHub repositories, allowing users who are browsing your repository to deploy your code in one click, adding a .yaml file into your repo. Check it out at [How to Add a "Deploy to DigitalOcean" Button to Your Repository](https://www.digitalocean.com/docs/app-platform/how-to/add-deploy-do-button/)
diff --git a/content/fa/deployments/dokku.md b/content/fa/deployments/dokku.md
deleted file mode 100644
index 92e3a06b63..0000000000
--- a/content/fa/deployments/dokku.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-template: guide
-title: Dokku
-description: How to deploy a Nuxt application on Dokku?
-target: Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/dokku.png"
-  dark: "/img/companies/square/dark/dokku.png"
----
-# Deploy Nuxt on Dokku
-
-How to deploy a Nuxt application on Dokku?
-
----
-
-We recommend to read [Dokku documentation for the setup](http://dokku.viewdocs.io/dokku/getting-started/installation/) and [Deploying a Node.js Application on Digital Ocean using Dokku](http://jakeklassen.com/post/deploying-a-node-app-on-digital-ocean-using-dokku/).
-
-For the example, we will call our Nuxt application `my-nuxt-app`.
-
-We need to tell Dokku to install the `devDependencies` of the project (to be able to launch `npm run build`):
-
-```bash
-// on Dokku Server
-dokku config:set my-nuxt-app NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false
-```
-
-Also, we want our application to listen on the host `0.0.0.0` and run in production mode:
-
-```bash
-// on Dokku Server
-dokku config:set my-nuxt-app HOST=0.0.0.0 NODE_ENV=production
-```
-
-You should see these 3 lines when you type `dokku config my-nuxt-app`
-
-![nuxt config vars Dokku](https://i.imgur.com/9FNsaoQ.png)
-
-Then, we tell Dokku to launch `npm run build` via the `scripts.dokku.predeploy` script in our project `app.json`:
-
-`create a file name app.json in our project root folder`
-
-```js
-{
-  "scripts": {
-    "dokku": {
-      "predeploy": "npm run build"
-    }
-  }
-}
-```
-
-To launch the application we run `npm run start` using the [Procfile](http://dokku.viewdocs.io/dokku/deployment/methods/dockerfiles/#procfiles-and-multiple-processes):
-
-```
-web: npm run start
-```
-
-Finally, we can push our app on Dokku with:
-
-```bash
-// commit your change before push.
-git remote add dokku dokku@yourServer:my-nuxt-app
-git push dokku master
-```
-
-Voilà! Our Nuxt application is now hosted on Dokku!
diff --git a/content/fa/deployments/fume.md b/content/fa/deployments/fume.md
deleted file mode 100644
index d577122b4d..0000000000
--- a/content/fa/deployments/fume.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-template: guide
-title: Fume
-description: How to deploy Nuxt on Fume?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Fume.svg"
-  dark: "/img/companies/square/dark/Fume.svg"
----
-# Deploy Nuxt on Fume
-
-How to deploy Nuxt on Fume?
-
----
-
-[Fume](https://fume.app/) is an operations control platform powered by AWS.
-
-Fume includes the following features:
-
-- Serverless structures supporting both Server and Static with Lambda and CloudFront.
-- [Automated](https://github.com/marketplace/actions/fume-deployment) deployments with rollbacks with the click of a button
-- Metrics and cost prediction for each environment
-- Domain control - import hosts, issues certificates, and map records to environments
-- Integrated notifications to Slack, Discord, and other collaboration platforms
-
-## Setup
-
-Get a production-ready URL in 2 minutes with these steps:
-
-- Head to [Fume](https://fume.app), connect and plug in your AWS account
-- Create a Team, and a Nuxt project
-- Run the following command inside your projects root folder
-
-::code-group
-```bash [Yarn]
-yarn global add fume-cli
-fume deploy
-```
-```bash [NPM]
-npm install -g fume-cli
-fume deploy
-```
-::
diff --git a/content/fa/deployments/github-pages.md b/content/fa/deployments/github-pages.md
deleted file mode 100644
index 6a9df30162..0000000000
--- a/content/fa/deployments/github-pages.md
+++ /dev/null
@@ -1,293 +0,0 @@
----
-template: guide
-title: GitHub Pages
-description: How to deploy Nuxt app on GitHub Pages?
-target: Static
-category: deployment
-logo:
-  light: "/img/companies/square/light/Github_Pages.svg"
-  dark: "/img/companies/square/dark/Github_Pages.svg"
----
-# Deploy Nuxt on GitHub Pages
-
-How to deploy Nuxt app on GitHub Pages?
-
----
-
-Nuxt gives you the possibility to host your web application on any static hosting like [GitHub Pages](https://pages.github.com/) for example.
-
-To deploy on GitHub Pages, you need to generate your static web application:
-
-::code-group
-```bash [Yarn]
-yarn generate
-```
-```bash [NPM]
-npm run generate
-```
-::
-
-It will create a `dist` folder with everything inside ready to be deployed on GitHub Pages hosting. Branch `gh-pages` for project repository OR branch `master` for user or organization site
-
-::alert{type="info"}
-Info: If you use a custom domain for your GitHub Pages and put `CNAME` file, it is recommended that CNAME file is put in the `static` directory. [More documentation](/docs/directory-structure/static) about it.
-::
-
-## Deploying to GitHub Pages for repository
-
-First of all, you want to make sure to use [static target](/docs/features/deployment-targets) since we are hosting on GitHub pages:
-
-```js[nuxt.config.js]
-export default {
-  target: 'static'
-}
-```
-
-If you are creating GitHub Pages for one specific repository, and you don't have any custom domain, the URL of the page will be in this format: `http://.github.io/`.
-
-If you deployed `dist` folder without adding [router base](/docs/configuration-glossary/configuration-router), when you visit the deployed site you will find that the site is not working due to missing assets. This is because we assume that the website root will be `/`, but in this case it is `/`.
-
-To fix the issue we need to add [router base](/docs/configuration-glossary/configuration-router#base) configuration in `nuxt.config.js`:
-
-```js[nuxt.config.js]
-export default {
-  target: 'static',
-  router: {
-    base: '//'
-  }
-}
-```
-
-This way, all generated path asset will be prefixed with `//`, and the next time you deploy the code to repository GitHub Pages, the site should be working properly.
-
-## Command line deployment
-
-You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir):
-
-First install it:
-
-::code-group
-```bash [Yarn]
-yarn add --dev push-dir
-```
-```bash [NPM]
-npm install push-dir --save-dev
-```
-::
-
-Add a `deploy` command to your `package.json` with the branch as `gh-pages` for project repository OR `master` for user or organization site.
-
-```js
-"scripts": {
-  "dev": "nuxt",
-  "generate": "nuxt generate",
-  "start": "nuxt start",
-  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
-},
-```
-
-Then generate and deploy your static application:
-
-::code-group
-```bash [Yarn]
-yarn generate
-yarn deploy
-```
-```bash [NPM]
-npm run generate
-npm run deploy
-```
-::
-
-## Build server deployment
-
-You can take deployment one step further and rather than having to manually compile and deploy the files from your local install, you can make use of a build server to monitor your GitHub repository for new commits and then checkout, compile and deploy everything for you automatically.
-
-### GitHub Actions
-
-To deploy via [GitHub Actions](https://github.com/features/actions), the official tool for software automation with GitHub, if you don't have a workflow you need to create a new one or append a new step to your existing workflow.
-
-It uses the [GitHub Pages Action](https://github.com/marketplace/actions/github-pages-action) which pushes the generated files from the `dist` folder to your default GitHub Pages branch `gh-pages`.
-
-With an existing workflow, add the following step:
-
-```yaml
-- name: Deploy
-  uses: peaceiris/actions-gh-pages@v3
-  with:
-    github_token: ${{ secrets.GITHUB_TOKEN }}
-    publish_dir: ./dist
-```
-
-With a new workflow, paste the following content into a new file called `cd.yml` in `.github/workflows` directory:
-
-```yaml
-name: cd
-
-on: [push, pull_request]
-
-jobs:
-  cd:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node: [14]
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@master
-
-      - name: Setup node env
-        uses: actions/setup-node@v2.1.2
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Generate
-        run: yarn generate
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
-```
-
-Then commit this to your repository:
-
-```bash
-git add .github/workflows/cd.yml
-git commit -m "Adding github pages deploy workflow"
-git push origin
-```
-
-On completion, you'll see your `gh-pages` branch updated as well as your site.
-
-### Travis CI
-
-To deploy with [Travis CI](https://travis-ci.org/), a free for open source projects build server, sign in via your GitHub account, granting Travis access to view your repositories, and then enable the build server for your repository by toggling the switch next to your repositories name in the list displayed.
-
-![Travis Builder Server Enable](/img/docs/github_pages_travis_01.png)
-
-Next, click the cog icon beside your repository name to configure the general settings of the build sever and enable the 'Build only if .travis.yml is present' feature by toggling the switch.
-
-![Travis Builder Server Settings](/img/docs/github_pages_travis_02.png)
-
-On the same screen, scroll down to the Environment Variables section and create a new variables named `GITHUB_ACCESS_TOKEN` and in the value field paste a copy of the GitHub personal access token your created earlier and click the 'Add' button.
-
-![Travis Builder Server Environment Variables](/img/docs/github_pages_travis_03.png)
-
-Finally, create a `.travis.yml` configuration file in the root of your repository with the following contents
-
-```yaml
-language: node_js
-node_js:
-  - '12'
-
-cache:
-  directories:
-    - 'node_modules'
-
-branches:
-  only:
-    - master
-
-install:
-  - npm install
-  - npm run generate
-
-script:
-  - echo "Skipping tests"
-
-deploy:
-  provider: pages
-  skip-cleanup: true
-  github-token: $GITHUB_ACCESS_TOKEN # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
-  target-branch: gh-pages
-  local-dir: dist
-  on:
-    branch: master
-```
-
-and then commit this to your repository
-
-```bash
-git add .travis.yml
-git commit -m "Adding travis deploy configuration"
-git push origin
-```
-
-Now, whenever you commit any changes to your repository, from within Travis, you'll see a new build start up
-
-![Travis Builder Server Output](/img/docs/github_pages_travis_04.png)
-
-and on completion, you'll see your GitHub pages site automatically updated.
-
-### Appveyor
-
-To deploy via [Appveyor](https://www.appveyor.com), another free for open source projects build server, sign up for a new account choosing the GitHub authentication option to sign in using your GitHub account.
-
-Once signed in, click the 'New project' link and then click the 'Add' button beside your repository name in the list displayed to enable the build server on your repository.
-
-![Appveyor Builder Server Enable](/img/docs/github_pages_appveyor_01.png)
-
-Next, in the root of your repository, create an `appveyor.yml` configuration file with the following contents
-
-```yaml
-environment:
-  # Nuxt requires node v12 minimum
-  nodejs_version: '12'
-  # Encrypt sensitive data (https://ci.appveyor.com/tools/encrypt)
-  github_access_token:
-    secure: ENCRYPTED_GITHUB_ACCESS_TOKEN
-  github_email:
-    secure: ENCRYPTED_GITHUB_EMAIL
-
-# Only run on master branch
-branches:
-  only:
-    - master
-
-# Install scripts. (runs after repo cloning)
-install:
-  # switch nodejs version
-  - ps: Install-Product node $env:nodejs_version
-  # install modules
-  - npm install
-  # generate static files
-  - npm run generate
-  # configure global git credentials store (https://www.appveyor.com/docs/how-to/git-push/)
-  - git config --global credential.helper store
-  - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:github_access_token):x-oauth-basic@github.com`n"
-  - git config --global user.email $env:github_email
-  # deploy to GitHub pages
-  - npm run deploy
-
-# No tests to run
-test: off
-
-# Don't actually build.
-build: off
-```
-
-**_NB_** This configuration assumes you've configured your `package.json` file as per the [Command line deployment](#command-line-deployment) instructions
-
-Before you commit this file however, you'll need to change the `ENCRYPTED_GITHUB_ACCESS_TOKEN` and `ENCRYPTED_GITHUB_EMAIL` variables with your GitHub personal access token from earlier and your GitHub email address, encrypted using the [Appveyor encryption tool](https://ci.appveyor.com/tools/encrypt).
-
-Once updated, commit the file to your repository
-
-```bash
-git add appveyor.yml
-git commit -m "Adding appveyor deploy configuration"
-git push origin
-```
-
-Now, whenever you commit any changes to your repository, from within Appveyor, you'll see a new build start up
-
-![Appveyor Builder Server Output](/img/docs/github_pages_appveyor_02.png)
-
-and on completion, you'll see your GitHub pages site automatically updated.
diff --git a/content/fa/deployments/google-appengine.md b/content/fa/deployments/google-appengine.md
deleted file mode 100644
index 207a15527e..0000000000
--- a/content/fa/deployments/google-appengine.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-template: guide
-title: Google App Engine
-description: How to deploy Nuxt on Google App Engine?
-target: Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Google_engine_app.svg"
-  dark: "/img/companies/square/dark/Google_engine_app.svg"
----
-# Deploy Nuxt on Google App Engine
-
-How to deploy Nuxt on Google App Engine?
-
----
-
-Deploying to [Google App Engine](https://cloud.google.com/appengine/) is a fast and easy solution for hosting your universal Nuxt application on Google's Cloud Services.
-
-In this guide, we build the application locally and then simply upload the entire project folder to Google App Engine. After the upload, Google App Engine will automatically start the `start` script in our package.json and your app will be available immediately.
-
-## Getting Started
-
-Make sure you have a Google Cloud Account, a project and an empty Google App Engine app set up on [Google App Engine](https://cloud.google.com/appengine/). Furthermore, make sure to download and install the Cloud SDK (CLI) from Google as explained [here](https://cloud.google.com/sdk/) and log into your Google Cloud Account.
-
-## Configure your application
-
-All you need to add to your universal Nuxt app for deploying it to the App Engine is a file called `app.yaml`. Create a new file with that name in your root project directory and add the following content:
-
-```yaml
-runtime: nodejs10
-
-instance_class: F2
-
-handlers:
-  - url: /_nuxt
-    static_dir: .nuxt/dist/client
-    secure: always
-
-  - url: /(.*\.(gif|png|jpg|ico|txt))$
-    static_files: static/\1
-    upload: static/.*\.(gif|png|jpg|ico|txt)$
-    secure: always
-
-  - url: /.*
-    script: auto
-    secure: always
-
-env_variables:
-  HOST: '0.0.0.0'
-```
-
-or for flexible environment the minimal configuration is:
-
-```yaml
-runtime: nodejs
-env: flex
-```
-
-## Build and deploy the app
-
-Now build your app with `npm run build` or `yarn build`.
-
-At this point, your app is ready to be uploaded to Google App Engine. Now just run the following command:
-
-```
-gcloud app deploy app.yaml --project [project-id]
-```
-
-Voilà! Your Nuxt application is now hosted on Google App Engine!
-
-## Further Information
-
-- The `instance_class` attribute in your app.yaml file sets the class of your app instance. Instance F2 is not completely free, but has the minimum memory needed to run a Nuxt application.
-- Make sure `start` in package.json is the command that you want to run after deployment. If you usually run by `start:prod` or some other command, your app will not work as expected.
-
-Make sure to put the `project-id` and not the `project-name` in the deploy command. These are two different things but easy to mix up.
diff --git a/content/fa/deployments/google-cloud-run.md b/content/fa/deployments/google-cloud-run.md
deleted file mode 100644
index 21bcae5e69..0000000000
--- a/content/fa/deployments/google-cloud-run.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-template: guide
-title: Google Cloud Run
-description: How to deploy Nuxt on Google Cloud Run?
-target: Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Google_Cloud_run.svg"
-  dark: "/img/companies/square/dark/Google_Cloud_run.svg"
----
-# Deploy Nuxt on Google Cloud Run
-
-How to deploy Nuxt on Google Cloud Run?
-
----
-
-[Google Cloud Run](https://cloud.google.com/run) is a fully managed compute platform for deploying and scaling containerized applications quickly and securely.
-
-In this guide, we simply upload the entire project folder to Google Cloud Build with a Dockerfile. After the upload, Cloud Build will automatically generate a container. Then we will deploy this container to Google Cloud Run which will start it with the `start` script in our package.json.
-
-## Getting Started
-
-Make sure you have a Google Cloud Account, a project and the accesses as editor on Cloud Build and Cloud Run. Furthermore, make sure to download and install the Cloud SDK (CLI) from Google as explained [here](https://cloud.google.com/sdk/) and log into your Google Cloud Account. If you do not want to download the Cloud SDK, be aware that you can use gcloud CLI from the Google Cloud Console.
-
-Now, let's do few checks!
-
-If the Cloud Build API and the Cloud Run API are not enabled, enable them:
-
-```bash
-# Enabling Cloud Build
-$ gcloud services enable cloudbuild.googleapis.com
-
-# Enabling Cloud Run
-$ gcloud services enable run.googleapis.com
-```
-
-Go in your application directory and install dependencies:
-
-```bash
-# For yarn users
-$ yarn
-
-# For npm users
-$ npm install
-```
-
-Start the application locally:
-
-```bash
-# For yarn users
-$ yarn dev
-
-# For npm users
-$ npm run dev
-```
-
-Check that everything works.
-
-## Containerize your application
-
-Now, we will create a container with Cloud Build.
-
-You need to add to your Nuxt app a `Dockerfile`. Create a new file named `Dockerfile` in your root project directory and add the following content:
-
-For yarn users:
-
-```Dockerfile
-FROM node:14
-
-WORKDIR /usr/src/app
-
-COPY . ./
-RUN yarn
-
-EXPOSE 8080
-
-ENV HOST=0.0.0.0
-ENV PORT=8080
-
-RUN yarn build
-
-CMD [ "yarn", "start" ]
-```
-
-For npm users:
-
-```Dockerfile
-FROM node:14
-
-WORKDIR /usr/src/app
-
-COPY . ./
-RUN npm install
-
-EXPOSE 8080
-
-ENV HOST=0.0.0.0
-ENV PORT=8080
-
-RUN npm run build
-
-CMD [ "npm", "run", "start" ]
-```
-
-Run the following command to start the build process:
-
-`gcloud builds submit --tag gcr.io//my-nuxt-app-name:1.0.0 .`
-
-!Attention: if you want to implement continuous delivery or .env files configurations, you will have to use a [Cloud Build configuration file](https://cloud.google.com/cloud-build/docs/build-config).
-
-## Deploying your application on Cloud Run
-
-Run the following command to deploy your application:
-
-`gcloud run deploy --image=gcr.io//my-nuxt-app-name:1.0.0 --platform managed --port 3000`
-
-Allow unauthenticated invocations if you want to set up a public access.
-
-Be aware that Cloud Run applications will have a default concurrency value of 80 (each container instance will handle up to 80 requests at a time). You can specify the concurrency value this way:
-
-`gcloud run deploy --image=gcr.io//my-nuxt-app-name:1.0.0 --platform managed --port 3000 --concurrency `
-
-Run the following command to check if the deployment was created successfully:
-
-`gcloud run services list --platform managed`
-
-A list of Cloud Run services is displayed. Click on the URL of your deployment and enjoy the result!
diff --git a/content/fa/deployments/heroku.md b/content/fa/deployments/heroku.md
deleted file mode 100644
index 9e65c1ad9a..0000000000
--- a/content/fa/deployments/heroku.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-template: guide
-title: Heroku
-description: How to deploy Nuxt on Heroku?
-target: Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Heroku.svg"
-  dark: "/img/companies/square/dark/Heroku.svg"
----
-# Deploy Nuxt on Heroku
-
-How to deploy Nuxt on Heroku?
-
----
-
-We recommend you read the [Heroku documentation for Node.js](https://devcenter.heroku.com/articles/nodejs-support).
-
-
        
-  
-    
        
-      Watch a free lesson on How to deploy Nuxt to Heroku on Vue School
-    
        
-          
-
        
-
-You can set up and configure your app via the [Heroku dashboard](https://devcenter.heroku.com/articles/heroku-dashboard) or the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli).
-
-First, we create our app. Then we add the Node.js [buildpack](https://devcenter.heroku.com/articles/buildpacks) and configure the app to listen on the host `0.0.0.0`:
-
-```bash
-heroku create myapp
-heroku buildpacks:set heroku/nodejs
-heroku config:set HOST=0.0.0.0
-```
-
-Your app's Settings section on the Heroku dashboard should contain this:
-
-![nuxt config vars Heroku](https://user-images.githubusercontent.com/23453691/116850762-81ea0e00-abf1-11eb-9f70-260721a1d525.png)
-
-Finally, we can push the app on Heroku with:
-
-```bash
-git push heroku master
-```
-
-To deploy a non-master branch to Heroku use:
-
-```bash
-git push heroku develop:master
-```
-
-where `develop` is the name of your branch.
-
-You can optionally configure automatic deploys from a selected branch of your app's GitHub repository in the Deploy section of your app in the Heroku dashboard.
-
-Voilà! Your Nuxt application is now hosted on Heroku!
diff --git a/content/fa/deployments/hostman.md b/content/fa/deployments/hostman.md
deleted file mode 100644
index 55a24daea9..0000000000
--- a/content/fa/deployments/hostman.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-template: guide
-title: Hostman
-description: How to deploy Nuxt on Hostman?
-target: Static
-category: deployment
-logo:
-  light: "/img/companies/square/light/Hostman.svg"
-  dark: "/img/companies/square/dark/Hostman.svg"
----
-# Deploy Nuxt on Hostman
-
-How to deploy Nuxt on Hostman?
-
----
-
-[Hostman](https://hostman.com/) is a cloud hosting provider for startups and new projects. It helps to get rid of most routine DevOps operations, saving time for developers and money for companies. Hostman employs a services concept to make it easier to develop complex architecture and scale it in one click.
-
-Hostman provides you with the following features:
-
-- Build and deploy static websites, web apps, docker containers and databases.
-- Everything is very transparent, because you see the actual hardware your application is operating on and the actual load average, so you can assess them if something goes wrong.
-- You can SSH into your Docker container, providing the perfect balance between abstraction and transparency.
-- Hostman automatically sets up an SSL certificate for all your domains and puts a CDN in place to deliver your content as fast as possible.
-- Hostman automates CI/CD, pulling, building and launching code as soon as you push a new commit to the repository.
-- No vendor lock-in.
-- Hostman supports 22 frameworks.
-
-## Prerequisites
-
-This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started.
-
-## Setup
-
----
-
-Step 1. Create a service
-
-To deploy a Nuxt static website, click Create in the top-left corner of your [Dashboard](https://dashboard.hostman.com/) and choose Front-end app or static website.
-
-![Hostman dashboard](https://i.imgur.com/bEePHDo.png)
-
-Step 2. Select the project to deploy
-
-If you are logged in to Hostman with your GitHub, GitLab or Bitbucket account, at this point you will see the repository with your projects, including the private ones.
-
-Choose the project you want to deploy. It must contain the Nuxt app directory that was automatically created after running the yarn create-nuxt-app command.
-
-To access a different repository, click Connect another repository.
-
-If you didn’t use your Git account credentials to log in, you’ll be able to access the necessary account now, and then select the project.
-
-Step 3. Configure the build settings
-
-Next, the Website customization window will appear.
-
-![Build configuration](https://i.imgur.com/gIgl5EH.png)
-
-Choose the Static website option from the list of frameworks.
-
-The Directory with app points at the directory that will contain the project's files after the build. For Nuxt the directory is dist.
-
-The standard build command will be:
-
-`yarn build`
-
-It initiates the framework’s command nuxt generate which will create the dist directory with the project’s files.
-
-You can modify the command here if the build process for your project requires it. You can enter multiple commands separated by &&.
-
-Step 4. Deploy
-
-Click Deploy to start the build process.
-
-Once it starts, you will enter the deployment log. If there are any issues with the code, you will get warning or error messages in the log, specifying the cause of the problem.
-
-Usually the log contains all the debugging data you'll need, but we are also here to help you solve the issues, so do not hesitate to contact us via chat.
-
-When the deployment is complete, you will receive an e-mail notification and also see a similar log entry:
-
-![Log entry](https://i.imgur.com/KwzMxTb.png)
-
-All done!
-
-Your project is up and ready.
diff --git a/content/fa/deployments/index.md b/content/fa/deployments/index.md
deleted file mode 100644
index 8bbb1d5d2f..0000000000
--- a/content/fa/deployments/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-template: PageList
-title: Deployments
-description: "Extend and automate your workflow by using deployments for your favorite tools."
-heroTitle: Deployments
-heroDescription: "Extend and automate your workflow by using deployments for your favorite tools."
-heroDescriptionFullWidth: true
----
diff --git a/content/fa/deployments/koyeb.md b/content/fa/deployments/koyeb.md
deleted file mode 100644
index 81dfc5487e..0000000000
--- a/content/fa/deployments/koyeb.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-template: guide
-title: Koyeb
-description: Deploy Nuxt on Koyeb Serverless Platform with Docker
-target: Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Koyeb.svg"
-  dark: "/img/companies/square/dark/Koyeb.svg"
----
-# Deploy Nuxt on Koyeb Serverless Platform
-
-Deploy Nuxt on Koyeb Serverless Platform with Docker
-
----
-
-[Koyeb](https://www.koyeb.com) is a developer-friendly serverless platform to deploy apps globally. The platform lets you seamlessly run Docker containers, web apps, and APIs with git-based deployment, native autoscaling, a global edge network, and built-in service mesh and discovery.
-
-In this guide, we showcase how to dockerize and deploy a Nuxt application on the Koyeb platform.
-
-> Koyeb allows you to deploy Docker containers from the registry of your choice. In this guide we use the Docker Hub to store our image but you are free to use the [GitHub Container Registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry), the [GitLab Container Registry](https://docs.gitlab.com/ee/user/packages/container_registry/) or any other container registry provider.
-
-## Requirements
-
-To successfully follow and complete this guide, you need:
-
-1. A Nuxt project to deploy. You can use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to create a Nuxt project and get started
-2. A [Koyeb account](https://app.koyeb.com) to deploy and run the dockerized Nuxt application
-3. A [Docker Hub](https://hub.docker.com/) account to push the Docker image and deploy it on Koyeb
-
-## Getting started
-
-In your Nuxt application directory run the following command to install dependencies:
-
-```bash
-yarn
-```
-
-Once the dependencies are installed, launch your application and ensure everything is working fine:
-
-```bash
-yarn dev
-```
-
-## Dockerize your application
-
-To Dockerize your Nuxt application, you need to create a `Dockerfile` in your project directory containing the content below:
-
-```dockerfile
-FROM node:lts as builder
-
-WORKDIR /app
-
-COPY . .
-
-RUN yarn install \
-  --prefer-offline \
-  --frozen-lockfile \
-  --non-interactive \
-  --production=false
-
-RUN yarn build
-
-RUN rm -rf node_modules && \
-  NODE_ENV=production yarn install \
-  --prefer-offline \
-  --pure-lockfile \
-  --non-interactive \
-  --production=true
-
-FROM node:lts
-
-WORKDIR /app
-
-COPY --from=builder /app  .
-
-ENV HOST 0.0.0.0
-EXPOSE 80
-
-CMD [ "yarn", "start" ]
-```
-
-To build the Docker image execute the following command:
-
-```bash
-docker build . -t /my-nuxt-project
-```
-
-This command will build the Docker image with the name /my-nuxt-project. Once the build is over, you can run a container using the image locally to validate everything is working as expected running:
-
-```bash
-docker run -p 3000:3000 /my-nuxt-project
-```
-
-Open your browser and navigate to http://localhost:3000 to view your project landing page.
-
-## Push your Docker image to a container registry
-
-Since our Docker image is built and functional in our test, we can now upload it to a container registry. In this documentation, we will store our image on the Docker Hub. In your terminal run the command below to push the image:
-
-```bash
-docker push /my-nuxt-project
-```
-
-## Deploy the Nuxt application to production on Koyeb
-
-On the Koyeb Control Panel, click the **Create App** button.
-
-In the form, fill the `Docker image` field with the name of the image we previously created which should look like `/my-nuxt-project`.
-
-Check the box `Use a private registry` and, in the select field, click **Create Registry Secret**.
-
-A modal opens asking for:
-
-- a name for the Secret which will be created, we can use for instance `docker-hub-secret`
-- the registry provider to generate the secret containing your private registry credentials, in our case Docker Hub
-- your Docker Hub username and password. We recommend you to [generate an access token](https://hub.docker.com/settings/security) from the Docker Hub to use instead of your password.
-  Once you've filled all the fields, click the **Create** button.
-
-We don't need to change the _Path_, our app will be available at the root of our domain: `/`.
-
-Give your App a name, i.e `nuxt-app`, and click **Create App**.
-
-_You can add more regions to deploy your applications, set environment variables, and define the horizontal scaling according to your needs._
-
-You will automatically be redirected to the Koyeb App page where you can follow the progress of your Nuxt application deployment. In a few seconds, once your app is deployed, click on the _Public URL_ ending with `koyeb.app`.
-
-Your Nuxt application is now running on Koyeb and benefits from native autoscaling, automatic HTTPS (SSL), auto-healing, and global load-balancing across our edge network.
diff --git a/content/fa/deployments/nginx.md b/content/fa/deployments/nginx.md
deleted file mode 100644
index 476e1f6b6d..0000000000
--- a/content/fa/deployments/nginx.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-template: guide
-title: NGINX
-description: How to use nginx as a reverse proxy?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Nginx.svg"
-  dark: "/img/companies/square/dark/Nginx.svg"
----
-# Using NGINX as a reverse proxy
-
-How to use nginx as a reverse proxy?
-
----
-
-```nginx
-map $sent_http_content_type $expires {
-    "text/html"                 epoch;
-    "text/html; charset=utf-8"  epoch;
-    default                     off;
-}
-
-server {
-    listen          80;             # the port nginx is listening on
-    server_name     your-domain;    # setup your domain here
-
-    gzip            on;
-    gzip_types      text/plain application/xml text/css application/javascript;
-    gzip_min_length 1000;
-
-    location / {
-        expires $expires;
-
-        proxy_redirect                      off;
-        proxy_set_header Host               $host;
-        proxy_set_header X-Real-IP          $remote_addr;
-        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto  $scheme;
-        proxy_read_timeout          1m;
-        proxy_connect_timeout       1m;
-        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
-    }
-}
-```
-
-## Using nginx with generated pages and a caching proxy as fallback:
-
-If you have a high volume website with regularly changing content, you might want to benefit from Nuxt generate capabilities and [nginx caching](https://www.nginx.com/blog/nginx-caching-guide).
-
-Below is an example configuration. Keep in mind that:
-
-- root folder should be the same as set by [configuration generate.dir](/docs/configuration-glossary/configuration-generate#dir)
-- expire headers set by Nuxt are stripped (due to the cache)
-- both Nuxt and nginx can set additional headers, it's advised to choose one (if in doubt, choose nginx)
-- if your site is mostly static, increase the `proxy_cache_path inactive` and `proxy_cache_valid` numbers
-
-If you don't generate your routes but still wish to benefit from nginx cache:
-
-- remove the `root` entry
-- change `location @proxy {` to `location / {`
-- remove the other 2 `location` entries
-
-```nginx
-proxy_cache_path  /data/nginx/cache levels=1:2 keys_zone=nuxt-cache:25m max_size=1g inactive=60m use_temp_path=off;
-
-map $sent_http_content_type $expires {
-    "text/html"                 1h; # set this to your needs
-    "text/html; charset=utf-8"  1h; # set this to your needs
-    default                     7d; # set this to your needs
-}
-
-server {
-    listen          80;             # the port nginx is listening on
-    server_name     your-domain;    # setup your domain here
-
-    gzip            on;
-    gzip_types      text/plain application/xml text/css application/javascript;
-    gzip_min_length 1000;
-
-    charset utf-8;
-
-    root /var/www/NUXT_PROJECT_PATH/dist;
-
-    location ~* \.(?:ico|gif|jpe?g|png|woff2?|eot|otf|ttf|svg|js|css)$ {
-        expires $expires;
-        add_header Pragma public;
-        add_header Cache-Control "public";
-
-        try_files $uri $uri/ @proxy;
-    }
-
-    location / {
-        expires $expires;
-        add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';";
-        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
-        add_header X-Frame-Options "SAMEORIGIN";
-
-        try_files $uri $uri/index.html @proxy; # for generate.subFolders: true
-        # try_files $uri $uri.html @proxy; # for generate.subFolders: false
-    }
-
-    location @proxy {
-        expires $expires;
-        add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';";
-        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
-        add_header X-Frame-Options "SAMEORIGIN";
-        add_header X-Cache-Status $upstream_cache_status;
-
-        proxy_redirect                      off;
-        proxy_set_header Host               $host;
-        proxy_set_header X-Real-IP          $remote_addr;
-        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto  $scheme;
-        proxy_ignore_headers        Cache-Control;
-        proxy_http_version          1.1;
-        proxy_read_timeout          1m;
-        proxy_connect_timeout       1m;
-        proxy_pass                  http://127.0.0.1:3000; # set the address of the Node.js instance here
-        proxy_cache                 nuxt-cache;
-        proxy_cache_bypass          $arg_nocache; # probably better to change this
-        proxy_cache_valid           200 302  60m; # set this to your needs
-        proxy_cache_valid           404      1m;  # set this to your needs
-        proxy_cache_lock            on;
-        proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
-        proxy_cache_key             $uri$is_args$args;
-    }
-}
-```
-
-## nginx configuration for Laravel Forge:
-
-Change `YOUR_WEBSITE_FOLDER` to your website folder and `YOUR_WEBSITE_DOMAIN` to your website URL. Laravel Forge will have filled out these values for you but be sure to double check.
-
-```nginx
-# FORGE CONFIG (DOT NOT REMOVE!)
-include forge-conf/YOUR_WEBSITE_FOLDER/before/*;
-
-map $sent_http_content_type $expires {
-    "text/html"                 epoch;
-    "text/html; charset=utf-8"  epoch;
-    default                     off;
-}
-
-server {
-    listen 80;
-    listen [::]:80;
-    server_name YOUR_WEBSITE_DOMAIN;
-
-    add_header X-Frame-Options "SAMEORIGIN";
-    add_header X-XSS-Protection "1; mode=block";
-    add_header X-Content-Type-Options "nosniff";
-
-    charset utf-8;
-
-    gzip            on;
-    gzip_types      text/plain application/xml text/css application/javascript;
-    gzip_min_length 1000;
-
-    # FORGE CONFIG (DOT NOT REMOVE!)
-    include forge-conf/YOUR_WEBSITE_FOLDER/server/*;
-
-    location / {
-        expires $expires;
-
-        proxy_redirect off;
-        proxy_set_header Host               $host;
-        proxy_set_header X-Real-IP          $remote_addr;
-        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto  $scheme;
-        proxy_read_timeout          1m;
-        proxy_connect_timeout       1m;
-        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js
-    }
-
-    access_log off;
-    error_log  /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error;
-
-    location ~ /\.(?!well-known).* {
-        deny all;
-    }
-}
-
-# FORGE CONFIG (DOT NOT REMOVE!)
-include forge-conf/YOUR_WEBSITE_FOLDER/after/*;
-```
-
-## Secure Laravel Forge with TLS:
-
-It's best to let Laravel Forge do the editing of the `nginx.conf` for you, by clicking on Sites -> YOUR_WEBSITE_DOMAIN (SERVER_NAME) and then click on SSL and install a certificate from one of the providers. Remember to activate the certificate. Your `nginx.conf` should now look something like this:
-
-```nginx
-# FORGE CONFIG (DOT NOT REMOVE!)
-include forge-conf/YOUR_WEBSITE_FOLDER/before/*;
-
-map $sent_http_content_type $expires {
-    "text/html"                 epoch;
-    "text/html; charset=utf-8"  epoch;
-    default                     off;
-}
-
-server {
-    listen 443 ssl http2;
-    listen [::]:443 ssl http2;
-    server_name YOUR_WEBSITE_DOMAIN;
-
-    # FORGE SSL (DO NOT REMOVE!)
-    ssl_certificate /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.crt;
-    ssl_certificate_key /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.key;
-
-    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
-    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!3DES';
-    ssl_prefer_server_ciphers on;
-    ssl_dhparam /etc/nginx/dhparams.pem;
-
-    add_header X-Frame-Options "SAMEORIGIN";
-    add_header X-XSS-Protection "1; mode=block";
-    add_header X-Content-Type-Options "nosniff";
-
-    charset utf-8;
-
-    gzip            on;
-    gzip_types      text/plain application/xml text/css application/javascript;
-    gzip_min_length 1000;
-
-    # FORGE CONFIG (DOT NOT REMOVE!)
-    include forge-conf/YOUR_WEBSITE_FOLDER/server/*;
-
-    location / {
-        expires $expires;
-
-        proxy_set_header Host               $host;
-        proxy_set_header X-Real-IP          $remote_addr;
-        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto  $scheme;
-        proxy_redirect              off;
-        proxy_read_timeout          1m;
-        proxy_connect_timeout       1m;
-        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js
-    }
-
-    access_log off;
-    error_log  /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error;
-
-    location ~ /\.(?!well-known).* {
-        deny all;
-    }
-}
-
-# FORGE CONFIG (DOT NOT REMOVE!)
-include forge-conf/YOUR_WEBSITE_FOLDER/after/*;
-```
diff --git a/content/fa/deployments/platformsh.md b/content/fa/deployments/platformsh.md
deleted file mode 100644
index 2bb43b4105..0000000000
--- a/content/fa/deployments/platformsh.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-template: guide
-title: Platform.sh
-description: How to deploy Nuxt on Platform.sh?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Platformsh.svg"
-  dark: "/img/companies/square/dark/Platformsh.svg"
----
-# Deploy Nuxt on Platform.sh
-
-How to deploy Nuxt on Platform.sh?
-
----
-
-[Platform.sh](https://platform.sh/) is a full-featured end-to-end continuous deployment cloud hosting system for both staging and production environments. It is capable of hosting both static and dynamic applications in a variety of languages.
-
-Platform.sh includes the following features:
-
-- Build, deploy, manage, and scale applications.
-- Any branch can be a staging environment; create and delete environments with ease.
-- Support for almost any Node.js, PHP, Python, Ruby, Go, or Java application, in your choice of version, or mix and match.
-- Automatic TLS certificates.
-- Integrated build pipeline to customize your application's build process however you need.
-- Infrastructure-as-code: define three YAML files and your entire cluster is created on demand. Add and remove services with ease.
-- Deploy code directly from your GitHub and GitLab repositories.
-
-## Setup
-
-Platform.sh has a pre-made template for Nuxt available. The link below will create a new Platform.sh project and pre-populate it with a sample Nuxt application that you can then customize.
-
-
        
-
-    Deploy on Platform.sh
-
-
        
-
-The `README.md` file includes details of the provided default configuration. New Platform.sh accounts are free for the first 30 days.
diff --git a/content/fa/deployments/pm2.md b/content/fa/deployments/pm2.md
deleted file mode 100644
index f4844f6be8..0000000000
--- a/content/fa/deployments/pm2.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-template: guide
-title: PM2
-description: How to deploy Nuxt with PM2 cluster mode enabled?
-target: Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/pm2.png"
-  dark: "/img/companies/square/dark/pm2.png"
----
-# Deploy Nuxt using PM2
-
-How to deploy Nuxt with PM2 cluster mode enabled?
-
----
-
-Deploying using [PM2](https://pm2.keymetrics.io/) (Process Manager 2) is a fast and easy solution for hosting your universal Nuxt application on your server or VM.
-
-In this guide, we build the application locally and serve it though a PM2 config file with the cluster mode activated. Cluster mode will prevent downtime by allowing applications to be scaled across multiple CPUs.
-
-## Getting Started
-
-Make sure you have pm2 installed on your server. If not, simply globally install it from yarn or npm.
-
-```bash
-# yarn pm2 install
-$ sudo yarn global add pm2 --prefix /usr/local
-
-# npm pm2 install
-$ npm install pm2 -g
-```
-
-## Configure your application
-
-All you need to add to your universal Nuxt app for serving it though PM2 is a file called `ecosystem.config.js`. Create a new file with that name in your root project directory and add the following content:
-
-```javascript
-module.exports = {
-  apps: [
-    {
-      name: 'NuxtAppName',
-      exec_mode: 'cluster',
-      instances: 'max', // Or a number of instances
-      script: './node_modules/nuxt/bin/nuxt.js',
-      args: 'start'
-    }
-  ]
-}
-```
-
-## Build and serve the app
-
-Now build your app with `npm run build`.
-
-And serve it with `pm2 start`.
-
-Check the status `pm2 ls`.
-
-Your Nuxt application is now serving!
-
-## Further Information
-
-This solution guarantees no downtime for your application on this server. (You should also prevent server failure through redundancy or high availability cloud solutions.)
-
-You can find PM2 additional configurations [here](https://pm2.keymetrics.io/docs/usage/application-declaration/#general).
diff --git a/content/fa/deployments/qovery.md b/content/fa/deployments/qovery.md
deleted file mode 100644
index 66cfd665f3..0000000000
--- a/content/fa/deployments/qovery.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-template: guide
-title: Qovery
-description: How to deploy Nuxt on Qovery?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Qovery.svg"
-  dark: "/img/companies/square/dark/Qovery.svg"
----
-# Deploy Nuxt on Qovery
-
-How to deploy Nuxt on Qovery?
-
----
-
-[Qovery](https://qovery.com) is a fully-managed cloud platform that runs on your AWS, GCP, Azure and Digital Ocean account where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place.
-
-Static sites are **completely free** on Qovery and include the following:
-
-- Continuous, automatic builds & deploys from GitHub and GitLab.
-- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org).
-- Free managed PostgreSQL.
-- Free SSD storage.
-- Unlimited collaborators.
-- Unlimited [custom domains](https://docs.qovery.com/guides/getting-started/setting-custom-domain/).
-
-## Prerequisites
-
-This guide assumes you already have a Nuxt project to deploy. If you need a project, follow the [Get Started](/docs/get-started/installation) guide.
-
-## Setup
-
-Follow the procedure below to set up Nuxt on Qovery:
-
-### 1. Create a Qovery account.
-
-Visit the [Qovery dashboard](https://console.qovery.com) to create an account if you don't already have one.
-
-### 2. Create a project
-
-Click on "Create a new project" and give a name to your project.
-
-Click on "Next".
-
-### 3. Add an application
-
-Click on "Create an application" then choose "I have an application" and select the repository where your Nuxt site is located.
-
-Click on "Next".
-
-Skip adding services for static website.
-
-Click on "Deploy".
-
-## Deploy
-
-Your app should be deployed. You can see the status in real time by clicking on deployment logs.
-
-## Continuous deploys
-
-Now that Qovery is connected to your repo, it will **automatically build and publish your site** any time you push to git.
-
-## Custom domains
-
-Add your own domains to your site easily using Qovery's [custom domains](https://docs.qovery.com/guides/getting-started/setting-custom-domain/) guide.
-
-## Support
-
-Chat with Qovery developers on [Discord](https://discord.qovery.com) if you need help.
diff --git a/content/fa/deployments/stormkitio.md b/content/fa/deployments/stormkitio.md
deleted file mode 100644
index ef93109e42..0000000000
--- a/content/fa/deployments/stormkitio.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-template: guide
-title: Stormkit.io
-description: How to deploy Nuxt with Stormkit.io?
-target: Static & Server
-category: deployment
-logo:
-  light: "/img/companies/square/light/Stormkit.svg"
-  dark: "/img/companies/square/dark/Stormkit.svg"
----
-# Deploy with Stormkit
-
-How to deploy Nuxt with Stormkit.io?
-
----
-
-Easily build, deploy and scale your Nuxt applications with [Stormkit.io](https://www.stormkit.io). It supports instant rollbacks, serverless-side logic, snippet injections, multiple development environments and more...
-
-## Prerequisites
-
-This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started or fork Stormkit's [Nuxt Example](https://github.com/stormkit-dev/hackernews-nuxt) before continuing.
-
-## Setup
-
-1. Go to [app.stormkit.io](https://app.stormkit.io) and log in by selecting your git provider.
-2. Once logged in, Stormkit will ask you in which provider your codebase is located. Click on the provider once more.
-3. If Github, click on ‘Connect more repositories’ and grant Stormkit access to it.
-4. Next, select your repository. This will create the application on Stormkit.
-5. On your application's page, find the **Production** environment and click on that.
-6. Click on edit to configure your application. You will provide the build command and the
-   environment variables in this screen.
-
-## Static websites
-
-You don't have to do anything for static websites. Applications built with `nuxt generate` will be handled out of the box.
-
-## Single page applications
-
-For single page applications, all you have to do is to provide a `stormkit.config.yml` which redirects
-all requests to `index.html`. To do so, create a `stormkit.config.yml` file on the top level of your project and specify the following rule:
-
-```
-app:
-- redirects:
-    - from: /*
-      to: /index.html
-      assets: false
-```
-
-## Hybrid applications
-
-For hybrid applications, you'll have to turn on the `Serverless` toggle on the build configuration page. This will tell Stormkit to serve the requests from the lambdas instead of the CDN. You can find more on [this guide](https://www.stormkit.io/docs/deployments/configuration/nuxt#hybrid) to configure your hybrid serverless applications.
-
-## Hosting using Stormkit
-
-Stormkit generates a unique URL for each deployment. You can preview your application using these links. Later, you can connect your domain and publish any deployment so that the users will start to see that version of your application. You can also do staged-rollouts or A/B testing by publishing multiple versions at the same time.
-
-## Support
-
-If you need additional support, you can chat with Stormkit developers and other community members on [Discord](https://discord.gg/6yQWhyY).
diff --git a/content/fa/deployments/surge.md b/content/fa/deployments/surge.md
deleted file mode 100644
index b8e4144f71..0000000000
--- a/content/fa/deployments/surge.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-template: guide
-title: Surge
-description: How to deploy Nuxt app with Surge?
-target: Static
-category: deployment
-logo:
-  light: "/img/companies/square/light/Surge.svg"
-  dark: "/img/companies/square/dark/Surge.svg"
----
-# Deploy Nuxt with Surge
-
-How to deploy Nuxt app with Surge?
-
----
-
-Nuxt gives you the possibility to host your web application on any static hosting like [Surge](https://surge.sh/) for example.
-
-To deploy on Surge, first install it on your computer:
-
-::code-group
-```bash [Yarn]
-yarn global add surge
-```
-```bash [NPM]
-npm install -g surge
-```
-::
-
-Then, we tell Nuxt to generate our web application:
-
-::code-group
-```bash [Yarn]
-yarn generate
-```
-```bash [NPM]
-npm run generate
-```
-
-It will create a `dist` folder with everything inside ready to be deployed on a static hosting.
-
-We can then deploy it to Surge:
-
-```bash
-surge dist/
-```
-
-Done :)
-
-If you have a project with [dynamic routes](/docs/directory-structure/pages#dynamic-pages), take a look at the [`generate` configuration](/docs/configuration-glossary/configuration-generate) to tell Nuxt how to generate these dynamic routes if you are using Nuxt <= v2.12.
-
-::alert{type="warning"}
-When generating your web application with `nuxt generate`, [the context](/docs/internals-glossary/context) given to [asyncData](/docs/features/data-fetching) will not have `req` and `res`.
-::
diff --git a/content/fa/design/index.md b/content/fa/design/index.md
deleted file mode 100644
index 537299c6a5..0000000000
--- a/content/fa/design/index.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-template: blank
-title: 'Design Kit'
-description: 'Learn how to use Nuxt logos, colors and fonts and download the design kit.'
-layout:
-  fluid: true
-navigation: false
----
-::design-hero
----
-title: Design Kit
-description: "Nuxt is an MIT licensed open source project and completely free to use.
-You can freely use our logos as long as you mention Nuxt and link to nuxtjs.org."
-button: Download Design Kit
----
-::
-
-::design-sections
-
-::design-section
-#title
-Monograms
-
-#description
-Our logo is made from two elements: the triangular mountains and the wordmark. In most cases, they should appear together as the opposite master lockup shows. The triangular mountains can be used on their own as an icon, profile picture or badge, but the wordmark should never be used without this symbol on the side.
-
-#sectionComponent
-  :::design-logos
-  ---
-  type: monogram
-  ---
-  :::
-::
-
-::design-section
-#title
-Logos
-
-#sectionComponent
-  :::design-logos
-  ---
-  type: logos
-  ---
-  :::
-::
-
-::design-section
-#title
-Primary colors
-
-#description
-Our colours have been carefully considered to work in harmony and consistency across various media. When creating Nuxt communications, use the colour values shown on the following pages to make sure your designs stay on-brand. This nature-inspired primary colour palette should be used in all of our formal company related communications.
-
-#sectionComponent
-  :::design-colors
-  ---
-  buttonText: Download Color System
-  ---
-  :::
-::
-
-::design-section
-#title
-Typography
-
-#description
-Our brand typeface is DM Sans by Colophon Foundry for Google. This open-source typeface was chosen for its
-combination of smoothness and structure. Its geometric shapes and soft transitions will bring clarity and openness
-to our texts. Also, it’s open availability will let other members of the Nuxt community incorporate it into
-their work.
-
-#sectionComponent
-  :::design-typography
-::
-::
diff --git a/content/fa/events/index.md b/content/fa/events/index.md
deleted file mode 100644
index 8b68e70e30..0000000000
--- a/content/fa/events/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-template: events
-title: Events
-description: Discover and subscribe to future events featuring Nuxt content, and watch previous talks from the core team and the community
-heroTitle: 'Events'
-heroDescription: 'Discover and subscribe to future events featuring Nuxt content, and watch previous talks from the core team and the community'
----
diff --git a/content/fa/examples/1.routing/1.hello-world.md b/content/fa/examples/1.routing/1.hello-world.md
deleted file mode 100644
index 488636f627..0000000000
--- a/content/fa/examples/1.routing/1.hello-world.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Hello World
-description: Routing with NuxtLink component showing page rendered on server side and on client side
-category: routing
----
-
-# Hello World
-
-Routing with NuxtLink component showing page rendered on server side and on client side
-
----
-
-In this example:
-
-`pages/index.vue` and `pages/about.vue` show how Nuxt server renders the page on first load or on hard refresh and renders the page on client side when navigating using the `` component.
-
-::alert{type="next"}
-Learn more in the Get Started book in the [Installation](/docs/get-started/installation) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/hello-world?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
diff --git a/content/fa/examples/1.routing/2.active-link-classes.md b/content/fa/examples/1.routing/2.active-link-classes.md
deleted file mode 100644
index dcf1f27f76..0000000000
--- a/content/fa/examples/1.routing/2.active-link-classes.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Active Link Classes
-description: Change the default NuxtLink classes and style the active and exact active classes as well as disable prefetch for a specific link
-category: routing
----
-
-# Active Link Classes
-
-Change the default NuxtLink classes and style the active and exact active classes as well as disable prefetch for a specific link
-
----
-
-In this example:
-
-`layouts/default.vue` shows the styles for `nuxt-link-active` and `nuxt-link-exact-active`.
-
-::alert{type="next"}
-Learn more about [vue routers](https://router.vuejs.org/api/#exact-active-class) active and exact active classes.
-::
-
-::alert{type="next"}
-Learn more about active classes in the Features book in the [Nuxt Components](/docs/features/nuxt-components#link-classes) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/active-link-classes?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/1.routing/3.dynamic-pages.md b/content/fa/examples/1.routing/3.dynamic-pages.md
deleted file mode 100644
index ab7c2a7422..0000000000
--- a/content/fa/examples/1.routing/3.dynamic-pages.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Dynamic Pages
-description: Using dynamic pages to fetch data from an API and populate those pages
-category: routing
----
-
-# Dynamic Pages
-
-Using dynamic pages to fetch data from an API and populate those pages
-
----
-
-In this example:
-
-`pages/_slug.vue` shows data coming from the route params.
-
-`pages/index.vue` fetches our mountains from our API.
-
-`pages/_continent/_mountain.vue` shows the detail page for each mountain in each continent.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [pages](/docs/directory-structure/pages) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/dynamic-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2F_continent%2F_mountain.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/1.routing/4.nested-pages.md b/content/fa/examples/1.routing/4.nested-pages.md
deleted file mode 100644
index e299c7a599..0000000000
--- a/content/fa/examples/1.routing/4.nested-pages.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Nested Pages
-description: How to use the Nuxt Child component to create parent and child pages.
-category: routing
----
-
-# Nested Pages
-
-How to use the Nuxt Child component to create parent and child pages.
-
----
-
-In this example:
-
-`pages/parent.vue` contains the `` component. Everything on this page will be seen on both the parent and child pages.
-
-`pages/parent/index.vue` contains text that will be replaced when the child links are clicked.
-
-`pages/parent/child.vue` and `pages/parent/child2.vue` will be rendered as parent/child and parent/child2.
-
-::alert{type="next"}
-Learn more in the Features book in the [Nuxt Components](/docs/features/nuxt-components#the-nuxtchild-component) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/routing/nested-pages?fontsize=14&hidenavigation=1&module=%2Fpages%2Fparent.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/1.routing/index.md b/content/fa/examples/1.routing/index.md
deleted file mode 100644
index a0931383c9..0000000000
--- a/content/fa/examples/1.routing/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: false
-  redirect: /examples/routing/hello-world
----
diff --git a/content/fa/examples/10.modules/1.local.md b/content/fa/examples/10.modules/1.local.md
deleted file mode 100644
index a31281ce2e..0000000000
--- a/content/fa/examples/10.modules/1.local.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Local Module
-description: Local Module for setting up a tunnel using ngrok
-category: modules
----
-
-# Local Module
-
-Local Module for setting up a tunnel using ngrok
-
----
-
-In this example:
-
-- `modules/ngrok/index.js` adds a public URL from ngrok to the Nuxt CLI when in dev mode.
-- `pages/index.vue` shows the public URL from ngrok.
-- `nuxt.config.js` registers our module using the `buildModules` property.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [modules](/docs/directory-structure/modules) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/local-module?fontsize=14&hidenavigation=1&module=%2Fmodules%2Fngrok%2Findex.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/10.modules/2.axios.md b/content/fa/examples/10.modules/2.axios.md
deleted file mode 100644
index f4e8f657e4..0000000000
--- a/content/fa/examples/10.modules/2.axios.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Axios usage
-description: In the first example we show how to use the env property in our `nuxt.config.js` file to add the URL of our API so that we can then easily make calls to it without having to use the URL on our page
-category: modules
----
-
-# Axios usage
-
-In the first example we show how to use the env property in our `nuxt.config.js` file to add the URL of our API so that we can then easily make calls to it without having to use the URL on our page
-
----
-
-In this example:
-
-`nuxt.config.js` contains :
-
-- the `publicRuntimeConfig` property to add the URL of our API.
-- the `modules` property to register our `@nuxtjs/axios` module.
-
-`pages/index.vue` - uses `$axios` to fetch our data and `$config` to retrieve our API URL.
-
-::alert{type="next"}
-Learn more about the [axios module](https://axios.nuxtjs.org/).
-::
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [nuxt-config](/docs/directory-structure/nuxt-config) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/modules/axios-usage?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/10.modules/index.md b/content/fa/examples/10.modules/index.md
deleted file mode 100644
index ce33e58665..0000000000
--- a/content/fa/examples/10.modules/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/modules/local
----
diff --git a/content/fa/examples/2.data-fetching/1.async-data.md b/content/fa/examples/2.data-fetching/1.async-data.md
deleted file mode 100644
index 9f02baaea7..0000000000
--- a/content/fa/examples/2.data-fetching/1.async-data.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: asyncData Hook
-description: In this example we use asyncData to fetch our data from our API.
-category: dataFetching
----
-
-# asyncData Hook
-
-In this example we use asyncData to fetch our data from our API.
-
----
-
-In this example:
-
-`pages/index.vue` and `pages/posts/_id` use the `asyncData` hook and the `$http` module to fetch our list of mountains from our API.
-
-::alert{type="next"}
-Learn more about the [http module](https://http.nuxtjs.org/).
-::
-
-::alert{type="next"}
-Learn more about the asyncData hook the Features book in the [Data Fetching](/docs/features/data-fetching) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/async-data-hook?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
diff --git a/content/fa/examples/2.data-fetching/2.fetch-hook.md b/content/fa/examples/2.data-fetching/2.fetch-hook.md
deleted file mode 100644
index 5f28541f54..0000000000
--- a/content/fa/examples/2.data-fetching/2.fetch-hook.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: fetch Hook
-description: In this example we use the fetch hook to fetch data from components and from pages
-category: dataFetching
----
-
-# fetch Hook
-
-In this example we use the fetch hook to fetch data from components and from pages
-
----
-
-In this example:
-
-`pages/index.vue` imports `components/Mountains.vue` which uses the `fetch` hook and the `$http` module to fetch our data at component level while `pages/mountains/_slug` fetches the data at page level and include:
-
-- `$fetchState.pending` to show a loading text when the data is loading.
-- `$fetchState.error` to show an error message when we can't retrieve the data.
-- `$fetch` to fetch the data again when clicked.
-
-::alert{type="next"}
-Learn more about the [http module](https://http.nuxtjs.org/).
-::
-
-::alert{type="next"}
-Learn more about the fetch hook in the Features book in the [Data Fetching](/docs/features/data-fetching) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/data-fetching/fetch-hook?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FMountains.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/2.data-fetching/index.md b/content/fa/examples/2.data-fetching/index.md
deleted file mode 100644
index 0885b9acc4..0000000000
--- a/content/fa/examples/2.data-fetching/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/data-fetching/async-data
----
diff --git a/content/fa/examples/3.assets-management/1.pre-processors.md b/content/fa/examples/3.assets-management/1.pre-processors.md
deleted file mode 100644
index e7df7c55cb..0000000000
--- a/content/fa/examples/3.assets-management/1.pre-processors.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Pre-processors
-description: Configuration your application to use pug and sass with style resources to easily add variables to all components.
-category: assetManagement
----
-
-# Pre-processors
-
-Configuration your application to use pug and sass with style resources to easily add variables to all components.
-
----
-
-In this example:
-
-`pages/index.vue` uses pug as a template language and sass for styling.
-
-`nuxt.config.js`:
-
-- registers the style resources module.
-- contains a `styleResources` property to add `assets/variables.scss`.
-- contains a `css` property to add `assets/main.scss`.
-
-`package.json` shows the dependencies needed.
-
-::alert{type="next"}
-Learn more in the Features book in the [Configuration](/docs/features/configuration#pre-processors) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/pre-processors?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
diff --git a/content/fa/examples/3.assets-management/2.webpack-assets.md b/content/fa/examples/3.assets-management/2.webpack-assets.md
deleted file mode 100644
index 805c796b78..0000000000
--- a/content/fa/examples/3.assets-management/2.webpack-assets.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: webpack Assets
-description: Use the assets folder to add css, images and fonts to your application
-category: assetManagement
----
-
-# webpack Assets
-
-Use the assets folder to add css, images and fonts to your application
-
----
-
-In this example:
-
-`pages/index.vue` shows:
-
-- how to add an image from the assets folder.
-- how to add a background image from the assets folder using CSS.
-- how to add dynamic images from the assets folder using the data property.
-
-`nuxt.config.js` contains the `css` property for globally adding a css file.
-
-`assets/main.css` shows how to reference the DMSans fonts from the assets folder using the `@font-face` rule.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [Assets](/docs/directory-structure/assets) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/asset-management/webpack-assets?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
diff --git a/content/fa/examples/3.assets-management/index.md b/content/fa/examples/3.assets-management/index.md
deleted file mode 100644
index 88933378ac..0000000000
--- a/content/fa/examples/3.assets-management/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/assets-management/pre-processors
----
diff --git a/content/fa/examples/4.transitions/1.transitions.md b/content/fa/examples/4.transitions/1.transitions.md
deleted file mode 100644
index 8e1f69c415..0000000000
--- a/content/fa/examples/4.transitions/1.transitions.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Nuxt transitions
-description: Adding default and custom transitions to your pages and layouts
-category: transitions
----
-
-# Nuxt transitions
-
-Adding default and custom transitions to your pages and layouts
-
----
-
-In this example:
-
-- `pages/index.vue` and `pages/fade.vue` use the default page transiton.
-- `pages/bounce.vue` uses the `transition` property with a bounce transition
-- `pages/slide.vue` uses the `transition` property with a slide-bottom transition.
-- `layout/default.vue` contains the classes for all transitions.
-
-::alert{type="next"}
-Learn more in the Features book in the [Transitions](/docs/features/transitions) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/transitions/nuxt-transitions?fontsize=14&hidenavigation=1&module=%2Flayouts%2Fdefault.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/4.transitions/index.md b/content/fa/examples/4.transitions/index.md
deleted file mode 100644
index bbb6a45618..0000000000
--- a/content/fa/examples/4.transitions/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/transitions/transitions
----
diff --git a/content/fa/examples/5.seo/1.html-head.md b/content/fa/examples/5.seo/1.html-head.md
deleted file mode 100644
index 3495f6d2bb..0000000000
--- a/content/fa/examples/5.seo/1.html-head.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: SEO HTML Head
-description: In this example we use the head property to show how to get good SEO.
-category: seo
----
-
-# SEO HTML Head
-
-In this example we use the head property to show how to get good SEO.
-
----
-
-In this example:
-
-`nuxt.config.js` uses the `head` property to show a `title`, `titleTemplate`, and `meta` including `description`. It also shows how to add an external google font using the link property and some JS using the script property. The lang and amp attributes are set with the `htmlAttrs` property.
-
-`pages/index.vue` uses the head property as a function with dynamic data and uses the google font.
-
-`pages/about.vue` uses the head property as an object.
-
-::alert{type="next"}
-Learn more about the options available for `head`, in the [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties).
-::
-
-::alert{type="next"}
-Learn more about meta tags in the Features book in the [Meta Tags and SEO](/docs/features/meta-tags-seo) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-html-head?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/5.seo/2.twitter-og.md b/content/fa/examples/5.seo/2.twitter-og.md
deleted file mode 100644
index b4c9d183a8..0000000000
--- a/content/fa/examples/5.seo/2.twitter-og.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: SEO Twitter and Open Graph
-description: In this example we create a component to add our Twitter and Open Graph tags for when sharing on social media.
-category: seo
----
-
-# SEO Twitter and Open Graph
-
-In this example we create a component to add our Twitter and Open Graph tags for when sharing on social media.
-
----
-
-In this example:
-
-`components/SocialHead` uses the `head` property to show `meta` for both Twitter and Open Graph social sharing using props.
-
-`pages/mountains/_slug.vue` uses the `SocialHead` component passing the mountain's title, description and image as the values for props. It also uses the head tag to set the canonical link.
-
-`nuxtconfig.js` shows the head tag with default meta for social sharing for when the `SocialHead` component is not used as well as the canonical link.
-
-::alert{type="next"}
-Learn more about the options available for `head`, in the [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties).
-::
-
-::alert{type="next"}
-Learn more about meta tags in the Features book in the [Meta Tags and SEO](/docs/features/meta-tags-seo) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/seo/seo-twitter-og?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FSocialHead.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/5.seo/index.md b/content/fa/examples/5.seo/index.md
deleted file mode 100644
index 0e7fe7c885..0000000000
--- a/content/fa/examples/5.seo/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/seo/html-head
----
diff --git a/content/fa/examples/6.loading/1.customize-nuxt-loading.md b/content/fa/examples/6.loading/1.customize-nuxt-loading.md
deleted file mode 100644
index d618c63408..0000000000
--- a/content/fa/examples/6.loading/1.customize-nuxt-loading.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Customize Nuxt Loading
-description: Create a custom loading component to replace the default loader
-category: loading
----
-
-# Customize Nuxt Loading
-
-Create a custom loading component to replace the default loader
-
----
-
-In this example:
-
-`nuxt.config.js` contains the `loading` property which modifies the default loader
-
-`pages/loading.vue` programmatically starts the loader so we force the page to take 2 seconds to load
-
-::alert{type="next"}
-Learn more in the Features book in the [Loading](/docs/features/loading) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-nuxt-loading?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/6.loading/2.customize-loading-indicator.md b/content/fa/examples/6.loading/2.customize-loading-indicator.md
deleted file mode 100644
index 1d7a16c512..0000000000
--- a/content/fa/examples/6.loading/2.customize-loading-indicator.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Customize Nuxt Loading Indicator
-description: Customize the Nuxt Loading Indicator for when ssr is set to false
-category: loading
----
-
-# Customize Nuxt Loading Indicator
-
-Customize the Nuxt Loading Indicator for when ssr is set to false
-
----
-
-In this example:
-
-`nuxt.config.js` contains:
-
-- `ssr: false` so we only have client side rendering
-- `loadingIndicator` property to modify the default spinner
-
-::alert{type="next"}
-Learn more in the Features book in the [Loading](/docs/features/loading) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/customize-loading-indicator?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/6.loading/3.custom-loading-component.md b/content/fa/examples/6.loading/3.custom-loading-component.md
deleted file mode 100644
index 29dd82322e..0000000000
--- a/content/fa/examples/6.loading/3.custom-loading-component.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Custom Loading Component
-description: Create a custom loading component, modify the default loader as well as the spinner for spas
-category: loading
----
-
-# Custom Loading Component
-
-Create a custom loading component, modify the default loader as well as the spinner for spas
-
----
-
-In this example:
-
-`components/LoadingBar.vue` shows a custom loading spinner to use instead of the default loading bar.
-
-`nuxt.config.js` contains the `loading` property which imports the loading component
-
-`pages/loading.vue` programmatically starts the loader so we force the page to take 2 seconds to load
-
-::alert{type="next"}
-Learn more in the Features book in the [Loading](/docs/features/loading) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/loading/custom-loading-component?fontsize=14&hidenavigation=1&module=%2Fcomponents%2FLoadingBar.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/6.loading/index.md b/content/fa/examples/6.loading/index.md
deleted file mode 100644
index 0cf9712b9c..0000000000
--- a/content/fa/examples/6.loading/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/loading/customize-nuxt-loading
----
diff --git a/content/fa/examples/7.miscellaneous/1.layouts.md b/content/fa/examples/7.miscellaneous/1.layouts.md
deleted file mode 100644
index ac02aae09a..0000000000
--- a/content/fa/examples/7.miscellaneous/1.layouts.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Layouts
-description: Using layouts to show different ways to structure your page
-category: miscellaneous
----
-
-# Layouts
-
-Using layouts to show different ways to structure your page
-
----
-
-In this example:
-
-- `layouts/default.vue` is used in the home page as no layout property is defined
-- `layouts/auth.vue` is used in the /login page with the `layout` property set to 'auth'
-- `layouts/profile.vue` is used in the /profile page the `layout` property set to 'profile'
-
-::alert{type="next"}
-Learn more in the Concepts book in the [Views](/docs/concepts/views) chapter or in the Directory Structure book in the [Layouts](/docs/directory-structure/layouts) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/layouts?fontsize=14&hidenavigation=1&module=%2Fpages%2Fprofile.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/7.miscellaneous/2.lazy-loading-components.md b/content/fa/examples/7.miscellaneous/2.lazy-loading-components.md
deleted file mode 100644
index d7464acbf1..0000000000
--- a/content/fa/examples/7.miscellaneous/2.lazy-loading-components.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Lazy Loading Components
-description: Use fetch in your components to fetch data from an API as well as auto importing and lazy loading components
-category: miscellaneous
----
-
-# Lazy Loading Components
-
-Use fetch in your components to fetch data from an API as well as auto importing and lazy loading components
-
----
-
-In this example:
-
-`components/MountainsList.vue` uses fetch to fetch data from an API and uses:
-
-- `$fetchState.pending` to show a loading message when waiting for the data to load.
-- `$fetchState.error` to show an error message if the component does not load.
-
-`pages/index.vue` shows how to lazy load a component by prefixing it with the word "Lazy".
-
-`nuxt.config.js` shows `components: true` for auto importing components.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [Components](/docs/directory-structure/components) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/lazy-loading-components?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
diff --git a/content/fa/examples/7.miscellaneous/3.vuex-store.md b/content/fa/examples/7.miscellaneous/3.vuex-store.md
deleted file mode 100644
index 2bef9323f6..0000000000
--- a/content/fa/examples/7.miscellaneous/3.vuex-store.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Vuex Store
-description: In the first example we show how the store works using a todo app
-category: miscellaneous
----
-
-# Vuex Store
-
-In the first example we show how the store works using a todo app
-
----
-
-In this example:
-
-`store/todos.js` stores state and mutations for our todo list.
-
-`pages/index.vue` imports the `mapMutations` from the store and uses `computed` properties and `methods` to add and remove todos from the store.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [store](/docs/directory-structure/store) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/14_store?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
diff --git a/content/fa/examples/7.miscellaneous/4.helpers.md b/content/fa/examples/7.miscellaneous/4.helpers.md
deleted file mode 100644
index 26127a9703..0000000000
--- a/content/fa/examples/7.miscellaneous/4.helpers.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Nuxt Helpers
-description: Using the $nuxt helpers with $nuxt.isOnline, renderedOn, refresh(), onNuxtReady
-category: miscellaneous
----
-
-# Nuxt Helpers
-
-Using the $nuxt helpers with $nuxt.isOnline, renderedOn, refresh(), onNuxtReady
-
----
-
-In this example:
-
-`pages/index.vue` shows:
-
-- `$nuxt.isOnline` and `$nuxt.isOffline` - tells the user if they are online or offline.
-- `renderedOn` - prints a message telling us if the page is rendered on the server or client.
-- `$nuxt.refresh()` - refreshes data without refreshing the page.
-
-`plugins/nuxt-ready.client.js` shows:
-
-- `window.onNuxtReady` - logs a message to the console when Nuxt is ready.
-
-::alert{type="next"}
-Learn more in the Concepts book in the [Context and Helpers](/docs/concepts/context-helpers#helpers) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/miscellaneous/nuxt-helpers?fontsize=14&hidenavigation=1&theme=dark&view=editor"}
diff --git a/content/fa/examples/7.miscellaneous/index.md b/content/fa/examples/7.miscellaneous/index.md
deleted file mode 100644
index c1d6010992..0000000000
--- a/content/fa/examples/7.miscellaneous/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/miscellaneous/layouts
----
diff --git a/content/fa/examples/8.middlewares/1.router.md b/content/fa/examples/8.middlewares/1.router.md
deleted file mode 100644
index e421fb8db6..0000000000
--- a/content/fa/examples/8.middlewares/1.router.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Router Middleware
-description: Using router middleware to set a class to the body so we can then style differently depending on the route
-category: middleware
----
-
-# Router Middleware
-
-Using router middleware to set a class to the body so we can then style differently depending on the route
-
----
-
-In this example:
-
-`store/class.js` sets a class to the body.
-
-`middleware/class.js` uses router middleware to set a class before we enter the route.
-
-`components/Navigation.vue` changes the font size for the route with the name of `router-middleware`.
-
-`nuxt.config.js` contains the `router` property to activate the middleware.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#router-middleware) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/router-middleware?fontsize=14&hidenavigation=1&module=%2Fnuxt.config.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/8.middlewares/2.named.md b/content/fa/examples/8.middlewares/2.named.md
deleted file mode 100644
index bdaa5267a7..0000000000
--- a/content/fa/examples/8.middlewares/2.named.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Named Middleware
-description: Using named middleware to authenticate a user using the store and allow them to visit a page once authenticated
-category: middleware
----
-
-# Named Middleware
-
-Using named middleware to authenticate a user using the store and allow them to visit a page once authenticated
-
----
-
-In this example:
-
-`pages/named-middleware.vue` contains a `middleware` property with the value of `auth` which is called before a user enters the route.
-
-`middleware/auth.js` checks to see if the user is authenticated and if they aren't it redirects them to the auth page.
-
-`pages/auth.vue` uses the store to authenticate the user.
-
-`store/auth.js` sets the the user and password values and redirects the user.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#named-middleware) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/named-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fnamed-middleware.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/8.middlewares/3.anonymous.md b/content/fa/examples/8.middlewares/3.anonymous.md
deleted file mode 100644
index 7144bc3bf8..0000000000
--- a/content/fa/examples/8.middlewares/3.anonymous.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Anonymous Middleware
-description: Using anonymous middleware to show the analytics of how many times a user visits a page.
-category: middleware
----
-
-# Anonymous Middleware
-
-Using anonymous middleware to show the analytics of how many times a user visits a page.
-
----
-
-In this example:
-
-`pages/anonymous-middleware.vue` contains a middleware function which uses the store to call the increment mutation with results from the store displayed on the page.
-
-`store/analytics.js` sets the `pageVisits` to 0 and increments the visits every time the increment function is called.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [middleware](/docs/directory-structure/middleware#anonymous-middleware) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/middleware/anonymous-middleware?fontsize=14&hidenavigation=1&module=%2Fpages%2Fanonymous-middleware.vue&theme=dark&view=editor"}
diff --git a/content/fa/examples/8.middlewares/index.md b/content/fa/examples/8.middlewares/index.md
deleted file mode 100644
index 8858fae8f6..0000000000
--- a/content/fa/examples/8.middlewares/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/middlewares/router
----
diff --git a/content/fa/examples/9.plugins/1.vue.md b/content/fa/examples/9.plugins/1.vue.md
deleted file mode 100644
index 8ec7e007f1..0000000000
--- a/content/fa/examples/9.plugins/1.vue.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Vue Plugins
-description: In this example we show how to add a vue plugin to your application
-category: plugins
----
-
-# Vue Plugins
-
-In this example we show how to add a vue plugin to your application
-
----
-
-In this example:
-
-`plugins/vue-tooltip.js` imports our tooltip and tells Vue to use it.
-
-`pages/index.vue` uses our plugin.
-
-`nuxt.config.js` contains the `plugins` property to register our plugin and the `css` property to add our tooltip css.
-
-`package.json` shows our tooltip package has been installed.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#vue-plugins) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/vue-plugins?fontsize=14&hidenavigation=1&module=%2Fplugins%2Fvue-tooltip.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/9.plugins/2.client-only.md b/content/fa/examples/9.plugins/2.client-only.md
deleted file mode 100644
index 43a4375771..0000000000
--- a/content/fa/examples/9.plugins/2.client-only.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Client Only Plugins
-description: In this example we show how to use a plugin so that it is only available on the client side
-category: plugins
----
-
-# Client Only Plugins
-
-In this example we show how to use a plugin so that it is only available on the client side
-
----
-
-In this example:
-
-`plugins/client-only.client.js` uses the `window.alert()` function which is not available on server side.
-
-`nuxt.config.js` contains the `plugins` property which registers the plugin on the client side by adding the `.client` extension.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#client-or-server-side-only) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/client-only-plugins?fontsize=14&hidenavigation=1&module=%2Fplugins%2Fclient-only.client.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/9.plugins/3.external-packages.md b/content/fa/examples/9.plugins/3.external-packages.md
deleted file mode 100644
index 8e38ed44b1..0000000000
--- a/content/fa/examples/9.plugins/3.external-packages.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: External Packages Plugin
-description: In this example we show how to use a plugin with an external package - axios
-category: plugins
----
-
-# External Packages Plugin
-
-In this example we show how to use a plugin with an external package - axios
-
----
-
-In this example:
-
-`plugins/axios.js` intercepts the `$axios` call using the `onError()` function.
-
-`pages/index.vue` uses `$axios` to fetch our data from an API.
-
-`pages/mountains/_slug.vue` uses `$axios` to fetch our data from an API with the id coming from route params.
-
-`pages/404.vue` is the page that is called when there is an error.
-
-`nuxt.config.js` contains the `module` property and `plugin` property to register our module and plugin.
-
-`package.json` shows our module `@nuxtjs/axios` has been installed.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#external-packages) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/external-packages-plugin?fontsize=14&hidenavigation=1&module=%2Fplugins%2Faxios.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/9.plugins/4.custom.md b/content/fa/examples/9.plugins/4.custom.md
deleted file mode 100644
index c22d9572a3..0000000000
--- a/content/fa/examples/9.plugins/4.custom.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Custom Plugins
-description: In this example we show how you how you can create your own plugin
-category: plugins
----
-
-# Custom Plugins
-
-In this example we show how you how you can create your own plugin
-
----
-
-In this example:
-
-`plugins/hello.js` - logs a message to the console with a dynamic message.
-
-`store/index.js` - stores our dynamic message from our input.
-
-`pages/index.vue` uses the hello plugin to:
-
-- log a message to the console on mounted.
-- log a message to the console containing the value from our input.
-
-`plugins/nuxt-api.js` - fetches data from our API.
-
-`pages/api-plugin.vue` - uses our plugin to fetch and show the data from our API.
-
-`nuxt.config.js` - registers our plugins using the `plugins` property.
-
-::alert{type="next"}
-Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#inject-in-root--context) chapter.
-::
-
-:sandbox{src="https://codesandbox.io/embed/github/nuxtlabs/examples/tree/master/plugins/custom-plugins?fontsize=14&hidenavigation=1&module=%2Fplugins%2Fnuxt-api.js&theme=dark&view=editor"}
diff --git a/content/fa/examples/9.plugins/index.md b/content/fa/examples/9.plugins/index.md
deleted file mode 100644
index 83ec56748c..0000000000
--- a/content/fa/examples/9.plugins/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-navigation:
-  collapse: true
-  redirect: /examples/plugins/vue
----
diff --git a/content/fa/examples/index.md b/content/fa/examples/index.md
deleted file mode 100644
index c411463c84..0000000000
--- a/content/fa/examples/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-template:
-  nested: guide
-  self: guide
-title: Examples
-navigation:
-  exclusive: true
-  collapse: true
-  redirect: /examples/routing/hello-world
-layout.aside: true
----
diff --git a/content/fa/index.md b/content/fa/index.md
deleted file mode 100644
index 68cdb0f2a8..0000000000
--- a/content/fa/index.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-template: blank
-title: 'The Intuitive Vue Framework'
-description: 'Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful.'
-bgClass: 'bg-white'
----
-
-::home-hero
-#title
-The Intuitive Vue
        Framework
-
-#description
-Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful.
-
-#primary-button
-:app-button[39K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" }
-
-#secondary-button
-:app-button[Get started]{ to="/docs/get-started/installation" }
-::
-
-::home-learn-master
----
-category: Learn
----
-
-#title
-[Easy]{.text-primary} to learn. [Easy]{.text-primary} to master
-
-#description
-Learn everything you need to know, from beginner to master.
-
-#bottom
-:app-button[Start learning]{to="/docs/get-started/installation"}
-::
-
-::home-features
----
-category: Features
----
-
-::section-content-item
----
-title: Zero Configuration
-description: 'Start coding your app right away, Nuxt takes care of the rest.'
-image: /img/home/discover/dx/zero-config.svg
----
-::
-
-::section-content-item
----
-title: File-system Routing
-description: 'Automatic routing and code-splitting for every page.'
-image: /img/home/discover/dx/file-system-routing.svg
----
-::
-
-::section-content-item
----
-title: Rendering Modes
-description: 'Switch between static-site generation or on-demand server rendering.'
-image: /img/home/discover/dx/hybrid.svg
----
-::
-
-::section-content-item
----
-title: Data Fetching
-description: 'Fetch your content from any source in your Vue components, SSR ready.'
-image: /img/home/discover/dx/fetch.svg
----
-::
-
-::section-content-item
----
-title: Strong Conventions
-description: 'Efficient teamwork with a strong directory structure and conventions.'
-image: /img/home/discover/dx/conventions.svg
----
-::
-
-::section-content-item
----
-title: SEO Friendly
-description: 'Meta tag management and faster time-to-content for great indexing.'
-image: /img/home/discover/dx/seo.svg
----
-::
-
-::section-content-item
----
-title: Components Auto-import
-description: 'Use your components, Nuxt will import them with smart code-splitting.'
-image: /img/home/discover/dx/auto-inject.svg
----
-::
-
-::section-content-item
----
-title: Modules Ecosystem
-description: 'Extend your app with 160+ Nuxt modules and create your own.'
-image: /img/home/discover/dx/modular.svg
----
-::
-
-#title
-Intuitive [D]{.text-primary}eveloper E[x]{.text-primary}perience
-
-#description
-Nuxt is shipped with plenty of features to boost developer productivity and the end user experience.
-::
-
-::home-discover-partners
----
-category: Partners
----
-
-#title
-Sustainable [_Development_]{.text-primary}
-
-#description
-Nuxt development is carried out by passionate developers, but the amount of effort needed to maintain and develop new features is not sustainable without proper financial backing. We are thankful for our sponsors and partners, who help make Nuxt possible.
        
-
-#partners-card
-  ::home-partners-card
-  ---
-  icon: technology.svg
-  category: technology
-  ---
-  #title
-  Technology partners
-
-  #description
-  Technology partners offer services that empower Nuxt developers, such as CMS, Hosting, Database, and more.
-
-  #button
-  Discover our technology partners
-  ::
-
-  ::home-partners-card
-  ---
-  icon: agency.svg
-  category: agency
-  ---
-  #title
-  Agency partners
-
-  #description
-  Agency partners are trusted web and consulting agencies that can provide Nuxt development and support for your projects.
-
-  #button
-  Find a Nuxt expert
-  ::
-
-#bottom
-  :app-button[Become a partner]{href="mailto:partners@nuxtlabs.com"}
-::
-
-::home-learn-guides
----
-category: Learn
----
-
-::section-content-item
----
-title: Documentation
-description: 'Discover Nuxt concepts and find a complete API reference.'
-image: /img/home/learn/guides/gem-1.svg
-to: '/docs/get-started/installation'
-hoverClass: 'hover:bg-sky-darker'
----
-::
-
-::section-content-item
----
-title: Examples
-description: "Learn by examples produced by the community."
-image: /img/home/learn/guides/gem-2.svg
-to: '/examples'
-hoverClass: 'hover:bg-sky-darker'
----
-::
-
-::section-content-item
----
-title: Releases
-description: 'Find out what has changed before upgrading.'
-image: /img/home/learn/guides/gem-3.svg
-to: '/releases'
-hoverClass: 'hover:bg-sky-darker'
----
-::
-
-::section-content-item
----
-title: Master Courses
-description: 'Watch a complete series of videos to learn Nuxt with our partner Vue School.'
-image: /img/home/learn/guides/gem-4.svg
-to: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite'
-hoverClass: 'hover:bg-sky-darker'
----
-::
-
-#title
-Follow our [_Guides_]{.text-primary}
-
-#description
-From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
-::
-
-::home-explore
----
-category: Explore
----
-
-::section-content-item
----
-title: 'Deployments'
-description: 'Extend and automate your workflow by using deployments for your favorite tools.'
-image: '/img/home/explore/gem-explore-1.svg'
-to: '/deployments'
-hoverClass: 'hover:bg-sky-surface'
----
-::
-::section-content-item
----
-title: 'Modules'
-description: 'Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.'
-image: '/img/home/explore/gem-explore-2.svg'
-to: 'https://modules.nuxtjs.org'
-hoverClass: 'hover:bg-sky-surface'
----
-::
-::section-content-item
----
-title: 'Themes'
-description: 'See how a real world application is built using the Nuxt stack with the themes built by our partners.'
-image: '/img/home/explore/gem-explore-3.svg'
-to: '/themes'
-hoverClass: 'hover:bg-sky-surface'
----
-::
-
-#title
-Moving forward? So much to [_Explore_]{.text-primary}
-
-#description
-Discover powerful modules, integrate with your favorite providers and start quickly with themes.
-::
-
-::home-community
----
-category: Community
-announcementsCategory: Announcements
-eventsCategory: Events
-articleLinkTitle: Get infos
----
-
-#title
-Sharing is [Caring]{.text-sky-lighter}
-
-#description
-Discover articles from the framework team and community about Nuxt. Tips and tricks included!
-::
-
-::home-testimonials
----
-category: Community
----
-#title
-Testimonials
-
-#description
-Learn what the experts love about Nuxt.
-
-#testimonials
-  :::testimonials
-  ---
-  home: true
-  ---
-  :::
-::
diff --git a/content/fa/modules/index.md b/content/fa/modules/index.md
deleted file mode 100644
index 9b0800043a..0000000000
--- a/content/fa/modules/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-template: blank
-title: Modules
-layout:
-  fluid: true
-navigation: false
----
-
-::page-hero
-#title
-Modules
-
-#description
-Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.
-
-#bottom
-  :modules-bottom-hero[Contribute on GitHub]
-::
-
-:modules-listing
diff --git a/content/fa/partners/index.md b/content/fa/partners/index.md
deleted file mode 100644
index fa3a0380a8..0000000000
--- a/content/fa/partners/index.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-template: blank
-title: Partners
-description: "Nuxt is an MIT licensed open source project and free to use. However, the maintenance effort is not sustainable without proper financial backing."
----
-
-::page-hero
-#title
-Partners
-
-#description
-Find your perfect match. Get help from an agency partner or find a technology provider.
-
-#bottom
-  :partners-bottom-hero
-::
-
-::partners-section
----
-category: technology
-icon: 'technology.svg'
----
-
-#category-title
-Technology
-::
-
-::partners-section
----
-category: agency
-icon: 'agency.svg'
----
-
-#category-title
-Agency
-::
diff --git a/content/fa/releases/index.md b/content/fa/releases/index.md
deleted file mode 100644
index 9cd565f2c8..0000000000
--- a/content/fa/releases/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-template: releases
-title: Release Notes
-description: "Discover all the release notes for the Nuxt framework"
-navigation: false
----
diff --git a/content/fa/showcases/index.md b/content/fa/showcases/index.md
deleted file mode 100644
index 2a2b4b0dc0..0000000000
--- a/content/fa/showcases/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-template: blank
-title: 'Showcases'
-description: 'Discover our selection of websites built with Nuxt.'
-layout:
-  fluid: true
----
-
-::page-hero{descriptionFullWidth}
-#title
-Showcases
-
-#description
-  Discover our selection of websites built with Nuxt. This collection is powered by [VueTelescope](https://vuetelescope.com).
-
-#bottomDesktop
-  Try out the browser extensions:
-  :showcases-bottom-hero
-::
-
-::showcases-listing
----
-id: 505
----
-::
diff --git a/content/fa/sponsors/index.md b/content/fa/sponsors/index.md
deleted file mode 100644
index f1b0e6f323..0000000000
--- a/content/fa/sponsors/index.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-template: blank
-title: 'Sponsors'
-description: "Nuxt is an MIT licensed open source project and free to use. However, the maintenance effort is not sustainable without proper financial backing."
-layout:
-  fluid: true
----
-
-::page-hero
-#title
-Sponsors
-
-#description
-Nuxt solves front-end development issues, using Vue.js, Node.js and a suite of other open source tools such as Vite, Webpack, Babel and PostCSS.
-If you use Nuxt in your daily work and feel that it has made your life easier, please consider backing us.
-If you run a business and is using Nuxt in a revenue-generating product, it makes business sense to sponsor Nuxt development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the community and makes it easier to attract Nuxt developers.
-
-#bottom
-  :::sponsors-bottom-hero
-  ---
-  github: Sponsor on GitHub
-  opencollective: Sponsor on Open Collective
-  ---
-  :::
-::
-
-:sustainability-section
diff --git a/content/fa/support/index.md b/content/fa/support/index.md
deleted file mode 100644
index e14e90871a..0000000000
--- a/content/fa/support/index.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-template: blank
-title: 'Enterprise Support'
-description: 'Get technical support, report bugs or contribute to the Nuxt framework development.'
-layout:
-  fluid: true
-navigation: false
----
-::page-hero
-#title
-Enterprise Support
-
-#description
-Get technical support, report bugs or contribute to the Nuxt framework development.
-::
-
-::support-container
-#support-cards-list
-  ::support-card
-  ---
-  image: 'technical'
-  button:
-    text: 'Contact us'
-    url: 'mailto:support@nuxtlabs.com'
-  ---
-  #title
-  Technical support
-  #description
-  Contact us to book a slot for a private consulting session or audit of your project.
-  ::
-
-  ::support-card
-  ---
-  image: 'report'
-  button:
-    text: 'Create an issue'
-    url: 'https://github.com/nuxt/nuxt.js/issues/new?assignees=&labels=bug-report&template=bug-report.md&title='
-  ---
-  #title
-  Report a bug
-  #description
-  If anything isn't working like it's supposed to, open an issue on Github.
-  ::
-
-  ::support-card
-  ---
-  image: 'suggest'
-  button:
-    text: 'Suggest an idea'
-    url: 'https://github.com/nuxt/nuxt.js/issues/new?assignees=&labels=feature-request&template=feature-request.md&title='
-  ---
-  #title
-  Suggest a new feature or improvement
-  #description
-  Thanks to our community contributions, Nuxt keeps evolving with continuous features improvements. If you have an idea, feel free to propose it on Github Discussions.
-  ::
-
-  ::support-card
-  ---
-  image: 'contribute'
-  button:
-    text: 'Contribute'
-    url: '/contribution-guide'
-  ---
-  #title
-  Contribute
-  #description
-  Start contributing to the framework development, documentation, or testing.
-  ::
-::
diff --git a/content/fa/teams/index.md b/content/fa/teams/index.md
deleted file mode 100644
index 46bfc43dbe..0000000000
--- a/content/fa/teams/index.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-template: blank
-title: 'Teams'
-description: 'The development of Nuxt is led by an international team. Our committed team works every day to move Nuxt forward.'
-layout:
-  fluid: true
-navigation: false
----
-
-::page-hero
-#title
-Teams
-
-#description
-The development of Nuxt and its ecosystem is led by an international team. Our committed team works every day to bring Nuxt forward.
-::
-
-::team-section
----
-teamName: framework
----
-
-#title
-[Framework]{.text-primary}
-::
-
-::team-section
----
-teamName: community
----
-#title
-[Community]{.text-primary}
-
-#description
-From contributors to advocates, the community is made of members with different horizons and skills. We are happy to see new members every day and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core).
-::
diff --git a/content/fa/testimonials/index.md b/content/fa/testimonials/index.md
deleted file mode 100644
index c9f660f9df..0000000000
--- a/content/fa/testimonials/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-template: blog
-title: Testimonials
-description: Learn from experts what they love about Nuxt
----
-
-:testimonials
diff --git a/content/fa/themes/index.md b/content/fa/themes/index.md
deleted file mode 100644
index b7c683442e..0000000000
--- a/content/fa/themes/index.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-template: blog
-title: Themes
-description: 'See how a real world application is built using the Nuxt stack with the themes built by our partners.'
----
-::themes-list
----
-themes:
-  one:
-    title: Nuxt Argon Dashboard PRO
-    description: Nuxt Argon Dashboard PRO is built with over 200 individual components, giving you the freedom of choosing and combining.
-    image: /img/themes/argon_dashboard_pro.jpg
-    slug: one
-    price: $99
-    href: https://www.creative-tim.com/product/nuxt-argon-dashboard-pro?partner=120213
-  two:
-    title: Nuxt Argon Dashboard PRO Laravel
-    description: "All the functionality of a lightweight CMS out of the box, built using two of the most popular frameworks today: Nuxt and Laravel."
-    image: /img/themes/argon_dashboard_pro_laravel.jpg
-    slug: two
-    price: $149
-    href: https://www.creative-tim.com/product/nuxt-argon-dashboard-pro-laravel?partner=120213
-  three:
-    title: Nuxt Now UI Kit
-    description: A premium responsive Bootstrap 4 kit provided by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 1000+ elements and 11 templates.
-    image: /img/themes/nuxt_now_ui_kit.jpg
-    slug: three
-    price: $89
-    href: https://www.creative-tim.com/product/nuxt-now-ui-kit-pro?partner=120213
-  four:
-    title: Nuxt Black Dashboard PRO
-    description: "A beautiful Bootstrap 4 Admin Dashboard that comes in 2 versions: Dark and Light Mode."
-    image: /img/themes/nuxt_black_dashboard_pro.jpg
-    slug: four
-    price: $79
-    href: https://www.creative-tim.com/product/nuxt-black-dashboard-pro?partner=120213
-  five:
-    title: Nuxt Scutum Dashboard
-    description: Scutum Admin is a professional HTML5/CSS3 Material Design template based on UIkit Framework (v3) and Nuxt.
-    image: /img/themes/scutum_dashboard.jpg
-    slug: five
-    price: $26
-    href: https://1.envato.market/scutum-nuxt
----
-::
diff --git a/content/fa/tutorials/0.creating-a-nuxt-module.md b/content/fa/tutorials/0.creating-a-nuxt-module.md
deleted file mode 100644
index 5d76ce4657..0000000000
--- a/content/fa/tutorials/0.creating-a-nuxt-module.md
+++ /dev/null
@@ -1,433 +0,0 @@
----
-template: post
-title: Creating a Nuxt Module
-description: Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Let's create a module that uses ngrok to get a Public URL that you can share while working in Development.
-imgUrl: blog/creating-nuxt-module/main.jpeg
-imgCredits: Stephen Meyers
-date: 2020-11-27
-authors:
-  - name: "Debbie O'Brien"
-    avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg
-    link: https://twitter.com/debs_obrien
-tags:
-  - Nuxt
-  - Modules
-  - ngrok
-category: Tutorial
----
-
-Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Nuxt modules can be incorporated into npm packages. This makes them easy to reuse across projects and to share with the community.
-
-Have you ever been working on something and ran into a bug or just needed to get approval from someone. There are a few options to achieve this such as deploying your application or creating a [CodeSandbox](https://codesandbox.io). But another option is to share your localhost so that as you make changes live in dev mode, it can be seen by anyone who has the link, no matter where they are. We can use [ngrok](https://www.npmjs.com/package/ngrok) to achieve this.
-
-Let's create a module that uses [ngrok](https://www.npmjs.com/package/ngrok) so that you get a public URL which can be seen in the Nuxt CLI when you run the dev command.
-
-::video-player
----
-sources:
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/ngrok-blog_jqc1di.webm
-  type: video/webm
-- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/ngrok-blog_jqc1di.mp4
-  type: video/mp4
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/ngrok-blog_jqc1di.ogv
-  type: video/ogg
-poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/ngrok-blog_jqc1di.jpg
----
-::
-
-This module has already been created and deployed and you can use it without creating it yourself by installing the [@nuxtjs/ngrok module](https://ngrok.nuxtjs.org). You can also jump straight into the code by checking out our [CodeSandbox Demo](/examples/modules/local). However if you are interested in seeing how it was created or want to create your own module then continue reading.
-
-- [How does it work?](#how-does-it-work)
-- [Let's get started](#lets-get-started)
-- [Creating our module](#creating-our-module)
-- [Investigating nuxt.options](#investigating-nuxtoptions)
-- [Start the ngrok tunnel when the Nuxt server is listening](#start-the-ngrok-tunnel-when-the-nuxt-server-is-listening)
-- [Adding an authtoken](#adding-an-authtoken)
-- [ngrok in action](#ngrok-in-action)
-- [Add our URL to the Nuxt CLI](#add-our-url-to-the-nuxt-cli)
-- [Closing our ngrok](#closing-our-ngrok)
-- [Full code example](#full-code-example)
-- [Conclusion](#conclusion)
-- [Further exploration](#further-exploration)
-
-## How does it work?
-
-ngrok will create a http-https-tcp tunnel. Check out the [ngrok npm package](https://www.npmjs.com/package/ngrok) for more details. We need to be able to connect to an ngrok port when the Nuxt server is listening. Once we get a public URL we want to print it to the Nuxt CLI so we can easily click it to open and share it.
-
-![nuxt cli](/blog/creating-nuxt-module/nuxt-cli.png)
-
-## Let's get started
-
-To use a custom module within our app we need to create a modules folder if you haven't already got one. Inside it let's create a folder called ngrok and add an index.js file into it. You can use your editor to create these folders and files or use the commands below.
-
-```bash
-mkdir modules modules/ngrok
-touch modules/ngrok/index.js
-```
-
-In order to use our module we will need to register it by adding it in the [buildModules](/docs/directory-structure/modules/#buildmodules) section of our `nuxt.config.js` file. BuildModules are only imported during development and build time which is perfect for our module as we only need it to work in dev mode.
-
-```js{}[nuxt.config.js]
-export default {
-  buildModules: ['~/modules/ngrok']
-}
-```
-
-As we will use the [ngrok npm package](https://www.npmjs.com/package/ngrok) we will need to install as a dev dependency.
-
-::code-group
-```bash [Yarn]
-yarn add --dev ngrok
-```
-```bash [NPM]
-npm install --dev ngrok
-```
-::
-
-## Creating our module
-
-Now that we have installed and registered everything we can now go ahead and create our module. The first thing we need to do is to import ngrok from our `node_modules` folder into our `index.js` file of our ngrok module.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-```
-
-We can then create a function using export default which allows us to use this function in another file.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {}
-```
-
-Inside this function we can start by destructuring nuxt and making it equal to `this`, which means we won't have to write `this.nuxt`each time we refer to nuxt.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  const { nuxt } = this
-
-  // My nuxt module code goes here
-}
-```
-
-## Investigating nuxt.options
-
-We only want to run ngrok in dev mode and not in production so how would we do that?
-
-First let's log to our console `nuxt.options` so we can see all the nuxt options that are available to us. This is the `nuxt.config.js` mixed with the default values.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  const { nuxt } = this
-
-  console.log(nuxt.options)
-
-  // My nuxt module code goes here
-}
-```
-
-There are a lot of values in here. What we want is a way to see when we are in dev mode and you will see from the console that in our `nuxt.options` we have `dev` set to `true`. That means we can add an if statement to check if dev is false and return if we are not in dev mode.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  const { nuxt } = this
-
-  // Don't start ngrok in production
-  if (nuxt.options.dev === false) {
-    return
-  }
-
-  // More coming below :)
-}
-```
-
-## Start the ngrok tunnel when the Nuxt server is listening
-
-We want to start the ngrok tunnel when the nuxt sever is listening. To do that we need a way to hook into Nuxt and listen for a port so we can connect. That's where Nuxt hooks come in. [Nuxt hooks](/docs/internals-glossary/internals-nuxt) are listeners to Nuxt events. We will use the `nuxt.hook()` passing in the value of `listen` followed by an async function. In this function we need to pass in the server, followed by the port.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  // [...]
-
-  // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks
-  nuxt.hook('listen', async function (server, { port }) {
-
-  })
-}
-```
-
-We then await the ngrok connection passing in the value of port and assigning it to our url, which is defined outside the function. We can now run a `console.log` inside our function to see the result of our url.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  // [...]
-
-  let url
-
-  // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks
-  nuxt.hook('listen', async function (server, { port }) {
-
-    url = await ngrok.connect(port)
-
-    // We have our public url here
-    console.log(url)
-  })
-}
-```
-
-Now if you run the dev command and open up your console you will see your url from ngrok. Opening that URL will show you your website in dev mode.
-
-## Adding an authtoken
-
-Although this should work we might run into some issues regarding max connections and other limitations and therefore it is best to setup up an [authtoken](https://ngrok.com/) which can be done for free from the ngrok website.
-
-Once we have our token we can set up our `.env` file and add our token.
-
-```bash{}[.env]
-NGROK_TOKEN=my-authtoken-from-ngrok
-```
-
-::alert{type="warning"}
-Don't forget to make sure your `.env`file has been added to your `.gitignore`.
-::
-
-We can now set a const of `options` equal to the options from the ngrok property of our `nuxt.config.js` or equal to an empty object in case we don't define any options. We also add a const of `token` equal to the `NGROK_TOKEN` from our `.env` file or `options.token` which is the same as `nuxt.options.ngrok.token`, in case this value was defined directly in our `ngrok` property in the our `nuxt.config.js`.
-
-We can then await the ngrok authtoken passing in the token value.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  // [...]
-
-  // Read ngrok property defined in nuxt.config.js
-  const options = nuxt.options.ngrok || {}
-  const token = process.env.NGROK_TOKEN || options.token
-
-  // [...]
-}
-```
-
-We can then await the ngrok authtoken passing in the value of `token` which we have defined above.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  // [...]
-
-  // Read ngrok property defined in nuxt.config.js
-  const options = nuxt.options.ngrok || {}
-  const token = process.env.NGROK_TOKEN || options.token
-
-  // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks
-  nuxt.hook('listen', async function (server, { port }) {
-
-    if(token){
-      await ngrok.authtoken(token)
-    }
-
-    url = await ngrok.connect(port)
-
-    // We have our public url here
-    console.log(url)
-  })
-}
-```
-
-## ngrok in action
-
-But is it really working? If I change anything in development will they see it on that URL? Let's take a look. If we go to our index page and add some text. For example "URL from ngrok:" you will now see that change in your [localhost](http://localhost) and also in the url from ngrok that you printed to console. How cool.
-
-```html{}[pages/index.vue]
-
        URL from ngrok:
        
-```
-
-Let's add our url from ngrok to our vue template. We can get access to our ngrok url by using the publicRuntimeConfig which is then accessible using `$config` from the context. We do this by assigning our url to the to the `nuxt.options.publicRuntimeConfig.ngrok`. We can now remove our `console.log`as this is no longer needed.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-
-export default function () {
-  // [...]
-
-  // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks
-  nuxt.hook('listen', async function (server, { port }) {
-
-    if(token){
-      await ngrok.authtoken(token)
-    }
-
-    url = await ngrok.connect(port)
-
-    // Add the public url to the public runtimeConfig
-    nuxt.options.publicRuntimeConfig.ngrok = { url }
-
-  })
-}
-```
-
-We can now access this in our Vue template using `$config`and if we wrap it in a link tag then it will be clickable.
-
-```html{}[modules/ngrok/index.js]
-
-```
-
-Let's run the dev server and now you should see your URL from ngrok printed out on the page. How cool.
-
-## Add our URL to the Nuxt CLI
-
-In general we probably won't want to print the URL onto the page. It would be much better if we could add it to the Nuxt CLI so we can see it every time we run the dev command and be able to click and open it from there. We can then share that link with whoever we want without having to expose it in our .vue file or in our console.
-
-We can access the CLI through the `nuxt.options`. You can see this by logging the `nuxt.options`to the console and searching for cli. If you do you will see that we have a [`badgeMessages`](/docs/configuration-glossary/configuration-cli#badgemessages) property. This is the green box that shows us the messages of Environment, Rendering and Target as well as what port the app is listening on.
-
-We can use the `push()` method to push our URL to the Nuxt CLI.
-
-```js{}[modules/ngrok/index.js]
-// [...]
-nuxt.hook('listen', async function (server, { port }) {
-    // [...]
-
-    // Add the public url to the Nuxt box in the CLI
-    nuxt.options.cli.badgeMessages.push(url)
-
-  })
-})
-```
-
-Now when we run the dev command our url appears in the green box. We can of course improve this further by adding some text before the URL so our users know what it is.
-
-```js{}[modules/ngrok/index.js]
-// [...]
-nuxt.hook('listen', async function (server, { port }) {
-    // [...]
-
-    // Add the public url to the Nuxt box in the CLI
-    nuxt.options.cli.badgeMessages.push(`Public URL: ${url}`)
-
-  })
-})
-```
-
-We can also change the color of this link and underline it by using a package called [chalk](https://www.npmjs.com/package/chalk) which allows us to style our terminal.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-import chalk from 'chalk'
-
-// [...]
-```
-
-We can then use `chalk.underline.yellow` or any other color from the chalk package.
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-import chalk from 'chalk'
-// [...]
-
-  nuxt.hook('listen', async function (server, { port }) {
-    // [...]
-
-    // Change the color using chalk
-    nuxt.options.cli.badgeMessages.push(
-      `Public URL: ${chalk.underline.yellow(url)}`
-    )
-  })
-}
-```
-
-You will now see when running the dev command that we have our Public URL with the link underlined and in a yellow color. This can then be clicked and opened and of course shared with anyone, anywhere in the world so they can watch your changes in dev mode live.
-
-![nuxt cli](/blog/creating-nuxt-module/nuxt-cli.png)
-
-## Closing our ngrok
-
-We should always close our ngrok connection when we close Nuxt. To do this we can hook into Nuxt and look for when it will close and run a function to disconnect ngrok.
-
-```js{}[modules/ngrok/index.js]
-// [...]
-export default function () {
-  // [...]
-
-  nuxt.hook('close', function () {
-    url && ngrok.disconnect()
-  })
-}
-```
-
-## Full code example
-
-```js{}[modules/ngrok/index.js]
-import ngrok from 'ngrok'
-import chalk from 'chalk'
-
-export default function () {
-  const { nuxt } = this
-
-  // Don't start ngrok in production
-  if (nuxt.options.dev === false) {
-    return
-  }
-
-  // Read ngrok property defined in nuxt.config.js
-  const options = nuxt.options.ngrok || {}
-  const token = process.env.NGROK_TOKEN || options.token
-
-  // https://nuxtjs.org/docs/internals-glossary/internals-nuxt#hooks
-  nuxt.hook('listen', async function (server, { port }) {
-
-    if(token){
-      await ngrok.authtoken(token)
-    }
-
-
-    url = await ngrok.connect(port)
-
-    // Add the public url to the public runtimeConfig
-    nuxt.options.publicRuntimeConfig.ngrok = { url }
-
-    // Add the public url to the Nuxt box in the CLI
-    nuxt.options.cli.badgeMessages.push(
-    `Public URL: ${chalk.underline.yellow(url)}`
-    )
-
-  })
-
-  nuxt.hook('close', function () {
-    url && ngrok.disconnect()
-  })
-}
-```
-
-## Conclusion
-
-We have just created our local module which we can use in our project. This sometimes is enough but sometimes we want to share our module across projects or even better, with the Nuxt Community. To do this we need to create our module using a module template and publish it to npm.
-
-As of today we are working on improving this template to make it more user friendly. All modules are created using typescript and should contain tests, docs and an example.
-
-## Further exploration
-
-::alert{type="next"}
-Check our our [CodeSandbox example](/examples/modules/local) for this module.
-::
-
-::alert{type="next"}
-Check out our published [ngrok module](https://ngrok.nuxtjs.org/).
-::
-
-::alert{type="next"}
-Check out our list of [Nuxt modules](https://modules.nuxtjs.org/).
-::
diff --git a/content/fa/tutorials/1.creating-blog-with-nuxt-content.md b/content/fa/tutorials/1.creating-blog-with-nuxt-content.md
deleted file mode 100644
index 61840e5e20..0000000000
--- a/content/fa/tutorials/1.creating-blog-with-nuxt-content.md
+++ /dev/null
@@ -1,935 +0,0 @@
----
-template: post
-title: 'Create a Blog with Nuxt Content'
-description: 'The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.'
-imgUrl: blog/creating-blog-with-nuxt-content/main.jpeg
-imgCredits: M
-imgCreditsUrl: https://unsplash.com/@lamerbrain
-date: 2020-07-02
-authors:
-  - name: "Debbie O'Brien"
-    avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg
-    link: https://twitter.com/debs_obrien
-tags:
-  - Nuxt
-  - Content
-  - Markdown
-category: Tutorial
----
-
-The [content module](https://content.nuxtjs.org) is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.
-
-::video-player
----
-sources:
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/demo-blog-content_shk6kw.webm
-  type: video/webm
-- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/demo-blog-content_shk6kw.mp4
-  type: video/mp4
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/demo-blog-content_shk6kw.ogv
-  type: video/ogg
-poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/demo-blog-content_shk6kw.jpg
----
-::
-
-
        
-  View demo /
-  Source code
-
        
-
-- [Getting started](#getting-started)
-  - [Installation](#installation)
-  - [Let's create our markdown page](#lets-create-our-markdown-page)
-  - [Displaying your content](#displaying-your-content)
-  - [Default Injected variables](#default-injected-variables)
-  - [Custom Injected variables](#custom-injected-variables)
-  - [Styling our markdown content](#styling-our-markdown-content)
-  - [Adding an icon to our headings anchor](#adding-an-icon-to-our-headings-anchor)
-  - [Add a table of contents](#add-a-table-of-contents)
-  - [Use HTML in your markdown files](#use-html-in-your-markdown-files)
-  - [Adding a Vue component](#adding-a-vue-component)
-  - [Adding an Author component with props](#adding-an-author-component-with-props)
-  - [Adding a code block to your post](#adding-a-code-block-to-your-post)
-  - [Creating a previous and next component](#creating-a-previous-and-next-component)
-  - [Working with the API](#working-with-the-api)
-  - [List all the blog posts](#list-all-the-blog-posts)
-  - [Using the where query to create an Author page](#using-the-where-query-to-create-an-author-page)
-  - [Add a search field](#add-a-search-field)
-- [Live editing our content](#live-editing-our-content)
-- [Generating our content](#generating-our-content)
-- [Conclusion](#conclusion)
-- [Further Reading](#further-reading)
-
-## Getting started
-
-### Installation
-
-To get started with content module we will first need to install the module using npm or yarn.
-
-::code-group
-```bash [Yarn]
-yarn add @nuxt/content
-```
-```bash [NPM]
-npm install @nuxt/content
-```
-::
-
-Then we can add it to our modules property inside our nuxt.config file.
-
-```js{}[nuxt.config.js]
-export default {
-  modules: ['@nuxt/content']
-}
-```
-
-::alert{type="info"}
-If you have created a new project with `create-nuxt-app` you can choose to add the content module and therefore it will be installed for you.
-::
-
-### Let's create our markdown page
-
-The content module works by reading the files in our `content/` directory.
-
-```bash
-mkdir content
-```
-
-::alert{type="info"}
-If you have created your project with `create-nuxt-app`, the `content/` directory will be already created.
-::
-
-Let's create an `articles/` directory where we can add the articles for our blog.
-
-```bash
-mkdir content/articles
-```
-
-The content module can parse markdown, csv, yaml, json, json5 or xml. Let's create our first article with a markdown file:
-
-```bash
-touch content/articles/my-first-blog-post.md
-```
-
-We can now add a title and text for our blog post:
-
-```markdown
-# My first blog post
-
-Welcome to my first blog post using content module
-```
-
-::alert{type="info"}
-In markdown we create a `
        ` title by using `#`. Make sure you leave a space between it and your blog title. For more info on writing in markdown see the [basic syntax guide](https://www.markdownguide.org/basic-syntax).
-::
-
-### Displaying your content
-
-To display our content in our page, we can use a [dynamic page](/docs/directory-structure/pages#dynamic-pages) by prefixing the page with an underscore(`_`). By creating a page component named `_slug.vue` inside our blog folder, we are able to use the `params.slug` variable provided by vue router to get the name of each article.
-
-```bash
-touch pages/blog/_slug.vue
-```
-
-Then we can use `asyncData` in our page component to fetch our article content before the page has been rendered. We can have access to our content through the context by using the variable `$content`. As we want to fetch a dynamic page we also need to know which article to fetch with `params.slug` which is available to us through [the context](/docs/internals-glossary/context).
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-Inside our `asyncData` function we create a variable named `article` and fetch our content using the `await` followed by `$content`. We need to pass into `$content` what we want to fetch, which in our case is the article folder followed by the slug, which we get from our URL params. We then chain the fetch method to the end and return the article which will contain the result of our fetch.
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-To display our content we are using the `` component by passing in the variable we returned into the `document` prop. In this example we have wrapped it in a HTML article tag as it is better semantic HTML but you can use a div or another HTML tag if you prefer.
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-We can now run our dev server and go to the route [http://localhost:3000/blog/my-first-blog-post](http://localhost:3000/blog/my-first-blog-post) and we should see our content from our markdown file.
-
-![content from markdown](/blog/creating-blog-with-nuxt-content/get-started-with-nuxt-content.png)
-
-### Default Injected variables
-
-The nuxt content module gives us access to injected variables that we can access and show in our template. Let's take a look at the default variables that are injected into our document:
-
-- **body**: body text
-- **dir**: directory
-- **extension**: file extension (.md in this example)
-- **path**: the file path
-- **slug**: the file slug
-- **toc**: an array containing our table of contents
-- **createdAt**: the file creation date
-- **updatedAt**: the date of the last file update
-
-We can access all these variables by using the `article` variable that we created earlier. `article` is an object that contains all these extra injected variables that we have access to. Let's inspect them by printing it out using a `
        ` tag.
-
-```html{}[pages/blog/_slug.vue]
-
         {{ article }} 
        
-```
-
-Now on our page we can see we have an object with a variable property which is an empty array and a body variable which has our h1 and p tag as well as some other info that we will look at later. If we scroll down you will see we have all the other variables that we have access to.
-
-```bash
-"dir": "/articles",
-"path": "/articles/my-first-blog-post",
-"extension": ".md",
-"slug": "my-first-blog-post",
-"createdAt": "2020-06-22T10:58:51.640Z",
-"updatedAt": "2020-06-22T10:59:27.863Z"
-```
-
-This means we can access these variables by using our article variable followed by the what we want to use. For example `article.updatedAt` will give us the date the post was last updated.
-
-```html{}[pages/blog/_slug.vue]
-
        Post last updated: {{ article.updatedAt }}
        
-```
-
-As you can see the date is not that human friendly. We can format this by creating a method that takes in a date and returns a new date with the options of year, month and day formatted to how we want.
-
-```js{}[pages/blog/_slug.vue]
-methods: {
-    formatDate(date) {
-      const options = { year: 'numeric', month: 'long', day: 'numeric' }
-      return new Date(date).toLocaleDateString('en', options)
-    }
- }
-```
-
-And then in our template we can use the formatDate method passing in the date we get from our content which will return a nicely formatted date for us.
-
-```html{}[pages/blog/_slug.vue]
-
        Article last updated: {{ formatDate(article.updatedAt) }}
        
-```
-
-### Custom Injected variables
-
-We can also add custom injected variables by adding a block of YAML front matter to our markdown file. It must be at the top the file and must be a valid YAML format set between three triple dashed lines. This is useful for adding SEO variables such as title, description and image of your article.
-
-```yaml{}[content/articles/my-first-blog-post.md]
----
-title: My first Blog Post
-description: Learning how to use @nuxt/content to create a blog
-img: first-blog-post.jpg
-alt: my first blog post
----
-
-```
-
-We now have a title, description, img and alt variable that we can access to by using our `article` object variable.
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-::alert{type="info"}
-In order to render images included in the YAML of the article we either need to place them in the static folder or use the syntax: `` :src="require(`~/assets/images/${article.img}`)" ``.
-
-Images included in the article content should always be placed **in the static folder** as @nuxt/content is independent of Webpack. The static folder doesn't go through webpack whereas the assets folder does.
-::
-
-### Styling our markdown content
-
-If we inspect this page we can see that everything written inside our markdown is wrapped inside a div with a class of nuxt-content. That means we can easily add styles to all our elements coming from our markdown file by wrapping them in the nuxt-content class.
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-All other tags that come from our YAML front matter can be styled as normal either using [TailwindCSS](https://tailwindcss.com/) or adding css in the style tag.
-
-To use scoped styles with the nuxt-content class you need to use a deep selector: `/deep/`, `::v-deep` or `>>>`
-
-Our markdown tags are converted into the correct tags which means we now have two `
        ` tags. We should now remove the one from our markdown file.
-
-### Adding an icon to our headings anchor
-
-Notice that inside the `
        ` tag there is an `` tag with a `href` that includes an anchor to link to itself and a `span` tag inside it with `icon` and `icon-link` classes. This is useful for linking to that section of the page. The links in the headings are empty and therefore hidden so let's add a style to them. Using the icon classes we can add an svg as a background image for our icon. You will have to first add the svg to your assets folder. In this example I have added it to an svg folder and I have taken the icon from [Steve Schoger's Hero Icons.](https://github.com/sschoger/heroicons-ui)
-
-```css{}[pages/blog/_slug.vue]
-.icon.icon-link {
-  background-image: url('~assets/svg/icon-hashtag.svg');
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  background-size: 20px 20px;
-}
-```
-
-### Add a table of contents
-
-The generated `toc` variable allows us to add a table of contents to our blog post. Let's add some headings to our blog post.
-
-```markdown
-## This is a heading
-
-This is some more info
-
-## This is another heading
-
-This is some more info
-```
-
-Now we can see these new headings inside the `toc` array with an id, a depth and the text. The depth value refer to the heading tag value, so `
        ` value is 2, `
        ` value is 3, etc.
-
-```markdown{}[content/articles/my-first-blog-post.md]
-## This is a heading
-
-This is some more info
-
-### This is a sub heading
-
-This is some more info
-
-### This is another sub heading
-
-This is some more info
-
-## This is another heading
-
-This is some more info
-```
-
-As we have access to the `toc` id and text we can loop over these and print each one out and use the `` component to link to the id of the section we want to link to.
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-Now the ToC links are working and clicking on one will bring us to the correct part of the document. The content module automatically adds an id and a link to each heading. If we inspect one of the headings from our markdown file in our dev tools we will see our `
        ` tag has an id. This is the same id that is found in the `toc` which is basically how the `toc` can link to the correct heading.
-
-We can improve this further by using dynamic classes to style the heading classes based on the depth of the heading which we can add to our nuxt-link tag. If the link has a depth of 2 add a padding on the y axis and if the the depth is 3 add a margin left and a padding bottom. Here we are using [TailwindCSS](https://tailwindcss.com/) classes but feel free to use custom class names and styles.
-
-```html{}[pages/blog/_slug.vue]
-:class="{ 'py-2': link.depth === 2, 'ml-2 pb-2': link.depth === 3 }"
-```
-
-### Use HTML in your markdown files
-
-Sometimes we might want to add HTML to our markdown files. Let's add a div with some classes so it has a background color of blue with white text, some padding and a margin bottom.
-
-```html{}[content/articles/my-first-blog-post.md]
-
        
-  This is HTML inside markdown that has a class of note
-
        
-```
-
-### Adding a Vue component
-
-We can also add Vue components inside our markdown files. This means if we are re-using components such as an info or alert box, we can create one with the styles we need and pass in the text as a slot.
-
-We can now add components to our application by setting the property `components` to `true` in our `nuxt.config file`. (since v2.13)
-
-```js{}[nuxt.config.js]
-export default {
-  components: true
-}
-```
-
-Auto importing components will not work for `` unless we globally register them by adding a global folder inside the components folder.
-
-```bash
-mkdir components/global
-```
-
-We can then create our InfoBox component inside this folder.
-
-```html{}[components/global/InfoBox.vue]
-
-```
-
-Then in our markdown these components will be available without having to import them.
-
-```markdown{}[content/articles/my-first-blog-post.md]
-
-  
-
-```
-
-::alert{type="info"}
-The global components will be available throughout our whole application so be careful when adding components to this folder. This works different to adding components in the components folder which are only added if they are being used.
-::
-
-### Adding an Author component with props
-
-An other advantage of the YAML properties is that we can make them available to our component through props. For example, we can have an about the author component and if we have guest bloggers the author will change. In our markdown file we can add a new object to our frontmatter which contains the author's name and bio and image.
-
-```yaml{}[content/articles/my-first-blog-post.md]
----
-author:
-  name: Benjamin
-  bio: All about Benjamin
-  image: https://images.unsplash.com/.....
----
-
-```
-
-We can now create the author component.
-
-```bash
-touch components/global/Author.vue
-```
-
-Here we create a div the author image, a title of Author and a dynamic name and bio of the author.
-
-```html{}[components/global/Author.vue]
-
-```
-
-::alert{type="info"}
-Styles have been removed from these examples, feel free to add the styles yourself or copy the styles from the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content).
-::
-
-Then in our script tag we can add our props of author which is an object and set required to true.
-
-```html{}[components/global/Author.vue]
-
-```
-
-To use the component we will need to add it to our markdown and pass in our props.
-
-```markdown{}[content/articles/my-first-blog-post.md]
-
-```
-
-::alert{type="info"}
-You cannot use self closing tags in markdown, for instance, `` won't work.
-::
-
-Putting the component here means we will have to repeat it for every article. In this case it would be better to add it directly to the slug page. We will need to change the author prop to `article.author`.
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-We can now move this component out of the global folder and into the components folder directly and it will be auto imported into our slug page as we are using it in the template.
-
-### Adding a code block to your post
-
-With the content module we can style our code blocks with the automatic inclusion of [Prism](https://prismjs.com/). That means we can write our code block using the correct markdown syntax and our code block will display with styling depending on the language.
-
-```js
-export default {
-  nuxt: 'is the best'
-}
-```
-
-```html
-
        code styling is easy
        
-```
-
-We can also add the file name of the code block by adding it inside square brackets after the code block's language.
-
-```js[my-first-blog-post.md]
-export default {
-  nuxt: 'is the best'
-}
-```
-
-The file name will be converted to a span with a filename class which we can then style how we like. For this example I am using tailwind classes but you can use ordinary CSS if you prefer.
-
-```css{}[assets/css/tailwind.css]
-.nuxt-content-highlight {
-  @apply relative;
-}
-.nuxt-content-highlight .filename {
-  @apply absolute right-0 text-gray-600 font-light z-10 mr-2 mt-1 text-sm;
-}
-```
-
-Different theme can be used, for example [prism-themes](https://github.com/PrismJS/prism-themes), we can install it and then add our preferred theme to the content options of your `nuxt.config file`.
-
-```bash
-npm install prism-themes
-// or
-yarn add prism-themes
-```
-
-Then in our `nuxt.config` file, in the content options, we can add a markdown object with prism and add the theme that we want to use.
-
-```js{}[nuxt.config.js]
-content: {
-  markdown: {
-    prism: {
-      theme: 'prism-themes/themes/prism-material-oceanic.css'
-    }
-  }
-}
-```
-
-### Creating a previous and next component
-
-We now have a pretty complete blog post but wouldn't it be great if users could easily go from one post to another. First let's duplicate our post so we have 3 posts. Then, let's create a new component for our previous and next posts.
-
-```bash
-touch components/PrevNext.vue
-```
-
-In this component we use a `v-if` inside our `NuxtLink` component to see if there is a previous blog post and if there is we add a link to it. We can print out the title of our article using the `prev` and `next` variables as these contain all the information from the article. This means we could create a card with an image and description to show the next and previous article but for this example we will just display the title. If there isn't a previous post we just print an empty span which is useful for styling purposes. We then do the exact same with our next link.
-
-```html{}[components/PrevNext.vue]
-
-```
-
-In our component we pass the props `prev` and `next` to makes them available to us on our blog post page.
-
-```html{}[components/PrevNext.vue]
-
-```
-
-We can now get our previous and next articles by adding them to our `asyncData`. We create an array of const with the name `prev` and `next` and we await the content from the articles folder. This time we only need the title and the slug so we can chain `only()` to our await and pass in title and slug.
-
-We can use the `sortBy()` method to sort our data by the createdAt date in ascending order. We then use the `surround()` method and pass in the slug from params so that it can get the correct slug for the previous and next posts.
-
-We then return prev and next just like we did with article.
-
-```js{}[pages/blog/_slug.vue]
-async asyncData({ $content, params }) {
-    const article = await $content('articles', params.slug).fetch()
-
-    const [prev, next] = await $content('articles')
-      .only(['title', 'slug'])
-      .sortBy('createdAt', 'asc')
-      .surround(params.slug)
-      .fetch()
-
-    return {
-      article,
-      prev,
-      next
-    }
-  },
-```
-
-We can now add our `` component to our slug page passing in the props of prev and next.
-
-```html{}[pages/blog/_slug.vue]
-
-```
-
-::alert{type="info"}
-As we have set `components: true` in our nuxt.config file we do not need to import this component in order to be able to use it.
-::
-
-### Working with the API
-
-When querying data the Content module gives us access to the API so that we can query it directly to see what is being returned. We have access to the API in dev mode with the following url: [http://localhost:3000/\_content/](http://localhost:3000/_content/). In our example this will be empty as our articles are in a folder called articles therefore we need to use this url [http://localhost:3000/\_content/articles](http://localhost:3000/_content/articles) to see our list of articles.
-
-::alert{type="info"}
-We can see individual articles by adding the name of the slug [http://localhost:3000/\_content/articles/my-first-blog-post](http://localhost:3000/_content/articles/my-first-blog-post)
-::
-
-::alert{type="info"}
-You can use a chrome extension such as [JSON Viewer Pro](https://chrome.google.com/webstore/detail/json-viewer-pro/eifflpmocdbdmepbjaopkkhbfmdgijcc) so you can better see your results.
-::
-
-We can now query our results directly in the url and see our results as a JSON which we can then use to create our blog index page that will have a list of all the blog posts. We can see using our API what we have available to us and for the blog index page we only want to return the title, description, img, slug and author. Let's take a look at what that would be like.
-
-[http://localhost:3000/\_content/articles?only=title&only=description&only=img&only=slug&only=author](http://localhost:3000/_content/articles?only=title&only=description&only=img&only=slug&only=author)
-
-::video-player
----
-sources:
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/content-api_aocbcn.webm
-  type: video/webm
-- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/content-api_aocbcn.mp4
-  type: video/mp4
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/content-api_aocbcn.ogv
-  type: video/ogg
-poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/content-api_aocbcn.jpg
----
-::
-
-### List all the blog posts
-
-We can now create our blog index page to list out our blog posts. As we already have an index page created we just need to delete all the demo code inside this page.
-
-::alert{type="info"}
-In the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content) I used the main index page instead of creating an index file inside the blog folder because for this example I have no other pages but normally you might have a home page, contact page and then the blog page etc.
-::
-
-Passing in `$content` and `params` to the context in our `asyncData` function we then use a const of articles to await our returned content by passing into `$content` the arguments of articles, as that is the folder where our articles are and our slug from params. We can then use `only()` to get our title, description, img, slug and author as we tested from our API this will give us exactly what we need. We can use `sortBy()` to sort by the createdAt date and then we chain our `fetch()` to the end and return our articles.
-
-```html{}[pages/index.vue]
-
-```
-
-Our articles are now available to us just like any data property so we can use it in our template using a `v-for` to loop over all the articles and print out the article title and author name, the description, the date it was updated and the image using the `` component to link to the slug of the article.
-
-```html{}[pages/index.vue]
-
-```
-
-### Using the where query to create an Author page
-
-With the content module we can also filter our results using the where query. We could have an author page that shows the author details and all posts by that author.
-
-```bash
-touch pages/blog/author/_author.vue
-```
-
-Just like before we use asyncData to fetch our data but this time we add in a where() method. We want to get the posts where the author is the same as the author name that comes from params.
-
-For example:
-
-[http://localhost:3000/\_content/articles?author.name=Maria](http://localhost:3000/_content/articles?author.name=Maria)
-
-Because we have used an object for our author we need to add nestedProperties as an option to our content property in our nuxt.config file and pass in what we want to query (only for dot notation queries).
-
-```js{}[nuxt.config.js]
-export default {
-  content: {
-    nestedProperties: ['author.name']
-  }
-}
-```
-
-As we can see we get all our data back only for the author Maria. If we were to use maria without a capital letter we wouldn't get anything back. We can therefore use `$regex` so that it remains with a capital letter.
-
-We then fetch all the details we want to show on this page. In the last example we used the `only()` method to return what we wanted but as we require quite a lot of content we can instead use the `without()` method and pass in what we don't want to return which is the body of the post.
-
-```html{}[pages/blog/author/_author.vue]
-
-```
-
-::alert{type="info"}
-You can use an array and pass in more than just 'body' to the `without()` method:
-::
-
-```js
-without(['body', 'title'])
-```
-
-We can then use our data to print out a nice author page showing the author name and bio as well as each post.
-
-```html{}[pages/blog/author/_author.vue]
-
-```
-
-::alert{type="info"}
-Please note all styles have been removed from this example. You can either style the page yourself or copy the styles from the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content).
-::
-
-To format our date we can add the method we created earlier:
-
-```js{}[pages/blog/author/_author.vue]
-methods: {
-    formatDate(date) {
-      const options = { year: 'numeric', month: 'long', day: 'numeric' }
-      return new Date(date).toLocaleDateString('en', options)
-    }
-  }
-```
-
-And of course we should link from our blog post to our new author page.
-
-```html{}[components/Author.vue]
-
-  
-  
        
-    
        Author
        
-    
        {{ author.name }}
        
-    
        {{ author.bio }}
        
-  
        
-        
-```
-
-### Add a search field
-
-The Nuxt content module gives us the possibility of searching through our articles by using the `search()` method.
-
-Let's first create a search component.
-
-```bash
-touch components/AppSearchInput.vue
-```
-
-We then add a data property which will return the searchQuery which starts off as an empty string and the articles array which is also empty. We then use the watch method from Vue to watch our searchQuery function passing in the argument of searchQuery. If there is no searchQuery then the articles array is empty and we just call return. If not we get our articles and await our `$content` passing in articles. We can now use the `limit()` method to limit the number of returned results and then we use the `search()` method passing in our searchQuery as an argument and then we chain the `fetch()` method to the end.
-
-```html{}[components/AppSearchInput.vue]
-
-```
-
-Next we need to add to our template an input and using `v-model` we connect it to our SearchQuery data property. Then if there are articles we use a `v-for` to list out the articles using the `` component to link to them.
-
-```html{}[components/AppSearchInput.vue]
-
-```
-
-We can now use our `` component by adding it anywhere on our page.
-
-```html{}[pages/_slug.vue]
-
-```
-
-::alert{type="info"}
-See the [demo code](https://github.com/nuxt-academy/demo-blog-nuxt-content) for improved styling of this page as well as the header component that was added which includes the search component and is therefore displayed on the author and index page.
-::
-
-## Live editing our content
-
-Our blog is looking really great and if we need to modify any of the content on the page we can do so directly in the browser thanks to the live edit feature. All you have to do is double click on your page while in dev mode and the live edit will open. Here you can modify any of your text and also the front matter. You can even add a component that is in the global components folder and just by clicking away you will see your changes live in the browser and you will see in your editor and console that the file has been modified and saved.
-
-::video-player
----
-sources:
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/live-edit-content_kdorvi.webm
-  type: video/webm
-- src: https://res.cloudinary.com/nuxt/video/upload/v1592314331/live-edit-content_kdorvi.mp4
-  type: video/mp4
-- src: https://res.cloudinary.com/nuxt/video/upload/v1588091670/live-edit-content_kdorvi.ogv
-  type: video/ogg
-poster: https://res.cloudinary.com/nuxt/video/upload/v1588091670/live-edit-content_kdorvi.jpg
----
-::
-
-## Generating our content
-
-If we now want to deploy our amazing new blog we can run the `nuxt generate` command which will build our app adding all our webpack assets and creating .js bundles for us and then export our html, css, js and images as static assets. You will also notice that we didn't have to add a routes property or do anything to get our new page as the **crawler** will crawl all links for us and generate our dynamic routes for us.
-
-We can then use the `nuxt start` command which will serve our production ready static site so we can see it in our browser before deploying.
-
-With nuxt generate if only our content changes it means the `nuxt generate` command will only export the static pages and will not go through webpack to rebuild the site meaning our content will be updated in seconds.
-
-## Conclusion
-
-Working with content is great fun and there is so much more you can do and build. Don't forget to showcase your work to use on our discord channel named **showcase** so we can see the cool things you have created and perhaps even feature them in our NuxtLetter. Not signed up yet? Well now is a great time to [sign up](https://nuxtjs.org/#subscribe-to-newsletter) as we keep releasing more new content and features for Nuxt. Enjoy :)
-
-## Further Reading
-
-For more info on how to improve your blog check out these articles by [Gareth Redfern](https://twitter.com/garethredfern):
-
-- [Adding a Sitemap Using Nuxt Content](https://redfern.dev/articles/adding-a-sitemap-using-nuxt-content/)
-- [Adding Social Media & SEO Meta Data Using Nuxt Content](https://redfern.dev/articles/adding-social-media-seo-meta-data-using-nuxt-content)
-- [Adding Pagination With Nuxt Content](https://redfern.dev/articles/adding-pagination-nuxt-content-blog)
diff --git a/content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md b/content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md
deleted file mode 100644
index 3d1cc9cebe..0000000000
--- a/content/fa/tutorials/2.improve-your-developer-experience-with-nuxt-components.md
+++ /dev/null
@@ -1,440 +0,0 @@
----
-template: post
-title: 'Improve Your Developer Experience With Nuxt Components'
-description: Explore how you can import and register Vue components automatically using @nuxt/components module.
-imgUrl: blog/improve-developer-experience-nuxt-components/main.png
-imgCredits: Adam Nir
-date: 2020-06-24
-authors:
-  - name: Krutie Patel
-    avatarUrl: https://pbs.twimg.com/profile_images/780651635932434432/YtbSkumD_400x400.jpg
-    link: https://twitter.com/KrutiePatel
-tags:
-  - components
-  - auto-import
-  - lazy-loading
-  - dynamic-import
-  - ignore-rules
-  - 3rd-party-library
-category: Tutorial
----
-
-## Introduction
-
-The Nuxt team has introduced **[@nuxt/components](https://www.npmjs.com/package/@nuxt/components)** module with the purpose to make Nuxt development faster and to make you, as a developer, more productive. This module comes with amazing features and options that will improve your development experience with Nuxt. No matter if you’re just starting out or an advanced user, [@nuxt/components](https://github.com/nuxt/components) provides a range of options from the simplest setup to advance configurations that will certainly benefit your projects.
-
-In a nutshell, this module automatically scans, imports and registers Vue components found in the **`~/components`** directory, so that we don't have to write import statements when we use them in either pages, layouts or even within components.
-
-Here is how [Debbie O’Brien](https://twitter.com/debs_obrien) explains how it works:
-
-> _This module parses your template and automatically includes the component in the file where you are using it such as a page, layout or even a component. Because Nuxt uses automatic code splitting to split your pages by default this module works perfect as it will only contain the components that are used on that page. Also, if you use a component in more than 2 pages, Nuxt will automatically create a shared chunk for them thanks to the magic of WebPack._
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Table of Contents](#table-of-contents)
-- [Module Setup](#module-setup)
-- [Cheatsheet](#cheatsheet)
-- [Directory path as a String](#directory-path-as-a-string)
-- [Directory path as an Object](#directory-path-as-an-object)
-  - [Try it yourself - Directory Paths](#try-it-yourself---directory-paths)
-- [Inclusion paths](#inclusion-paths)
-  - [Extensions option](#extensions-option)
-  - [Try it yourself - Extensions](#try-it-yourself---extensions)
-  - [Pattern option](#pattern-option)
-  - [Default](#default)
-  - [Add additional extensions](#add-additional-extensions)
-  - [Customize as per your requirement](#customize-as-per-your-requirement)
-- [Exclusion paths](#exclusion-paths)
-  - [Ignore option](#ignore-option)
-  - [.nuxtignore, ignore property & ignore option:](#nuxtignore-ignore-property--ignore-option)
-- [Lazy loading your components](#lazy-loading-your-components)
-  - [Try it yourself - Lazy-loading](#try-it-yourself---lazy-loading)
-- [Third-party component library](#third-party-component-library)
-  - [Try it yourself - Third-party library](#try-it-yourself---third-party-library)
-- [Conclusion](#conclusion)
-
-In this article, we'll learn about `@nuxt/components` by example. I have setup a demo with two sets of UI components, `ui-1` and `ui-2`.
-
-```js
-| components
---| ui-1/
-----| Card/
---| ui-2/
-----| BaseButton/
-----| Card/
-----| List/
-----| MagicButton/
-```
-
-We will implement `@nuxt/components` on these components followed by a detailed look at module options to customize the default behavior. Later in the article, we will also take a look at **lazy-loading** and **auto-importing 3rd-party library** components.
-
-It’s best if you setup this [sample project](https://github.com/Krutie/nuxt-components-demo) locally to tryout options that may interest you.
-
-- **GitHub Repo** - [https://github.com/Krutie/nuxt-components-demo](https://github.com/Krutie/nuxt-components-demo)
-- **Demo** - [http://nuxt-components.surge.sh/](http://nuxt-components.surge.sh/)
-- **3rd Party Sample Components Repo** - [https://github.com/Krutie/Kru-Components](https://github.com/Krutie/Kru-Components)
-
-## Module Setup
-
-From Nuxt v2.13 onward, this module **will be available by default** when you create a new Nuxt project. However, you'll still need to activate it using `components: true` in `nuxt.config.js.`
-
-```js{}[nuxt.config.js]
-// For nuxt v2.13+
-export default {
-  components: true
-}
-```
-
-In case your project is using Nuxt version below v2.13\*\*we recommend you to upgrade your Nuxt version since there is no breaking between these versions.
-
-::alert{type="info"}
-**If `components: true` is set, `~/components` directory is scanned by default.**
-::
-
-Minimal configuration above is enough to get you started. However, like any other Nuxt module, the real power of `@nuxt/components` lies in the module options. Before we take a detailed look, here's a one-page summary of the module.
-
-## Cheatsheet
-
-![One-page summary of @nuxt/components module](https://cdn.krutiepatel.com/2020-06/nuxt_components_Module-Cheatsheet.png)
-
-> [Download printable PDF here](https://cdn.krutiepatel.com/2020-06/nuxt_components_Module-Cheatsheet.pdf)
-
-Using module options, you can select particular directories with specific file-extensions from the `~/components` directory.
-
-To accept custom directory options, `components:` accepts **an array of directory paths**, rather than just a boolean value! These **directory paths** can be either an array of **strings** or **objects**.
-
-Let’s see both formats in detail.
-
-## Directory path as a String
-
-**Directory path as a string** is a simplified version to indicate which directory to scan, watch and register.
-
-For example, in our sample project, we can use string notation like below to auto-import every UI components located at `components/ui-1/` and `components/ui-2/`.
-
-```js
-// nuxt.config.js
-export default {
-  // Module options as an Array of String
-  components: ['~/components/ui-1/', '~/components/ui-2/']
-}
-```
-
-## Directory path as an Object
-
-Directory path as an object gets bit more interesting! **When path is given as an object, it becomes a required.**
-
-```js{}[nuxt.config.js]
-export default {
-  // Module options as an Array of Object
-  components: [{ path: '~/components/ui-1/' }, { path: '~/components/ui-2/' }]
-}
-```
-
-In addition to `path`, we can also define additional configuration to include, exclude, watch or even add prefix to components based on their location & extensions.
-
-For example, when components are imported using this module, their names are based on their filename. But you can `prefix` component names to preserve their filenames as they are and still be able to customize their component tags.
-
-```js{}[nuxt.config.js]
-export default {
-  // Module options as an Array of Object
-  components: [
-    {
-      path: '~/components/ui-2/',
-      prefix: 'aex'
-    }
-  ]
-}
-```
-
-It’s important to note that, the scope of these options is limited to the `path` provided in that object. In the example above, only components located at `~/components/ui-2/` will be registered with the prefix **`aex`**.
-
-```html
-
- 
-
-
- 
-```
-
-### Try it yourself - Directory Paths
-
-In our sample project:
-
-1. `/pages/manual-import-example.vue` imports components manually. In `nuxt.config.js`, configure appropriate directory path, so that `ui-1` components can be auto-imported.
-2. `/pages/auto-import-example.vue` already implements basic auto-import. Implement `prefix` option on `Card` UI components.
-
----
-
-With directory path is defined as an object, we gain finer control over which components are to be auto-imported, and which ones are to be left out.
-
-Whether your components are written in `.vue`, `.js` or `.ts`, sometimes, you may not want to auto-import every single component files found at specified `path`. There are some scenarios where auto-import may need some tweaking. For example:
-
-**Multi-file Components**
-
-If your components are divided into two individual files, `.vue` for template and `.js` for script. You will want to avoid auto-importing the `.js` files since they're already included in the templates. In this scenario, you will want a mechanism to prevent all or some `.js` files from being auto-imported.
-
-**Dynamic Components**
-
-At the time of writing this article, auto-import doesn't work for dynamic components.
-
-```html
-
-
-```
-
-This is the scenario where you'll need to import your components in the script tag.
-
-Fortunately, this module allow us to specify directory paths or file extensions or the combination of both to selectively include or exclude files from being auto-imported. Keep reading to see **how.**
-
-## Inclusion paths
-
-There are couple of ways we can selectively include component files this using module.
-
-1. `extensions` option
-2. `patterns` option
-
-### Extensions option
-
-`extensions` option lets you indicate which file extensions - from the given `path` - should be scanned and registered. `extensions` option accepts an array of **multiple** file extensions in `String` format.
-
-```js
-{
-  path: "~/components/ui-2/MagicButton/",
-  // prefix: 'aex',
-  extensions: ['vue'], // Array, include files that match the extension
-}
-```
-
-**Both `.vue` and `.js` are included as default extensions.** This option is particularly **helpful for components with multiple files**.
-
-In our sample project, `MagicButton` components is divided into two individual files, `.vue` for template and `.js` for script.
-
-```js
-| MagicButton
---| MagicButton.js
---| MagicButton.vue
-```
-
-In this scenario, we want to allow only Vue template to be auto-imported. Well, `extensions` option helps us achieve exactly that.
-
-### Try it yourself - Extensions
-
-In our sample project,
-
-1. Examine the source-code for `MagicButton` at `/components/ui-2/MagicButton/` and its configuration in `nuxt.config.js`.
-
-`extensions` option is best for including selected files at a given `path`. However, there are always advanced use-cases when we need finer control over selecting components - from within sub-directories even!
-
-For those edge-cases, we can leverage `pattern` and `ignore` options to indicate path patterns for inclusion and exclusion respectively.
-
-```js
-{
-  path: '~/components/ui-2/',
-  prefix: 'aex',
-  extensions: [], // Array, components inclusion
-  pattern: '', // String, components inclusion
-  ignore: [] // Array, components exclusion
-}
-```
-
-Continue reading further to see more examples of these two options and how they work.
-
-### Pattern option
-
-`pattern` option lets you define which type of components - from the given `path` - should be scanned and registered. Unlike `extensions`, `pattern` is defined as a **single** `String` and it must follow [glob pattern style](https://github.com/isaacs/node-glob#glob-primer).
-
-We can use pattern option as **default** or **add additional** ones or even **customize** it completely.
-
-### Default
-
-As mentioned earlier, **both `.vue` and `.js` are included as default extensions.**
-
-```js
-// Default pattern
-pattern: `**/*.{vue,js}`
-```
-
-If you are using TypeScript, then `ts` & `tsx` extensions are supported by default as well.
-
-### Add additional extensions
-
-If additional extensions are required, you can specify additional extensions under Build Configuration in `nuxt.config.js`.
-
-```js{}[nuxt.config.js]
-export default {
-  /*
-   ** Build configuration
-   */
-  build: {
-    additionalExtensions: ['jsx']
-  }
-}
-```
-
-Above code adds `.jsx` extension to the default pattern, makes the resulting pattern look like: `**/*.{vue,js,jsx}`
-
-### Customize as per your requirement
-
-If required, you can manually specify extensions to completely customize the pattern.
-
-```js
-// Multiple extensions
-/* Only vue and jsx files will be scanned at given path */
-pattern: '**/*.{vue,jsx}',
-```
-
-Or for single file,
-
-```js
-// Single extension
-/* Only vue files will be scanned at given path */
-pattern: '**/*.vue',
-```
-
-## Exclusion paths
-
-We just saw how inclusion patterns work. `ignore` option on the other hand that helps us exclude components from scanning.
-
-### Ignore option
-
-`ignore` option does exactly opposite of what `pattern` does **and instead of just one string, it accepts an array of strings!** These strings must also follow [glob pattern style](https://github.com/isaacs/node-glob#glob-primer).
-
-Ignore option excludes components with specified locations and extensions from scanning.
-
-**Three individual examples** in the code snippet below show how we can exclude components with `.js` extensions. This is particularly helpful in a scenario where you want to **apply ignore-rules to sub-directories located at the given `path`**.
-
-```js
-// ignore example 1
-{
-  path: '~/components/ui-2/', // path of the directory to scan and watch
-  // ignore js files found at components/ui-2/ and subfolders
-  ignore: ["**/*.js"],
-}
-
-// ignore example 2
-{
-  // ignore js files found at components/ui-2/card/
-  ignore: ["**/card/*.js"],
-}
-
-// ignore example 3
-{
-  // ignore js files found at components/ui-2/list/
-  ignore: ["**/list/*.js"],
-}
-```
-
-### .nuxtignore, ignore property & ignore option:
-
-It's important we highlight two similar features of Nuxt that ignore files just like our `ignore` option.
-
-- [.nuxtignore](/docs/configuration-glossary/configuration-ignore#-nuxtignore) also ignore files similar to `ignore` option, but `.nuxtignore` ignores files from `/pages`, `/layouts`, `/middleware` and `/store` . It's a dot-file that is defined in the project root. Read more about the [ignore property](/docs/configuration-glossary/configuration-ignore) on Nuxt docs.
-- [ignore](/docs/configuration-glossary/configuration-ignore#the-ignore-property) property, as well, let us define multiple glob-pattern to ignore matching files, like below.
-
-```js{}[nuxt.config.js]
-export default {
-  ignore: ['**/*.test.*']
-}
-```
-
-The impact of both `.nuxtignore` and `ignore` property is realized during build-process, and they operate project-wide, while `ignore` option operates locally and ignores files from `/components` directory.
-
-So, if you're using 1. `.nuxtignore`, 2. top-level `ignore` property, and 3. `ignore` option, then all three will be merged.
-
-```html
-Final ignore = .nuxtignore + Top-level ignore + ignore option (Local)
-```
-
----
-
-Now, let’s say all of your components are automatically imported into the project and you saved so many import statements, but... your project isn’t using all of the components upfront.
-
-This brings us to the next feature of this module that is worth highlighting, **Lazy Loading.**
-
-## Lazy loading your components
-
-Components that aren't required immediately upon initial render - such as components below the fold, sidebar, modals or any other components that are rendered conditionally with `v-if` or `v-else` - qualifies for lazy-loading (aka dynamic import).
-
-Lazy loading your components is super easy with this module. You can simply add `Lazy` prefix to the component tag when it's used in the template area.
-
-```html{}[pages/lazy-loading-example.vue]
-
-  
-    {{ post.title }}
-    
-  
-
-```
-
-And that’s pretty much it, you have got your component dynamically imported, on-demand!
-
-### Try it yourself - Lazy-loading
-
-Lazy loading is already implemented at `/pages/lazy-loading-example.vue`
-
-- Run the sample project locally,
-- visit [http://localhost:3000/lazy-loading-example](http://localhost:3000/lazy-loading-example)
-- Open Chrome DevTools - Browser's Inspect Panel, then go to Network Tab.
-
-Here, you can see that lazy components are loaded when the data becomes available, and they have their own separate bundles. See `List.js, ListItem.js` and `ListItemIcon.js` in the screenshot below.
-
-![Lazy loading with nuxt/components](https://cdn.krutiepatel.com/2020-06/lazy-loading-with-nuxt-components.png)
-
-## Third-party component library
-
-Third-party components libraries can also benefit from `@nuxt/components`.
-
-I have created a bare-minimum external component library for you to tinker with this feature. It's called [Kru-Components](https://github.com/Krutie/Kru-Components)!
-
-> **Kru Components Repo** - [https://github.com/Krutie/Kru-Components](https://github.com/Krutie/Kru-Components)
-
-Kru-components library exposes a hook called, `components:dirs`, that allows you - as a component library author - to extend your components directory into Nuxt projects.
-
-```js
-// https://github.com/Krutie/Kru-Components/blob/master/src/nuxt.js
-
-this.nuxt.hook('components:dirs', dirs => {
-  // Add ./components dir to the list
-  dirs.push({
-    path: join(__dirname, 'components'),
-    prefix: 'kru'
-  })
-})
-```
-
-This way, components of this external library can take advantage of **automatic tree-shaking** and **component registration**.
-
-And then you - as a user of this external library - can use `kru-components` as simple as a Nuxt module.
-
-```js{}[nuxt.config.js]
-buildModules: [
- // Use Kru-components as Nuxt module
- "kru-components/src/nuxt",
-],
-```
-
-### Try it yourself - Third-party library
-
-In our sample project, I have implemented `Kru-Components` at `pages/third-party-example.vue`. Make sure to setup Kru-Components locally and then `npm link` it to our sample project.
-
-**Note:** If your component library consists of components that needs transpiling support, then `@nuxt/components` provides `transpile` option, which is set to `auto` by default. Remember, `transpile` option can be disabled if components already transpiles.
-
-For more concrete example, I'd recommend you keep an eye on [Chakra UI](https://github.com/chakra-ui/chakra-ui-vue) for Vue as they're [working towards making the library compatible](https://twitter.com/codebender828/status/1265702818888876033) with `@nuxt/components`.
-
-## Conclusion
-
-If you've made it this far, you can see how this module presents several opportunities to fine-tune how we auto-import components and improve overall Nuxt Developer Experience. Here's the brief summary of what we learned in this article.
-
-There are three ways you can get started with this module.
-
-- activate `components` and start using components from `~/components` directory, **or**
-- provide directories as strings and start using components from specified directories, **or**
-- provide directories as an object, along with configuration that can range from basic to advance. Here's the recap of directory options we covered:
-1. **path** - (String) - Of all four options, path is required parameter. It indicates which directory is to be scanned.
-2. **prefix** - (String) - Specify the prefix for the component names.
-3. **extensions** (Array) - Specify file extensions of the components to be scanned.
-4. **pattern** - (String) - Specify path and extensions of the components to be scanned.
-5. **ignore** - (Array) - Specify path and extensions of the components to be excluded from scanning.
-
-Above directory options combined with lazy-loading, this module can be used in many possible combinations. However, you can always start with bare-minimum option, such as `components: true` and refine your configuration as you go.
diff --git a/content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md b/content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md
deleted file mode 100644
index dd895214ba..0000000000
--- a/content/fa/tutorials/3.going-dark-with-nuxtjs-color-mode.md
+++ /dev/null
@@ -1,493 +0,0 @@
----
-template: post
-title: 'Going dark with Nuxt color mode'
-description: 'The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg. sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.'
-imgUrl: blog/going-dark-with-nuxtjs-color-mode/main.jpeg
-imgCredits: Benjamin Voros
-imgCreditsUrl: https://unsplash.com/@vorosbenisop
-date: 2020-05-19
-authors:
-  - name: "Debbie O'Brien"
-    avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg
-    link: https://twitter.com/debs_obrien
-tags:
-  - Nuxt
-  - Color mode
-category: Tutorial
----
-
-
        
-  View demo /
-  Source
-
        
-
-The [@nuxtjs/color-mode module](https://github.com/nuxt-community/color-mode-module) is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (e.g.: sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.
-
-- [How does it work](#how-does-it-work)
-- [Let's get started](#lets-get-started)
-  - [Install the color-mode module](#install-the-color-mode-module)
-  - [Adding your color styles](#adding-your-color-styles)
-  - [Inspecting the HTML](#inspecting-the-html)
-  - [Creating a color-mode switcher](#creating-a-color-mode-switcher)
-  - [Importing our component](#importing-our-component)
-  - [Adding a click event to change our colors](#adding-a-click-event-to-change-our-colors)
-  - [Adding some icons](#adding-some-icons)
-  - [Importing the SVGs as components](#importing-the-svgs-as-components)
-  - [Adding a dynamic component](#adding-a-dynamic-component)
-  - [Styling our icons](#styling-our-icons)
-  - [Creating a method to show our preferred class](#creating-a-method-to-show-our-preferred-class)
-  - [Adding some text using the ColorScheme component](#adding-some-text-using-the-colorscheme-component)
-  - [Adding a text when system is chosen](#adding-a-text-when-system-is-chosen)
-  - [Tidying up our styles](#tidying-up-our-styles)
-  - [Conclusion](#conclusion)
-  - [What to do next](#what-to-do-next)
-
-## How does it work
-
-The `@nuxtjs/color-mode` adds a `.${color}-mode` class to the `` tag. It works with any Nuxt target, either static or server and universal or client-side rendering. It auto detects the system color-mode so that you don't have to manually change the color.
-
-It injects a `$colorMode` helper with:
-
-- `preference`: Actual color-mode selected (can be `'system'`), update it to change the user preferred color mode
-- `value`: Useful to know what color mode has been detected when `$colorMode === 'system'`, you should not update it
-- `unknown`: Useful to know if, during SSR or static generation, we need to render a placeholder
-
-## Let's get started
-
-You can work on an already created project or start a new one. For this example I have created a new project and added some dummy text to the index.vue file in the pages folder.
-
-```html{}[index.vue]
-
-```
-
-### Install the color-mode module
-
-First of all you need to install the module as a dependency to your Nuxt project.
-
-::code-group
-```bash [Yarn]
-yarn add --dev @nuxtjs/color-mode
-```
-```bash [NPM]
-npm install --save-dev @nuxtjs/color-mode
-```
-::
-
-Then you need to add the module to the `buildModules` section of your nuxt.config.js file.
-
-::alert{type="info"}
-If you don't have a nuxt.config.js file already you can create one in the root directory and add the code below.
-::
-
-```javascript{}[nuxt.config.js]
-export default {
-  buildModules: ['@nuxtjs/color-mode']
-}
-```
-
-If you using a version of Nuxt lower than 2.9.0 you will need to add it to the `modules` property instead of `buildModules`.
-
-::alert{type="info"}
-To check what version of Nuxt you have you can run `yarn nuxt -v` or `npm run nuxt -v`
-::
-
-### Adding your color styles
-
-Now you need to add some styles to your mode classes. Let's add a `main.css` file in our assets folder. We will use CSS variables to set the root color which will be light mode and then set the colors for dark and sepia mode. Then we can add some styles to our body and link tags.
-
-```css{}[assets/main.css]
-:root {
-  --color: #243746;
-  --color-primary: #158876;
-  --color-secondary: #0e2233;
-  --bg: #f3f5f4;
-  --bg-secondary: #fff;
-  --border-color: #ddd;
-}
-
-.dark-mode {
-  --color: #ebf4f1;
-  --color-primary: #41b38a;
-  --color-secondary: #fdf9f3;
-  --bg: #091a28;
-  --bg-secondary: #071521;
-  --border-color: #0d2538;
-}
-.sepia-mode {
-  --color: #433422;
-  --color-secondary: #504231;
-  --bg: #f1e7d0;
-  --bg-secondary: #eae0c9;
-  --border-color: #ded0bf;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  background-color: var(--bg);
-  color: var(--color);
-  transition: background-color 0.3s;
-}
-a {
-  color: var(--color-primary);
-}
-```
-
-In order to use this CSS file in our application we need to register it. We do this by adding a css property to our configuration file and adding the css file that we have just created.
-
-```js{}[nuxt.config.js]
-css: ['@/assets/main.css']
-```
-
-### Inspecting the HTML
-
-Now if you launch your site with `npm run dev` or `npx nuxt dev` you should see dark mode if your system is already set to dark mode and if you inspect the code you will see the class added to your html tag.
-
-::video-player
----
-sources:
-- src: /blog/going-dark-with-nuxtjs-color-mode/testing-html.mp4
-  type: video/mp4
----
-::
-
-```html
-
-  // you might have light-mode here
-
-```
-
-Using the dev tools change the mode to sepia-mode and light-mode to see the effects.
-
-```html
-
-  
-  
-    
-  
-
-```
-
-You can also change the color in the console by typing:
-
-```js
-$nuxt.$colorMode.preference = 'sepia'
-```
-
-::video-player
----
-sources:
-- src: /blog/going-dark-with-nuxtjs-color-mode/testing-console.mp4
-  type: video/mp4
----
-::
-
-### Creating a color-mode switcher
-
-Obviously changing the mode in the dev tools is not what we want so let's create a color-mode switcher so our users can quickly change from one color to another.
-
-Let's create a component called `ColorModePicker` and we can add a list of colors. For now we can just print out the color from our v-for.
-
-```html{}[components/ColorModePicker.vue]
-
-```
-
-And in our data property let's return an array of colors for each mode.
-
-```html{}[components/ColorModePicker.vue]
-
-```
-
-### Importing our component
-
-Let's import our component into our index.vue page so we can see what is happening.
-
-```html{}[pages/index.vue]
-
-
-
-```
-
-And in our browser under `http://localhost:3000` you will see our list of colors.
-
-![list of colors](/blog/going-dark-with-nuxtjs-color-mode/list-of-colors.png)
-
-### Adding a click event to change our colors
-
-Then in our template we can add a click event that will make the `$colorMode.preference` equal to the color which comes from our data.
-
-We can use our `$colorMode` helper that we get with the color-mode module. When the user clicks the `$colorMode.preference` will be set to the color coming from our data.
-
-```html{}[components/ColorModePicker.vue]
-
      • 
-```
-
-This is actually all you need in order for it to work. If you check in your browser you will see that by clicking on any of the colors the background is changing. It probably won't have a pointer cursor so if you think it doesn't work it probably does just you are used to seeing the cursor.
-
-::video-player
----
-sources:
-- src: /blog/going-dark-with-nuxtjs-color-mode/color-changing-text-only.mp4
-  type: video/mp4
----
-::
-
-And if we check in the browser we can see it works but this is super ugly. Let's tidy it up a bit.
-
-### Adding some icons
-
-Let's add some icons. you can copy the icons [from here](https://github.com/nuxt-community/color-mode-module/tree/master/example/assets/icons) and place them in your assets folder in a new folder called icons.
-
-We are going to use our icons as a component and in order to do that we will use the [@nuxtjs/svg](https://www.npmjs.com/package/@nuxtjs/svg) module which allows you to import .svg files in multiple ways depending on the resource query you provide.
-
-First you will need to install it
-
-```bash
-yarn add --dev @nuxtjs/svg
-# OR npm install --save-dev @nuxtjs/svg
-```
-
-Then we need to add it to your `nuxt.config.js` in the buildModules section which should already have the `@nuxtjs/color-mode` module.
-
-```js{}[nuxt.config.js]
-buildModules: ['@nuxtjs/svg', '@nuxtjs/color-mode']
-```
-
-### Importing the SVGs as components
-
-We can now import these svg icons as components using the `?inline` query so that they are imported as inline SVGs.
-
-```html{}[components/ColorModePicker.vue]
-
-```
-
-### Adding a dynamic component
-
-Now we can use a dynamic component which will check which icon to add depending on the colors in our data array. Lets replace the `{{color}}` text with this new component inside our `
      • `.
-
-```html{}[components/ColorModePicker.vue]
-
-```
-
-Let's move our click event from our `
      • ` to our icon component.
-
-```html{}[components/ColorModePicker.vue]
-
-```
-
-### Styling our icons
-
-And let's add some styles so we can see our icons. We will use scoped styling and use the class feather. If you look into your svg files you will see that our SVGs have the class of feather so we can use this class to style it. We will also add a preferred and selected class so we know which one has been selected and what is the preferred one.
-
-```html{}[components/ColorModePicker.vue]
-
-```
-
-You won't see much difference right now except that the icons look a bit nicer but now we need to show a different class for our preferred icon which comes from our system preference and one for our selected icon which is for when we use the click event to change the color.
-
-### Creating a method to show our preferred class
-
-To do this we can create a method that will return the class we want. We can call our method `getClasses` and pass in the color as the parameter The two classes we want to return are preferred and selected. The preferred color should be equal to the `$colorMode.preference` and the selected color should be equal to the `$colorMode.value`. If the colorMode is unknown we can return an empty object.
-
-```js{}[components/ColorModePicker.vue]
-data () {
-  return {
-    colors: ['system', 'light', 'dark', 'sepia']
-  }
-},
-methods: {
-  getClasses (color) {
-    // Does not set classes on ssr when preference is system (because we don't know the preference until client-side)
-    if (this.$colorMode.unknown) {
-      return {}
-    }
-    return {
-      preferred: color === this.$colorMode.preference,
-      selected: color === this.$colorMode.value
-    }
-  }
-}
-```
-
-We can now add this class to our icon component. The class will call the getClasses method passing in the color we receive when we use the click event.
-
-```html{}[components/ColorModePicker.vue]
-
-```
-
-And you will see in the browser the colors are being applied just as we wanted. But it is not very clear when we click the system icon what is going on.
-
-### Adding some text using the ColorScheme component
-
-Let's add something that can help the user understand it.
-
-If you are doing SSR (`nuxt start` or `nuxt generate`) and if `$colorMode.preference` is set to `'system'`, using `$colorMode` in your Vue template will lead to a flash. This is due to the fact that we cannot know the user preferences when pre-rendering the page since they are detected on client-side.
-
-To avoid the flash, we have to guard any rendering path which depends on `$colorMode` with `$colorMode.unknown` to render a placeholder or use our `` component.
-
-Let's create a ColorScheme component under our `
          ` with a placeholder and a tag of `span`. Inside it we can add some text and display the `$colorMode.preference` which we receive from the color-mode module.
-
-```html{}[components/ColorModePicker.vue]
-
-  Color mode: {{ $colorMode.preference }}
-
-```
-
-You will now see in the browser that if you change the icon the text will appear that corresponds to the icon clicked.
-
-::video-player
----
-sources:
-- src: /blog/going-dark-with-nuxtjs-color-mode/color-mode-text-icons.mp4
-  type: video/mp4
----
-::
-
-### Adding a text when system is chosen
-
-We can improve this further by seeing when the preference is the system and adding another message that shows which value was detected.
-
-```html{}[components/ColorModePicker.vue]
-
-  Color mode: {{ $colorMode.preference }}
-  ({{ $colorMode.value }} mode detected)
-
-```
-
-If you test it out in the browser you will see it's looking pretty good and we are almost there.
-
-### Tidying up our styles
-
-We now just have to tidy up a few styles. Let's get rid of the dots from the `
            ` and add some spacing and some style to our `
            ` tag.
-
-```css{}[components/ColorModePicker.vue]
-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-ul li {
-  display: inline-block;
-  padding: 5px;
-}
-p {
-  margin: 0;
-  padding-top: 5px;
-  padding-bottom: 20px;
-}
-```
-
-And in order to center it we can wrap our ColorModePicker component in a div with the class of container.
-
-```html{}[pages/index.vue]
-
            
-  
-
            
-```
-
-And add the styles to the container class in our styles
-
-```html{}[pages/index.vue]
-
-```
-
-### Conclusion
-
-And there you have your beautiful and fully working color-mode component. Feel free to have some more fun by changing the icons or adding more colors or modifying the color scheme. Have fun.
-
-::video-player
----
-sources:
-- src: /blog/going-dark-with-nuxtjs-color-mode/final-working-version.mp4
-  type: video/mp4
----
-::
-
-### What to do next
-
-::alert{type="next"}
-To learn more about using the color-mode with Tailwind check out [this article](https://medium.com/@fayazara/quick-way-to-implement-darkmode-in-nuxt-js-tailwindcss-corona-virus-tracker-712d004a0846).
-::
-
-::alert{type="next"}
-[Subscribe to the newsletter](#subscribe-to-newsletter) to not miss the upcoming articles and resources.
-::
diff --git a/content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md b/content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md
deleted file mode 100644
index ec2f258288..0000000000
--- a/content/fa/tutorials/4.moving-from-nuxtjs-dotenv-to-runtime-config.md
+++ /dev/null
@@ -1,287 +0,0 @@
----
-template: post
-title: 'Moving from @nuxtjs/dotenv to runtime config'
-description: 'In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors.'
-imgUrl: blog/moving-from-nuxtjs-dotenv-to-runtime-config/main.jpeg
-imgCredits: Norris Niman
-imgCreditsUrl: https://unsplash.com/@norrisniman
-date: 2020-06-15
-authors:
-  - name: "Debbie O'Brien"
-    avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg
-    link: https://twitter.com/debs_obrien
-tags:
-  - Nuxt
-  - env
-category: Tutorial
----
-
-It's time to migrate from @nuxtjs/dotenv module to use our new runtime config which has been released as of Nuxt v2.13.
-
-- [What are environment variables](#what-are-environment-variables)
-- [Misconceptions](#misconceptions)
-- [Why we need webpack](#why-we-need-webpack)
-- [How environment variables work](#how-environment-variables-work)
-- [Introducing the Nuxt runtime config](#introducing-the-nuxtjs-runtime-config)
-  - [The new runtime config values are:](#the-new-runtime-config-values-are)
-- [Migrating to the Nuxt runtime config from @nuxtjs/dotenv](#migrating-to-the-nuxtjs-runtime-config-from-nuxtjsdotenv)
-- [Migrating to the Nuxt runtime config from the env property](#migrating-to-the-nuxtjs-runtime-config-from-the-env-property)
-- [The env property v runtime config](#the-env-property-v-runtime-config)
-- [Using your config values](#using-your-config-values)
-- [Migrating your config values in your script tags](#migrating-your-config-values-in-your-script-tags)
-- [Migrating your config values in your templates](#migrating-your-config-values-in-your-templates)
-- [Expand/Interpolation Support](#expandinterpolation-support)
-- [Best Practices:](#best-practices)
-- [What to do next](#what-to-do-next)
-
-## What are environment variables
-
-In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors. Instead, we can store sensitive information, like keys and secrets, in password-protected CI tools or deployment pipelines. However, when we are developing applications locally we might not have access to deployment pipelines and therefore need somewhere to store these environment variables.
-
-## Misconceptions
-
-It is very easy to think that your secret keys are safe by placing them somewhere other than your source code such as a `.env` file, which makes it very easy to expose your secret keys to client-side bundles. Adding your `.env` file to `.gitignore` means this file is not pushed to your version control and therefore not available for people to see which is important if your repo is public. However, the .env file is not encrypted, and therefore placing secrets in environment variables doesn't really provide us with an increase in security and really it just keeps sensitive data out of plain sight. A `.env` option can easily mislead developers to expose secret keys to client-side bundles so always make sure this file is added to your .gitignore.
-
-## Why we need webpack
-
-Isomorphic applications, otherwise known as universal applications, need to share code between both the server and the client. Babel is used to compile our modern ES6 JavaScript code down to ES5 JavaScript so that it can work across all platforms. Node.js which is an asynchronous event-driven JavaScript runtime that can be used in computers and servers outside of a browser environment, uses the module system.
-
-Using modules in Node.js is done using require, e.g. require('lodash'). However, browser support for modules is still incomplete and therefore we need bundling tools such as webpack to transpile these modules into code that the browsers can read. Webpack basically makes client-side development more "Node-like" with the same module system semantics. This means that a require statement or an ES6 import statement will resolve the same way. And as our applications are not only JavaScript but also HTML, CSS and images we can require these using webpack's loaders.
-
-## How environment variables work
-
-At runtime, Node.js automatically loads environment variables into `process.env` so that they are available to use in your application. The reference to the environment variable is replaced with the correct value. For example, if you had an `API_SECRET` key with the value of `'my-secret'` then in your application where you had used `process.env.API_SECRET` this would be replaced with the value of my-secret.
-
-Values are read during build time and persisted in the webpack bundle. Therefore if we change our `API_SECRET` we will need to rebuild our application so that it can read the new value.
-
-## Introducing the Nuxt runtime config
-
-With Nuxt 2.13+ we have runtime config and built-in dotenv support providing better security and faster development! Two new options are added to your `nuxt.config.js` file which will allow passing runtime configuration which is then accessible using `$config` from the context. Despite the `env` option, runtime config is added to the Nuxt payload so there is no need to rebuild in order to update the runtime configuration when working in development or with Server-side rendering or single-page applications. Although for static sites you will still need to regenerate your site to see these changes.
-
-```js{}[nuxt.config.js]
-export default {
-  publicRuntimeConfig: {},
-  privateRuntimeConfig: {}
-}
-```
-
-### The new runtime config values are:
-
-- `publicRuntimeConfig` should hold all env variables that are public as these will be exposed on the frontend. This could include a reference to your public URL for example.
-- `privateRuntimeConfig` should hold all env variables that are private and that should not be exposed on the frontend. This could include a reference to your API secret tokens for example.
-
-::alert{type="warning"}
-privateRuntimeConfig always overrides publicRuntimeConfig on server-side. `$config` in server mode is { ...public, ...private } but for client mode only { ...public }
-::
-
-## Migrating to the Nuxt runtime config from @nuxtjs/dotenv
-
-If you have the `@nuxtjs/dotenv` module installed then you can remove this module by uninstalling it and removing it from the modules section of your nuxt.config file. You can then migrate to the Nuxt runtime config by adding the new properties to your nuxt.config.js file. And then you can add your variables from your `.env` files into your public and private runtime config properties so that Nuxt has access to these variables at runtime.
-
-If your `.env` file looks something like this:
-
-```{}[.env]
-BASE_URL=https://nuxtjs.org
-API_SECRET=1234
-```
-
-Then migrating it to the new runtime config would look something like:
-
-```js{}[nuxt.config.js]
-export default {
-  publicRuntimeConfig: {
-    baseURL: process.env.BASE_URL
-  },
-  privateRuntimeConfig: {
-    apiSecret: process.env.API_SECRET
-  }
-}
-```
-
-This can be simplified even further by using a default value instead of having to maintain the value in both the runtime config and the `.env` file when using non-sensitive values.
-
-```js{}[nuxt.config.js]
-export default {
-  publicRuntimeConfig: {
-    baseURL: process.env.BASE_URL || 'https://nuxtjs.org'
-  }
-}
-```
-
-Also this can be a better replacement for `.env.example` and the default values can point to staging keys/configs.
-
-```js{}[nuxt.config.js]
-export default {
-  publicRuntimeConfig: {
-    baseURL: process.env.NODE_ENV === 'production' ? 'https://nuxtjs.org' : 'https://dev.nuxtjs.org'
-  }
-}
-```
-
-## Migrating to the Nuxt runtime config from the env property
-
-If you have your env variables stored in your nuxt.config then you can migrate these to use the new runtime configs by adding them to your nuxt.config file.
-
-If your env variables in your nuxt.config look like this:
-
-```js{}[nuxt.config.js]
-export default {
-  env: {
-    BASE_URL: 'https://nuxtjs.org',
-    API_SECRET: '1234'
-  }
-}
-```
-
-Then migrating it to the new runtime config would look something like:
-
-```js{}[nuxt.config.js]
-export default {
-  publicRuntimeConfig: {
-    baseURL: 'https://nuxtjs.org'
-  },
-  privateRuntimeConfig: {
-    apiSecret: process.env.API_SECRET
-  }
-}
-```
-
-::alert{type="warning"}
-Remember secret keys should not be placed in your nuxt.config file so if you do have them in your env variables then you should remove them. You can create a .env file if needed or else your secret keys can be stored just in your hosting environment.
-::
-
-## The env property v runtime config
-
-You can still use the env property and it is still useful for env variables that are required at build time rather than runtime such as NODE_ENV=staging or VERSION=1.2.3. However for runtime env variables the runtime config is preferred as using the env property can be as dangerous as using the dotenv module when used incorrectly.
-
-## Using your config values
-
-Once you have stored your values in the public or private runtime config in your `nuxt.config` file you can then access these values anywhere by using the context in your pages, store, components and plugins by using `this.$config` or `context.$config` instead.
-
-```html{}[pages/index.vue]
-
-```
-
-And inside your templates you can access it directly using `{{ $config.* }}`
-
-```html{}[pages/index.vue]
-
-```
-
-## Migrating your config values in your script tags
-
-If you are already using the env variable in your script tags such as in async data
-
-```js
-async asyncData ({ env }) {
-```
-
-then you can just replace env for \$config when passing into the context. Here we also pass in the key from the config that we want to access. In this case baseURL.
-
-```js
-async asyncData ({ $config: { baseURL } }) {
-```
-
-Then instead of using env.apiUrl
-
-```js
-const posts = await fetch(`${env.baseURL}/posts`)
-```
-
-you can use baseURL direct in your code as we have already passed this in into the config option above and therefore we don't have to reference \$config in our fetch.
-
-```js
-const posts = await fetch(`${baseURL}/posts`)
-```
-
-## Migrating your config values in your templates
-
-If you have code that is using the env variables you can migrate to using the \$config option. For example if in your code you had
-
-```html
-
            {{process.env.baseURL}}
            
-```
-
-You can change this by using \$config instead
-
-```html
-
            {{$config.baseURL}}
            
-```
-
-## Expand/Interpolation Support
-
-Expand for run time config happens only if there is already a key.
-
-```bash{}[.env]
-API_SECRET=1234
-```
-
-```js{}[nuxt.config.js]
-export default {
-  privateRuntimeConfig: {
-    API_SECRET: ''
-  }
-}
-```
-
-Interpolation allows nesting env vars.
-
-```bash{}[.env]
-BASE_URL=/api
-PUBLIC_URL=https://nuxtjs.org
-```
-
-```js{}[nuxt.config.js]
-export default {
-  privateRuntimeConfig: {
-    baseURL: '${PUBLIC_URL}${BASE_URL}'
-  }
-}
-```
-
-::alert{type="info"}
-It is also possible to use a function for publicRuntimeConfig and privateRuntimeConfig but not recommended.
-::
-
-## Best Practices:
-
-::list{type="danger"}
-- Don’t commit sensitive values or secret keys to git
-::
-
-::list{type="danger"}
-- Don't store secret keys or sensitive values in your nuxt.config or `.env` unless is gitignored
-::
-
-::list{type="success"}
-- Use default values for runtimeConfig such as process.env.baseURL || 'https://nuxtjs.org'
-::
-
-::list{type="success"}
-- Store secret keys correctly using your hosting platform such as on Heroku or Netlify etc
-::
-
-::list{type="success"}
-- Follow JS naming convention (secretKey rather than SECRET_KEY) for runtimeConfig
-::
-
-::list{type="success"}
-- Prefer using runtimeConfig rather than `env` option
-::
-
-## What to do next
-
-::alert{type="next"}
-To learn more about going full static checkout [this article](/announcements/going-full-static).
-::
-
-::alert{type="next"}
-[Subscribe to the newsletter](#subscribe-to-newsletter) to not miss the upcoming articles and resources.
-::
diff --git a/content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md b/content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md
deleted file mode 100644
index bf51f14bc7..0000000000
--- a/content/fa/tutorials/5.build-dev-to-clone-with-nuxt-new-fetch.md
+++ /dev/null
@@ -1,586 +0,0 @@
----
-template: post
-title: 'Build a dev.to clone with Nuxt new fetch'
-description: Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI.
-imgUrl: blog/build-dev-to-clone-with-nuxt-new-fetch/main.jpeg
-imgCredits: Patrick Mueller
-imgCreditsUrl: https://unsplash.com/@pietyo
-date: 2020-04-08
-authors:
-  - name: Sergey Bedritsky
-    avatarUrl: https://pbs.twimg.com/profile_images/1244291720566669315/pGg6Xn-M_400x400.jpg
-    link: https://twitter.com/sergeybedritsky
-  - name: Sebastien Chopin
-    avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
-    link: https://twitter.com/Atinux
-tags:
-  - Nuxt
-  - Fetch
-  - Asynchronous Data Fetching
-  - API
-category: Tutorial
----
-
-_Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI._
-
-::video-player
----
-sources:
-- src: /blog/build-dev-to-clone-with-nuxt-new-fetch/dev-clone-nuxt.mp4
-  type: video/mp4
----
-::
-
-
            
-  View demo /
-  Source
-
            
-
-This article is intended to demonstrate use cases and awesomeness of new Nuxt `fetch` functionality [introduced in release v2.12](/docs/components-glossary/fetch#nuxt-gt-2-12), and show you how to apply its power in your own projects. For in-depth technical analysis and details of the new `fetch` you can check [Krutie Patel’s article](/announcements/understanding-how-fetch-works-in-nuxt-2-12).
-
-Here’s the high-level outline of how we will build our dev.to clone using `fetch` hook. We will:
-
-- use `$fetchState` for showing nice placeholders while data is fetching on the client side
-- use `keep-alive` and `activated` hook to efficiently cache API requests on pages that have already been visited
-- reuse the `fetch` hook with `this.$fetch()`
-- set `fetchOnServer` value to control when we need to render our data on the server side or not
-- find a way to handle errors from `fetch` hook.
-
-## Table of Contents
-
-- [Table of Contents](#table-of-contents)
-- [DEV API](#dev-api)
-- [Setting up the Project](#setting-up-the-project)
-  - [CSS Styles](#css-styles)
-  - [UI Design](#ui-design)
-  - [SVG icons](#svg-icons)
-  - [Dependencies](#dependencies)
-- [Developing the Application](#developing-the-application)
-  - [URL structure](#url-structure)
-  - [Caching requests with `keep-alive` and `activated` hook](#caching-requests-with-keep-alive-and-activated-hook)
-  - [Using `fetch` in page components](#using-fetch-in-page-components)
-  - [Reuse `fetch` with `this.$fetch()`](#reuse-fetch-with-thisfetch)
-  - [Applying placeholders with `$fetchState`](#applying-placeholders-with-fetchstate)
-  - [Using `fetch` in any other component 🔥](#using-fetch-in-any-other-component-)
-  - [Error handling](#error-handling)
-- [Conclusion](#conclusion)
-
-## DEV API
-
-In September 2019 DEV [opened](https://twitter.com/bendhalpern/status/1176663688742395904) their public API that we can now use to access articles, users and other resources data. _Please note that it’s still Beta, so it could change in future or some things might not work as expected._
-
-For creating our DEV clone we are interested in such API endpoints:
-
-- [getArticles](https://docs.dev.to/api/#operation/getArticles): to access a list of articles, filtered by the `tag`, `state`, `top`, `username` and paginated with `page` parameters
-- [getArticleById](https://docs.dev.to/api/#operation/getArticleById): to access an article content
-- [getUser](https://docs.dev.to/api/#operation/getUser): to access user data
-- [getCommentsByArticleId](https://docs.dev.to/api/#operation/getCommentsByArticleId): to fetch comments related to the article
-
-To keep it simple, for communication with the DEV API we will use native JavaScript [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) .
-
-## Setting up the Project
-
-If you are an experienced developer you can skip this part and [get straight to the point](#developing-the-application).
-
-Make sure you have Node and npm installed. We will use `create-nuxt-app` to [initialize](/docs/get-started/installation#using-code-create-nuxt-app-code-) the project, so just type the following command in terminal:
-
-```
-npx create-nuxt-app nuxt-dev-to-clone
-# leave the default answers for each question
-```
-
-Now `cd nuxt-dev-to-clone/` and run `npm run dev`. Congrats, your Nuxt app is running on [http://localhost:3000](http://localhost:3000/)!
-
-Let’s install necessary packages and discuss how we will build our app next.
-
-### CSS Styles
-
-For styling we will use the most common CSS pre-processor Sass/SCSS and leverage Vue.js [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html) feature, to keep our components styles encapsulated. To [use Sass/SCSS with Nuxt](/docs/features/configuration#pre-processors) run:
-
-::code-group
-```bash [Yarn]
-yarn add sass sass-loader@10 -D
-```
-```bash [NPM]
-npm install sass sass-loader@10 --save-dev
-```
-::
-
-We also will use [@nuxtjs/style-resources](https://github.com/nuxt-community/style-resources-module) module that will help us to use our design tokens defined in SCSS variables in any Vue file without the necessity of using `@import` statements in each file.
-
-::code-group
-```bash [Yarn]
-yarn add @nuxtjs/style-resources
-```
-```bash [NPM]
-npm install @nuxtjs/style-resources
-```
-::
-
-Now tell Nuxt to use it by adding this code to `nuxt.config.js`
-
-```js{}[nuxt.config.js]
-buildModules: ['@nuxtjs/style-resources']
-```
-
-Read more about this module [here](https://github.com/nuxt-community/style-resources-module#scss-example), regarding `buildModules`, you can learn more on it in the [modules vs buildModules](/docs/configuration-glossary/configuration-modules#-code-buildmodules-code-) section of the documentation.
-
-Let’s define our design tokens as SCSS variables, put them in `~/assets/styles/tokens.scss` and tell `@nuxtjs/style-resources` to load them by adding to `nuxt.config.js`
-
-```js{}[nuxt.config.js]
-styleResources: {
-  scss: ['~/assets/styles/tokens.scss']
-}
-```
-
-Our design tokens are now available through SCSS variables in every Vue component.
-
-### UI Design
-
-It will be kinda boring just to copy the existing DEV design and layout, so why don’t we experiment a little bit. You have probably already heard of the new UI trend — neumorphism. If you missed it somehow, read more about it [here](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6).
-
-We can find a lot of [Dribbble shots](https://dribbble.com/tags/neumorphism) (from where this trend came from), but still only a few examples of real-world web apps built with neumorphism style interface, so we just can’t miss the chance to recreate it with CSS and Vue.js. It’s simple, clean and fresh.
-
-I am not going to describe the styling aspect of this application in detail, but if you are interested, you can check this awesome article from [CSS Tricks](https://css-tricks.com/neumorphism-and-css/) about neumorphism and CSS.
-
-### SVG icons
-
-For SVG icons lets use [@nuxt/svg](https://github.com/nuxt-community/svg-module). This module allows us to import `.svg` files as inline SVG, while keeping SVG sources in single place and not polluting Vue template markup with loads of SVG code.
-
-::code-group
-```bash [Yarn]
-yarn add @nuxtjs/svg -D
-```
-```bash [NPM]
-npm install @nuxtjs/svg -D
-```
-::
-
-```js{}[nuxt.config.js]
-buildModules: ['@nuxtjs/svg', '@nuxtjs/style-resources']
-```
-
-### Dependencies
-
-To keep the frontend app fast and simple we will use only two dependencies, both from Vue.js core members:
-
-- [vue-observe-visibility](https://github.com/Akryum/vue-observe-visibility) by [Guillaume Chau](https://twitter.com/Akryum), for effective detecting elements in viewport with IntersectionObserver and trigger lazy loading. Only 1.6kB gzipped
-- [vue-content-placeholders](https://github.com/michalsnik/vue-content-placeholders) by [Michał Sajnóg](https://twitter.com/michalsnik), for showing nicely animated placeholders for UI elements while content is fetching. Only 650B gzipped.
-
-Let’s add them as Nuxt [plugins](/docs/configuration-glossary/configuration-plugins), by creating two files.
-
-```js{}[vue-observe-visibility.client.js]
-import Vue from 'vue'
-import VueObserveVisibility from 'vue-observe-visibility'
-
-Vue.use(VueObserveVisibility)
-```
-
-```js{}[vue-placeholders.js]
-import Vue from 'vue'
-import VueContentPlaceholders from 'vue-content-placeholders'
-
-Vue.use(VueContentPlaceholders)
-```
-
-And add them to ``
-
-```js{}[nuxt.config.js]
-plugins: [
-  '~/plugins/vue-placeholders.js',
-  '~/plugins/vue-observe-visibility.client.js'
-]
-```
-
-## Developing the Application
-
-Now we finally can start developing our DEV clone powered by Nuxt and [new fetch](/docs/components-glossary/fetch).
-
-### URL structure
-
-Let’s imitate the DEV URL structure for our simple app. Our [pages](/docs/concepts/views#pages) folder should look like this:
-
-```
-├── index.vue
-├── t
-│   └── _tag.vue
-├── top.vue
-└── _username
-    ├── _article.vue
-    └── index.vue
-```
-
-We will have 2 [static pages](/docs/get-started/routing#automatic-routes):
-
-- `index.vue`: latest articles about Nuxt will be listed
-- `top.vue`: most popular articles for last year period.
-
-For the rest of the app URL’s we will use convenient Nuxt file based [dynamic routes](/docs/directory-structure/pages#dynamic-pages) feature to scaffold necessary pages by creating such file structure:
-
-- `_username/index.vue` - user profile page with list of his published articles
-- `_username/_article.vue` - this is where article, author profile and comments will be rendered
-- `t/_tag.vue` - list of best articles by any tag that exist on DEV
-
-That’s all. Pretty simple, right?
-
-### Caching requests with `keep-alive` and `activated` hook
-
-One of the coolest practical features of the new `fetch` is its ability to work with `keep-alive` directive to save `fetch` calls on pages you have already visited. Let’s apply this feature in `layouts/default.vue` layout like this.
-
-```html{}[layouts/default.vue]
-
-```
-
-With this directive `fetch` will trigger only on the first page visit, after that Nuxt will save rendered components in memory, and on every subsequent visit it will be just reused from the cache. Could it be simpler than that?
-
-Moreover, Nuxt gives us fine grained control over `keep-alive` with the `keep-alive-props` property where you can set the number of components which you want to cache, and `activated` hook, where you can control TTL (time to live) of the cache. We will use the latest one in our app in the next sections.
-
-### Using `fetch` in page components
-
-Let’s dive into the `fetch` feature itself.
-
-Currently as you can see from the [final result](https://dev-clone.nuxtjs.app/) we have 3 page components that basically reuse the same code — it’s the `index.vue`, `top.vue` and `t/_tag.vue` page components. They simply render a list of article preview cards.
-
-```html{}[index.vue]
-
-
-
-```
-
-Pay attention to this code block:
-
-```js{}[index.vue]
-async fetch() {
-  const articles = await fetch(`https://dev.to/api/articles?tag=nuxt&state=rising&page=${this.currentPage}`).then((res) => res.json())
-
-  this.articles = this.articles.concat(articles)
-}
-```
-
-Here we are making a request to the DEV `/articles` endpoint, with query parameters that API understands. Don’t confuse the `fetch` hook with the JavaScript [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) interface which simply helps us to send a request to the DEV API, and then parse the response with `res.json()`.
-
-Also notice that the new `fetch` hook doesn’t serve just to dispatch Vuex store action or committing mutation to set state, now it has access to `this` context, and is able to mutate component’s data directly. This is a very important new feature, and you can [read more](/announcements/understanding-how-fetch-works-in-nuxt-2-12) about it in the previous article about `fetch`.
-
-Now let’s markup the `` component which receives `article` prop and renders its data nicely.
-
-```html{}[ArticleCardBlock.vue]
-
-
-
-```
-
-### Reuse `fetch` with `this.$fetch()`
-
-It already should display a list of articles fetched from DEV - but it feels like we are not making full use of this API. Let’s add lazy loading to the articles list, and use the pagination parameter provided by this API. So when we scroll to the bottom of the page a new chunk of articles will be fetched and rendered.
-
-To efficiently detect when to fetch the next page it’s better to use [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). For that we will use a previously installed Vue plugin called `vue-observe-visibility` which is basically a wrapper around this API and it will detect when an element is becoming visible or hidden on the page. This plugin provides us a possibility to use `v-observe-visibility` directive on any element, so let’s add it to last `` component:
-
-```html{}[index.vue]
-
-```
-
-As you can guess from the code above, when the last `` appears in viewport `lazyLoadArticles` will be fired. Let’s look at it:
-
-```js
-lazyLoadArticles(isVisible) {
-  if (isVisible) {
-    if (this.currentPage < 5) {
-      this.currentPage++
-      this.$fetch()
-    }
-  }
-}
-```
-
-And here we see the power of the new `fetch` hook. We can just reuse `$fetch` as a method and fetch the next page when lazy loading is triggered.
-
-### Applying placeholders with `$fetchState`
-
-If you already applied code from the previous section and tried client-side navigation between `index.vue`, `top.vue` and `t/_tag.vue` page components you probably noticed that it shows an empty page for the moment, while it’s waiting for the API request to complete. This is intended behavior, and it’s different from the old `fetch` and `asyncData` hooks that triggered before page navigation.
-
-Thanks to `$fetchState.pending` wisely provided by the `fetch` hook we can use this flag to display a placeholder when fetch is being called on client-side. `vue-content-placeholders` plugin will be used as a placeholder.
-
-```html{}[index.vue]
-
-```
-
-We imitate how `` looks with [vue-content-placeholders components](https://github.com/michalsnik/vue-content-placeholders#available-components-and-properties), and as you could see in source code it will be used in almost every component that uses the `fetch` hook, so let’s not pay attention on those parts of code anymore (they are basically the same in each component).
-
-### Using `fetch` in any other component 🔥
-
-This is probably the most interesting feature of the new `fetch` hook. **We can now use the `fetch` hook in any Vue component without worrying about breaking SSR!** This means far less headache about how to structure your async API calls and components.
-
-To explore this great functionality let’s move to `_username/_article.vue` page component.
-
-```html{}[_username/_article.vue]
-
-
-
-```
-
-Here we see no data fetching at all, only a template layout consisting of 3 components: ``, ``, ``. And each of those components has its own `fetch` hook. With old `fetch` or current `asyncData` earlier we would have to make all three requests to three different DEV endpoints and then pass them to each component as a prop. But now those components are completely encapsulated.
-
-In `` we use `fetch` just like we’d use it in a page component.
-
-```js
-async fetch() {
-  const article = await fetch(
-    `https://dev.to/api/articles/${this.$route.params.article}`
-  ).then((res) => res.json())
-
-  if (article.id && article.user.username === this.$route.params.username) {
-    this.article = article
-    this.$store.commit('SET_CURRENT_ARTICLE', this.article)
-  } else {
-    // set status code on server
-    if (process.server) {
-      this.$nuxt.context.res.statusCode = 404
-    }
-    // throwing an error will set $fetchState.error
-    throw new Error('Article not found')
-  }
-}
-```
-
-Now, remember in the section about caching I mentioned that there’s an `activated` hook that can be used for managing TTL of `fetch`? This is example of such usage:
-
-```js
-activated() {
-	if (this.$fetchState.timestamp <= Date.now() - 60000) {
-	  this.$fetch()
-	}
-}
-```
-
-With this code in place we will call fetch again if last fetch was more than 60 sec ago. All other requests within this period will be cached.
-
-There’s also interesting usage of another `fetch` feature called `fetchOnServer` in the `` component. We don’t really want to render this content on the server side, because comments are user generated and could be irrelevant or spammy. We don’t need any SEO for this content block. Now, with the help of mentioned `fetchOnServer` we have such control:
-
-```js
-async fetch() {
-  this.comments = await fetch(
-    `https://dev.to/api/comments?a_id=${this.$route.params.article}`
-  ).then((res) => res.json())
-},
-fetchOnServer: false
-```
-
-### Error handling
-
-Last thing that should be mentioned is error handling. You probably already saw that we used error handling above, but let’s pay more attention to this important topic.
-
-As you know, `fetch` is handled at the **component level**, when doing server-side rendering, the parent (virtual) dom tree is already rendered when rendering the component, so we cannot change it by calling `$nuxt.error(...)`, instead we have to **handle the error at the component level**.
-
-`$fetchState.error` is set if an error is thrown in the `fetch` hook, so we can use it in our template to display an error message:
-
-```html
-
-```
-
-Then, in our `fetch` hook, we will throw the error if we don't find the article corresponding for the defined author:
-
-```js
-async fetch() {
-  const article = await fetch(
-    `https://dev.to/api/articles/${this.$route.params.article}`
-  ).then((res) => res.json())
-
-  if (article.id && article.user.username === this.$route.params.username) {
-    this.article = article
-  } else {
-    // set status code on server
-    if (process.server) {
-      this.$nuxt.context.res.statusCode = 404
-    }
-    throw new Error('Article not found')
-  }
-}
-```
-
-Note here that we wrap `this.$nuxt.context.res.statusCode = 404` around `process.server`, this is used to set the HTTP status code on the server-side for correct SEO.
-
-## Conclusion
-
-In this article we explored Nuxt new `fetch` and built an app with the basic DEV content features and structure using only this `fetch` hook. I hope you've got some inspiration to build your own version of DEV.TO. Don’t forget to check out the [source code](https://github.com/bdrtsky/nuxt-dev-to-clone) for a more complete example and functionality.
-
-**What to do next:**
-
-::alert{type="next"}
-Read [Krutie Patel article](/announcements/understanding-how-fetch-works-in-nuxt-2-12) with in-depth analysis of how new `fetch` hook works
-::
-
-::alert{type="next"}
-Check [nuxt-hackernews](https://github.com/nuxt/hackernews) for similar usage of [Hacker News API](https://github.com/HackerNews/API)
-::
-
-::alert{type="next"}
-[Subscribe](#subscribe-to-newsletter) to the newsletter to not miss the upcoming articles and resources, I plan to write an article about how to create your personal blog using Nuxt, with DEV as the CMS.
-::
diff --git a/content/fa/tutorials/index.md b/content/fa/tutorials/index.md
deleted file mode 100644
index 36655a3739..0000000000
--- a/content/fa/tutorials/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-template: blog
-title: Tutorials
-description: Discover tutorials made by the Nuxt community.
-blogPostList: true
----
diff --git a/content/fa/video-courses/index.md b/content/fa/video-courses/index.md
deleted file mode 100644
index c20d1c915c..0000000000
--- a/content/fa/video-courses/index.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-template: blog
-title: 'Video Courses'
-description: 'Discover and learn more about the Nuxt Framework with free and premium video courses.'
----
-::video-courses-list
----
-video-courses:
-  one:
-    title: Learn Nuxt by Building a Real World App
-    description: Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework.
-    image: /img/video-courses/mastering_nuxt.png
-    link: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite'
-    tier: Premium
-  two:
-    title: Get Started with Nuxt
-    description: Learn the essentials for how to build and deploy a Nuxt site including dynamic routes, data fetching, SEO, lazy loading, global styles and transitions as well as how to generate and deploy your Nuxt app.
-    image: /img/video-courses/jamstack_explorer.png
-    link: 'https://explorers.netlify.com/learn/get-started-with-nuxt'
-    tier: Free
-  three:
-    title: Learn Nuxt with Debbie
-    description: A playlist of YouTube videos covering all things Nuxt including short videos and live streams.
-    image: /img/video-courses/learn_nuxt_with_debbie.png
-    link: 'https://www.youtube.com/c/DebbieOBrien'
-    tier: Free
-  four:
-    title: Building Applications with Vue & Nuxt
-    description: Build dynamic web applications with Vue and Nuxt! Throughout the course you’ll build out a variety of projects leveraging the tools in the Vue ecosystem including the Vue CLI, Nuxt, Vuex Store, and more.
-    image: /img/video-courses/building_applications_fe_masters.png
-    link: 'https://frontendmasters.com/courses/vue-nuxt-apps/'
-    tier: Premium
-  five:
-    title: Build a Job Board with Laravel, GraphQL, Nuxt and Apollo
-    description: Learn while you build a GraphQL API with Laravel Lighthouse, then build a Nuxt frontend with Apollo to consume it. All styled with Tailwind.
-    image: /img/video-courses/job_board.png
-    link: 'https://codecourse.com/courses/build-a-job-board-with-laravel-graphql-nuxt-and-apollo'
-    tier: Premium
-  six:
-    title: Nuxt - Vue.js on Steroids
-    description: Build highly engaging Vue JS apps with Nuxt. Nuxt adds easy server-side-rendering and a folder-based config approach.
-    image: /img/video-courses/vuejs_on_steroids.png
-    link: 'https://www.udemy.com/course/nuxtjs-vuejs-on-steroids/'
-    tier: Premium
-  seven:
-    title: Scaling Vue with Nuxt
-    description: Once you are comfortable with Vue, learning a framework like Nuxt allows you to create production-ready web apps which follow best practices.
-    image: /img/video-courses/scaling_vue_with_nuxt.png
-    link: 'https://www.vuemastery.com/courses/scaling-vue-with-nuxt-js/why-use-nuxt'
-    tier: Premium
-  eight:
-    title: Nuxt Fundamentals
-    description: Learn the fundamentals of Nuxt in this course that we created together with the founders of Nuxt. The course covers what you need to know from scaffolding to deploying your first Nuxt application.
-    image: /img/video-courses/nuxt_fundamentals.png
-    link: 'https://vueschool.io/courses/nuxtjs-fundamentals?friend=nuxt&utm_source=Nuxtjs.org&utm_medium=Link&utm_content=Courses&utm_campaign=nuxtjs-fundamentals'
-    tier: Free
-  nine:
-    title: Create a News App with Vue.js and Nuxt
-    description: You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.
-    image: /img/video-courses/news_app.png
-    link: 'https://egghead.io/courses/create-a-news-app-with-vue-js-and-nuxt'
-    tier: Free
----
-::