diff --git a/content/de/_collections/design/colors.md b/content/de/_collections/design/colors.md new file mode 100644 index 0000000000..04d34e0770 --- /dev/null +++ b/content/de/_collections/design/colors.md @@ -0,0 +1,13 @@ +--- +colors: +- + name: Grün Standard + 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/de/_collections/design/logos.md b/content/de/_collections/design/logos.md new file mode 100644 index 0000000000..3350109824 --- /dev/null +++ b/content/de/_collections/design/logos.md @@ -0,0 +1,19 @@ +--- +logos: +- + type: Text gefärbt + logoImg: '/design-kit/colored-text' + color: dark +- + type: Text schwarz + logoImg: '/design-kit/black-text' + color: dark +- + type: Text weiß + logoImg: '/design-kit/white-text' + color: light +- + type: Text gefärbt & weiß + logoImg: '/design-kit/colored-white-text' + color: light +--- diff --git a/content/de/_collections/design/monogram.md b/content/de/_collections/design/monogram.md new file mode 100644 index 0000000000..6cc77b91a6 --- /dev/null +++ b/content/de/_collections/design/monogram.md @@ -0,0 +1,16 @@ +--- +logos: +- + type: Logo gefärbt + logoImg: '/design-kit/colored-logo' + color: dark +- + type: Logo schwarz + logoImg: '/design-kit/black-logo' + color: dark +- + type: Logo weiß + logoImg: '/design-kit/white-logo' + color: light +- +--- diff --git a/content/de/_collections/events/2019.md b/content/de/_collections/events/2019.md new file mode 100644 index 0000000000..90a2e2fafe --- /dev/null +++ b/content/de/_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/de/_collections/events/2020.md b/content/de/_collections/events/2020.md new file mode 100644 index 0000000000..ea9cd58030 --- /dev/null +++ b/content/de/_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/de/_collections/events/2021.md b/content/de/_collections/events/2021.md new file mode 100644 index 0000000000..76cf9fa477 --- /dev/null +++ b/content/de/_collections/events/2021.md @@ -0,0 +1,47 @@ +--- +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' + eventLink: 'https://conf.strapi.io/' + link: 'https://youtu.be/WZI5lt607ww' + date: '06/05/2021' + lang: 'English' +--- diff --git a/content/de/_collections/events/index.md b/content/de/_collections/events/index.md new file mode 100644 index 0000000000..dc762ec9a6 --- /dev/null +++ b/content/de/_collections/events/index.md @@ -0,0 +1,3 @@ +--- +navigation: false +--- diff --git a/content/de/_collections/navigations/footer.md b/content/de/_collections/navigations/footer.md new file mode 100644 index 0000000000..fe33c1ca72 --- /dev/null +++ b/content/de/_collections/navigations/footer.md @@ -0,0 +1,81 @@ +--- +links: + - + title: 'Über uns' + items: + - + title: 'Kontakt aufnehmen' + href: 'mailto:hello@nuxtjs.com' + - + title: 'Unterstützung für Unternehmen' + to: '/support' + - + title: 'NuxtLabs Unternehmen' + href: 'https://nuxtlabs.com/' + - + title: 'Open Source Software' + href: 'https://github.com/nuxt' + - + title: 'Partner' + to: '/partners' + - + title: 'Telemetry' + href: 'https://github.com/nuxt/telemetry' + - + title: 'Ökosystem' + items: + - + title: 'Ankündigungen' + to: '/announcements' + - + title: 'Contribute' + to: '/contribution-guide' + - + title: 'Chatte mit uns' + href: 'https://discord.nuxtjs.org/' + - + title: 'Events' + to: '/events' + - + title: 'Sponsoren' + to: '/sponsors' + - + title: 'Teams' + to: '/teams' + - + title: 'Tutorials' + to: '/tutorials' + - + title: 'Video Kurse' + to: '/video-courses/' + - + title: 'Ressourcen' + items: + - + title: 'Design' + to: '/design' + - + title: 'Dokumentation' + to: '/docs' + - + title: 'Beispiele' + to: '/examples' + - + title: 'Integrationen' + to: '/integrations' + - + title: 'Master Kurse' + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite' + - + title: 'Module' + to: '/modules' + - + title: 'Releases' + to: '/releases' + - + title: 'Showcases' + to: '/showcases' + - + title: 'Themes' + to: '/themes' +--- diff --git a/content/de/_collections/navigations/header.md b/content/de/_collections/navigations/header.md new file mode 100644 index 0000000000..470c71bf49 --- /dev/null +++ b/content/de/_collections/navigations/header.md @@ -0,0 +1,82 @@ +--- +links: + - + title: 'Entdecken' + items: + - + title: 'Showcases' + slug: 'showcases' + to: '/showcases' + - + title: 'Fallstudien' + slug: 'case-studies' + to: '/case-studies' + - + title: 'Erfahrungsberichte' + slug: 'testimonials' + to: '/testimonials' + - + title: 'Lernen' + items: + - + title: 'Docs' + slug: 'docs' + to: '/docs' + - + title: 'Beispiele' + slug: 'examples' + to: '/examples' + - + title: 'Releases' + slug: 'releases' + to: '/releases' + - + title: 'Master Kurse' + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite' + - + title: 'Entdecken' + items: + - + title: 'Integrationen' + slug: 'integrations' + to: '/integrations' + - + title: 'Nodule' + slug: 'modules' + to: '/modules' + - + title: 'Themes' + slug: 'themes' + to: '/themes' + - + title: 'Video Kurse' + slug: 'video-courses' + to: '/video-courses' + - + title: 'Community' + items: + - + title: 'Ankündigungen' + slug: 'announcements' + to: '/announcements' + - + title: 'Events' + slug: 'events' + to: '/events' + - + title: 'Sponsoren' + slug: 'sponsors' + to: '/sponsors' + - + title: 'Teams' + slug: 'teams' + to: '/teams' + - + title: 'Tutorials' + slug: 'tutorials' + to: '/tutorials' + - + title: 'Partner' + slug: 'partners' + to: '/partners' +--- diff --git a/content/de/_collections/sponsors/donation/1.github.md b/content/de/_collections/sponsors/donation/1.github.md new file mode 100644 index 0000000000..eb14a043a5 --- /dev/null +++ b/content/de/_collections/sponsors/donation/1.github.md @@ -0,0 +1,6 @@ +--- +name: 'GitHub Sponsors' +icon: 'IconGitHub' +url: 'https://github.com/sponsors/nuxt' +tier: 'Donations' +--- diff --git a/content/de/_collections/sponsors/donation/2.openCollective.md b/content/de/_collections/sponsors/donation/2.openCollective.md new file mode 100644 index 0000000000..f799beaecc --- /dev/null +++ b/content/de/_collections/sponsors/donation/2.openCollective.md @@ -0,0 +1,6 @@ +--- +name: 'OpenCollective' +icon: 'IconOpenCollective' +url: 'https://opencollective.com/nuxtjs' +tier: 'Donations' +--- diff --git a/content/de/_collections/sponsors/index.md b/content/de/_collections/sponsors/index.md new file mode 100644 index 0000000000..dc762ec9a6 --- /dev/null +++ b/content/de/_collections/sponsors/index.md @@ -0,0 +1,3 @@ +--- +navigation: false +--- diff --git a/content/de/_collections/sponsors/mvp/chrome.md b/content/de/_collections/sponsors/mvp/chrome.md new file mode 100644 index 0000000000..cf702bcb18 --- /dev/null +++ b/content/de/_collections/sponsors/mvp/chrome.md @@ -0,0 +1,9 @@ +--- +title: 'Google Chrome' +img: 'google-chrome.png' +img_square: 'chrome.svg' +#link: chrome +url: https://www.google.com/chrome/ +tier: 'MVP' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/1.vue-mastery.md b/content/de/_collections/sponsors/sponsors/1.vue-mastery.md new file mode 100644 index 0000000000..7f87026168 --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/1.vue-mastery.md @@ -0,0 +1,8 @@ +--- +title: 'VueMastery' +img: 'vue-mastery.png' +img_square: 'vue-mastery.svg' +url: 'https://www.vuemastery.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/10.remotely.md b/content/de/_collections/sponsors/sponsors/10.remotely.md new file mode 100644 index 0000000000..9c709f9ff6 --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/10.remotely.md @@ -0,0 +1,8 @@ +--- +title: 'Remotely' +img: 'remotely.png' +img_square: 'remotely.svg' +url: 'https://remotely.so/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/11.flashdrive.md b/content/de/_collections/sponsors/sponsors/11.flashdrive.md new file mode 100644 index 0000000000..cc4bf31e2a --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/11.flashdrive.md @@ -0,0 +1,8 @@ +--- +title: 'Flashdrive' +img: 'flashdrive.png' +img_square: 'flashdrive.jpeg' +url: 'https://flashdrive.io' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/12.movavi.md b/content/de/_collections/sponsors/sponsors/12.movavi.md new file mode 100644 index 0000000000..f134a8be25 --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/12.movavi.md @@ -0,0 +1,8 @@ +--- +title: 'Movavi' +img: 'movavi.png' +img_square: 'movavi.svg' +url: 'https://www.movavi.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/13.hdnet.md b/content/de/_collections/sponsors/sponsors/13.hdnet.md new file mode 100644 index 0000000000..5c8af9ec18 --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/13.hdnet.md @@ -0,0 +1,8 @@ +--- +title: 'HDNET' +img: 'hdnet.svg' +img_square: 'hdnet.svg' +url: 'https://hdnet.de?ref=nuxt' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/2.legal-nature.md b/content/de/_collections/sponsors/sponsors/2.legal-nature.md new file mode 100644 index 0000000000..0b1c3f7eea --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/2.legal-nature.md @@ -0,0 +1,8 @@ +--- +title: 'Legal Nature' +img: 'legal-nature.png' +img_square: 'legal-nature.svg' +url: 'https://www.legalnature.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/3.sparheld.md b/content/de/_collections/sponsors/sponsors/3.sparheld.md new file mode 100644 index 0000000000..0e01193a7a --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/3.sparheld.md @@ -0,0 +1,8 @@ +--- +title: 'Sparheld' +img: 'sparheld.png' +img_square: 'sparheld.svg' +url: 'https://www.sparheld.de/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/4.icons-8.md b/content/de/_collections/sponsors/sponsors/4.icons-8.md new file mode 100644 index 0000000000..42061dbc6e --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/4.icons-8.md @@ -0,0 +1,8 @@ +--- +title: 'Icons8' +img: 'icons8.png' +img_square: 'icons8.svg' +url: 'https://icons8.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/5.firestickhow.md b/content/de/_collections/sponsors/sponsors/5.firestickhow.md new file mode 100644 index 0000000000..14365876ce --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/5.firestickhow.md @@ -0,0 +1,8 @@ +--- +title: 'FireStickHow' +img: 'fire-stick-how.png' +img_square: 'fire-stick-how.svg' +url: 'https://www.firestickhow.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/6.minitool.md b/content/de/_collections/sponsors/sponsors/6.minitool.md new file mode 100644 index 0000000000..6bcaee5812 --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/6.minitool.md @@ -0,0 +1,8 @@ +--- +title: 'MiniTool' +img: 'minitool.png' +img_square: 'minitool.png' +url: 'https://www.minitool.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/7.vps-server.md b/content/de/_collections/sponsors/sponsors/7.vps-server.md new file mode 100644 index 0000000000..72059d0e82 --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/7.vps-server.md @@ -0,0 +1,8 @@ +--- +title: 'VPS Server' +img: 'vps-server.png' +img_square: 'vps-server.svg' +url: 'https://www.vpsserver.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/8.fine-vpn.md b/content/de/_collections/sponsors/sponsors/8.fine-vpn.md new file mode 100644 index 0000000000..d06994e61e --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/8.fine-vpn.md @@ -0,0 +1,8 @@ +--- +title: 'fine VPN' +img: 'finevpn.png' +img_square: 'finevpn.png' +url: 'https://en.finevpn.org/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/sponsors/sponsors/9.sendcloud.md b/content/de/_collections/sponsors/sponsors/9.sendcloud.md new file mode 100644 index 0000000000..2288c5516a --- /dev/null +++ b/content/de/_collections/sponsors/sponsors/9.sendcloud.md @@ -0,0 +1,8 @@ +--- +title: 'SendCloud' +img: 'sendcloud.png' +img_square: 'sendcloud.svg' +url: 'https://www.sendcloud.com/' +tier: 'Sponsors' +size: 'h-12' +--- diff --git a/content/de/_collections/teams/1.framework.md b/content/de/_collections/teams/1.framework.md new file mode 100644 index 0000000000..b4389a500b --- /dev/null +++ b/content/de/_collections/teams/1.framework.md @@ -0,0 +1,43 @@ +--- +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/' +--- diff --git a/content/de/_collections/teams/2.community.md b/content/de/_collections/teams/2.community.md new file mode 100644 index 0000000000..4defd98b68 --- /dev/null +++ b/content/de/_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/de/_collections/teams/index.md b/content/de/_collections/teams/index.md new file mode 100644 index 0000000000..dc762ec9a6 --- /dev/null +++ b/content/de/_collections/teams/index.md @@ -0,0 +1,3 @@ +--- +navigation: false +--- diff --git a/content/de/_collections/testimonials/index.md b/content/de/_collections/testimonials/index.md new file mode 100644 index 0000000000..17de407e17 --- /dev/null +++ b/content/de/_collections/testimonials/index.md @@ -0,0 +1,85 @@ +--- +testimonials: + - + testimonial: 'Nuxt bietet eine überzeugende Lösung und ein großartiges Ökosystem, um Ihnen zu helfen, Vue-Apps zu entwickeln, die performant und SEO-freundlich sind.' + author: 'Evan You' + authorIcon: 'evan' + authorUrl: 'https://twitter.com/youyuxi' + job: 'Creator of Vue.js' + jobIcon: 'vue' + jobUrl: 'https://vuejs.org' + - + testimonial: + 'Nuxt bringt von Anfang an eine herausragende Entwicklerproduktivität, -erfahrung und -leistung mit sich.
Es gibt so viel Liebe zum Detail, dass die Teams alles zur Hand haben, um jegliche Arten von Anwendungen produktiv zu entwickeln.' + 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 ist eine fantastische Wahl für Teams, die ein produktionsreifes Produkt im Web entwickeln. Es zielt darauf ab, Performance-Best-Practices einzubauen und gleichzeitig exzellente Vue.js DX zu erhalten.' + 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 war eine unglaubliche Quelle der Innovation und Inspiration für Entwickler und Framework-Autoren gleichermaßen. Es war erstaunlich, das Wachstum in Webprojekten aller Größenordnungen im Internet zu beobachten.' + 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 hat einen einzigartigen Ansatz, der eine großartige Entwicklererfahrung mit wiederverwendbaren, vollständig integrierten Funktionen kombiniert, die die Entwicklung und Leistung Ihrer nächsten Website oder Anwendung beschleunigen.' + author: 'Dominik Angerer' + authorIcon: 'dominik' + authorUrl: 'https://twitter.com/domangerer' + job: 'Founder of Storyblok' + jobIcon: 'storyblok' + jobUrl: 'https://www.storyblok.com' + - + testimonial: + 'Nuxt ist unsere erste Wahl, um unseren Nutzern eine nahtlose Website-Entwicklung zu ermöglichen. Seine Einfachheit und progressive Lernkurve machen es zu unserer idealen Wahl für SliceMachine.' + author: 'Sadek Drobi' + authorIcon: 'sadek' + authorUrl: 'https://twitter.com/Sadache' + job: 'Founder of Prismic' + jobIcon: 'prismic' + jobUrl: 'https://prismic.io' + - + testimonial: + "Jedes ernsthafte Full-Stack-Entwicklungsteam muss sich Nuxt ansehen. Die Entwicklerproduktivität von Vue in Kombination mit dem serverseitigen Rendering von Nuxt ist die Grundlage für schnell ladende Websites, die Benutzer begeistern und die Geschwindigkeit des Teams verbessern." + 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 hat die ideale Balance zwischen Zugänglichkeit für Entwickler, die neu in Jamstack sind, und Leistung für erfahrene Teams, die an komplexen Anwendungen arbeiten. Die Module und die erstklassige Integration mit dem Rest des Vue-Ökosystems sorgen für eine hervorragende DX.' + author: 'Dave Loneragan' + authorIcon: 'dave' + authorUrl: 'https://twitter.com/paper_tokyo' + job: 'Co-founder of Swell' + jobIcon: 'swell' + jobUrl: 'https://swell.is' + - + testimonial: + 'In dem Moment, in dem ich Nuxt zum ersten Mal verwendet habe, habe ich mich in die Software verliebt. Abgesehen von der Skalierbarkeit, der Leistung und der Erfahrung der Entwickler, ist auch das Team dahinter fantastisch. Vielen Dank für die Entwicklung eines so großartigen Frameworks, das unser Leben viel einfacher macht!' + 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/de/announcements/0.nuxt-static-improvements.md b/content/de/announcements/0.nuxt-static-improvements.md new file mode 100644 index 0000000000..c498306978 --- /dev/null +++ b/content/de/announcements/0.nuxt-static-improvements.md @@ -0,0 +1,171 @@ +--- +template: post +title: Nuxt Static-Verbesserungen +description: Mit Nuxt Version 2.13 wurde der full-static Modus eingeführt. Außerdem wurde ein neuer Befehl nuxt export hinzugefügt, um Ihre Seiten vorzurendern, ohne einen Webpack-Build auszulösen, mit dem Ziel, den Rendering- und Build-Prozess zu trennen. Das einzige Problem war, dass die meisten Nuxt-Benutzer nicht in der Lage waren, das volle Potenzial der Trennung auszuschöpfen... bis jetzt. +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 +--- + +## Einführung + +Mit Nuxt Version 2.13 wurde der [full-static Modus](/announcements/going-full-static) eingeführt. Außerdem wurde ein neuer Befehl nuxt export hinzugefügt, um Ihre Seiten vorzurechnen, ohne einen Webpack-Build auszulösen, mit dem Ziel, den Rendering- und Build-Prozess zu trennen. Das einzige Problem war, dass die meisten Nuxt-Benutzer nicht in der Lage waren, das volle Potenzial der Trennung auszuschöpfen... **bis jetzt**. + + +- [Einführung](#introduction) +- [Schnellere statische Deployments](#faster-static-deployments) +- [Generierungszeit: Cache vs. vollständiger Webpack-Build Prozess](#generate-time-cache-vs-full-webpack-build) +- [Verwendung in Ihren Projekten](#using-in-your-projects) + - [Dateien aus dem Cache ausschließen](#excluding-files-from-cache) + - [Für Modul-Autoren](#module-authors) +- [Wie es funktioniert](#how-it-works) + - [Zurück zu den alten Befehlen](#back-to-old-school-commands) +- [Was ist als nächstes zu tun?](#what-to-do-next) + +## Schnellere statische Deployments + +Mit Version 2.14, `nuxt generate` überspringt **automatisch den Webpack-Build, wenn kein Code geändert wurde** und verwendet den vorherigen Build unter Verwendung des Cache. Dies wird helfen, die Zeit für statische Deployments drastisch zu verbessern, indem unnötige Builds vermieden werden, die normalerweise der zeitaufwändigste Teil des Generierungsprozesses sind. Die Cache-Unterstützung ist **plattformunabhängig** und funktioniert mit Netlify, Vercel oder jedem anderen CI/CD-Setup, das "node_modules" zwischenspeichert. + +::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 +--- +:: + +## Generierungszeit: Cache vs. vollständiger Webpack-Build Prozess + +Hier der Vergleich in Sekunden zwischen den beiden Befehlen `nuxt generate`: + +- `Build` bedeutet, wenn ein Webpack-Build erforderlich ist +- `Cache` bedeutet nur, wenn sich der Inhalt geändert hat (Webpack-Build übersprungen) + + + +::alert{type="next"} +Die statische Generation unserer Projekte bei Inhaltsänderungen ist jetzt **~3,6x** schneller 🚀. +:: + +Projekt-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) und [Nuxt Docs](https://github.com/nuxt/nuxtjs.org). + +## Verwendung in Ihren Projekten + +1. Aktualisieren Sie `nuxt` auf die neueste Version v2.14. + +::code-group +```bash [Yarn] +yarn upgrade nuxt +``` +```bash [NPM] +npm update +``` +:: + +2. Gehen Sie sicher, dass `target`, `static` ist innerhalb deiner `nuxt.config` + +```js{}[nuxt.config.js] +export default { + target: 'static' + // ... +} +``` + +`nuxt generate` verhält sich wie bisher, um Änderungen zu vermeiden und Legacy-Kompatibilität zu gewährleisten, wenn Sie `target: ‘server’` beibehalten oder das Ziel nicht angeben. + +3. Das war's 🙌 + +Nun wird der Befehl `nuxt generate` das Projekt nur dann erstellen, wenn es notwendig ist, was der Fall ist, wenn Dateien innerhalb des Projekts geändert wurden. Es wird Ihre Routen immer in statische HTML-Dateien umwandeln, wie es `nuxt export` bereits tut. + +Jetzt müssen Sie nur noch Ihren Build-Befehl von `nuxt build && nuxt export` in `nuxt generate` auf der von Ihnen verwendeten Plattform ändern. Wenn Sie ein CI verwenden, stellen Sie sicher, dass Sie `node_modules` richtig zwischenspeichern. + +### Dateien aus dem Cache ausschließen + +Standardmäßig ignoriert Nuxt diese Verzeichnisse, so dass bei Änderungen innerhalb dieser Verzeichnisse kein Build ausgelöst wird: + +- Build Ordner (`.nuxt/`) +- Static Ordner (`static/`) +- Generate dist (`dist/`) +- `node_modules` +- `README.md` +- Versteckte dotfiles (z.B. `.npmrc`) + +Sie können weitere Ausnahmen hinzufügen, indem Sie die [generate.cache.ignore](/docs/configuration-glossary/configuration-generate#cache) Option in `nuxt.config` benutzen: + +```js{}[nuxt.config.js] +export default { + generate: { + cache: { + ignore: [ + // When something changed in the docs folder, do not re-build via webpack + 'docs' + ] + } + } +} +``` + +Es ist auch möglich, eine Funktion für die Option `ignore` zu verwenden, um die Standard-Einträge zu überschreiben. + +### Für Modul-Autoren + +Was ist, wenn Sie ein Nuxt-Modul entwickeln, das mit Dateien arbeitet, die keinen Rebuild auslösen sollen? Ein gutes Beispiel ist das [@nuxt/content](https://content.nuxtjs.org) Modul, das Markdown-Dateien aus dem Repository liest. In diesem Fall werden diese Dateien innerhalb eines Laufzeitmoduls verwendet, was bei der Verwendung von `@nuxt/content` der Fall ist. Das Modul selbst kann nuxt anweisen, diese Dateien für Sie zu ignorieren, so dass Sie nichts tun müssen! Modulautoren können dazu den neuen `generate:cache:ignore`-Hook verwenden: + +```js +nuxt.hook('generate:cache:ignore', ignore => ignore.push('content')) +``` + +## Wie es funktioniert + +Wenn man das neue `nuxt generate` mit `static` target benutzt, wird ein Snapshot mit der Prüfsumme der nicht-ignorierten Projektdateien sowie der Nuxt-Version und einigen anderen Konfigurationen in `.nuxt/build.json` geschrieben. Zusätzlich verschieben wir auch das Build-Verzeichnis nach `node_modules/.cache/nuxt`. Da `node_modules` von allen wichtigen Plattformen (Netlify, Vercel, ...) und gängigen CI/CD-Skripten gecached wird, funktioniert diese Lösung ohne zusätzliche Konfiguration. + +Wenn `nuxt generate` anschließend ausgeführt wird, erstellt es wieder eine Prüfsumme auf der Grundlage Ihrer Projektdateien und vergleicht sie dann mit der vorhandenen Prüfsumme in `node_modules/.cache/nuxt/build.json`. + +Wenn sie übereinstimmen, bedeutet das, dass sich nichts geändert hat, was neu erstellt werden muss, so dass wir direkt mit dem Rendern der Seiten beginnen können. + +Wird keine Änderung erkannt, bedeutet dies, dass ein vollständiger Rebuild erforderlich ist. Sie können auch in der Konsole nachsehen, welche Datei den Rebuild verursacht hat. Nach dem Build wird `nuxt generate` die neue Prüfsumme in `.nuxt/build.json` speichern. Sie können die vollständige Implementierung [hier überprüfen](https://github.com/nuxt/nuxt.js/pull/7712). + + +### Zurück zu den alten Befehlen + +Mit Nuxt v2.13 haben wir `nuxt export` und `nuxt serve` eingeführt, die speziell für statische Ziele entwickelt wurden. Mit Nuxt v2.14 sind sie veraltet, da `nuxt generate` und `nuxt start` das Ziel intelligent erkennen und builden. + +Server Ziel: + +- `nuxt dev` = Entwicklungsserver +- `nuxt build` = Ihre Anwendung für die Production builden +- `nuxt start` = Den Production Server starten (Für Node.js Hosting wie Heroku, Digital Ocean, etc) + +Statisches Ziel: + +- `nuxt dev` = Entwicklungsserver +- `nuxt generate` = Ihre Anwendung für die Production builden +- `nuxt start` = Das Verzeichnis `dist/` wird vearbeitet, wie es Ihr statisches Hosting tun würde (Netlify, Vercel, Surge, etc.), ideal für Tests vor dem Deployment + +## Was ist als nächstes zu tun? + +- Aktualisieren Sie Ihr Projekt auf [nuxt@2.14.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.14.0) +- Benutze `nuxt generate` anstatt `nuxt export` +- Benutze `nuxt start` anstatt `nuxt serve` +- Genießen schnelle Deployments 🤙 diff --git a/content/de/announcements/1.going-full-static.md b/content/de/announcements/1.going-full-static.md new file mode 100644 index 0000000000..11ef595c19 --- /dev/null +++ b/content/de/announcements/1.going-full-static.md @@ -0,0 +1,176 @@ +--- +template: post +title: 'Vollständig statisch' +description: 'Lang erwartete Funktionen für Jamstack-Fans wurden in v2.13 eingeführt: vollständig statischer Export, verbessertes Smart Prefetching, integrierter Crawler, schnelleres Re-Deployment, eingebauter Webserver und neue Zieloption für die Konfiguration ⚡️' +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 +--- + +## Zusammenfasung + +1. Aktualisieren Sie Ihr Projekt auf `2.14.0` +2. Setzte `target: 'static'` in ihrer `nuxt.config.js` +3. `nuxt generate` ausführen +4. Das war's ✨ + +\_Tipp: Sie können `nuxt start` ausführen, um einen lokalen Server zu starten, der Ihre generierte statische Anwendung bedient. + +## ::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 + +--- + +:: + +

+ +Notiz: In diesem Video benutzen wir `nuxt export` welches veraltet ist und durch `nuxt generate` ersetzt wurde. + +

+ +## Inhaltsverzeichnis + +- [Zusammenfassung](#too-long-to-read) +- [Inhaltsverzeichnis](#table-of-contents) +- [Geschichte](#history) +- [Aktuelle Probleme](#current-issues) +- [Neue Config Option: `target`](#new-config-option-target) +- [Smarter `nuxt generate`](#smarter-nuxt-generate) + - [Wahnsinnig schnelle statische Anwendungen](#crazy-fast-static-applications) + - [Crawler integriert](#crawler-integrated) + - [Schnellerer Re-Deploy](#faster-re-deploy) +- [Smarter `nuxt start`](#smarter-nuxt-start) +- [Vorschau Modus](#preview-mode) +- [Commands](#commands) + - [Was ist als nächstes zu tun?](#what-to-do-next) + +## Geschichte + +Nuxt hatte die statische Generierungsfunktion `nuxt generate` seit [v0.3.2](https://github.com/nuxt/nuxt.js/releases/tag/v0.3.2) (November 2016). Seither haben wir sie auf verschiedene Weise verbessert, aber nie eine vollständige statische Generierung erreicht. Heute freue ich mich, ankündigen zu können, dass der vollständige statische Export nun mit Nuxt 2.13 möglich ist. + +## Aktuelle Probleme + +`nuxt generate` ist größtenteils Pre-Rendering, wenn Sie clientseitig navigieren, werden "asyncData" und "fetch" aufgerufen, _die eine Anfrage an Ihre API senden_. Viele Benutzer haben darum gebeten, einen "vollständigen statischen" Modus zu unterstützen, was bedeutet, dass diese 2 Hooks bei der Navigation nicht aufgerufen werden, da die nächste Seite bereits vorgerendert wurde. + +Auch die Erfahrung der Entwickler ist nicht optimal: + +- Sie haben Zugriff auf `req` oder `res` im SSR, aber nicht, wenn Sie `nuxt generate` ausführen +- `process.static` ist nur dann `true`, wenn `nuxt generate` ausgeführt wird, was die Entwicklung von Nuxt-Modulen oder Plugins für die statische Generierung verlangsamt +- Sie müssen alle Ihre [dynamischen Routen](/docs/features/file-system-routing#dynamic-routes) in `generate.routes` angeben, was es schwieriger macht, da Sie dort keinen Zugriff auf Nuxt-Module haben. +- [SPA fallback](/docs/concepts/static-site-generation#spa-fallback) kann in der Entwicklung nicht getestet werden, der Fallback ist eine reine Client-Version Ihrer Nuxt-Anwendung, die beim Aufrufen einer 404-Seite geladen wird +- `nuxt generate` führt standardmäßig `nuxt build` aus, wodurch die Erstellung der Website langsamer wird, wenn sich nur der Inhalt ändert + +Beachten Sie, dass es möglich war, vollen statischen Support mit dem [nuxt-payload-extractor](https://github.com/DreaMinder/nuxt-payload-extractor) Modul zu haben, aber es war komplizierter zu benutzen und hatte Einschränkungen. + +## Neue Config Option: `target` + +Um die Benutzerfreundlichkeit zu verbessern und Nuxt mitzuteilen, dass Sie Ihre Anwendung auf ein statisches Hosting exportieren möchten, führen wir die Option `target` in `nuxt.config.js` ein: + +```js{}[nuxt.config.js] +export default { + target: 'static' // default is 'server' +} +``` + + + +Vollständig statischen Support funktioniert nicht mit `ssr: 'false'` (was dasselbe ist wie die veraltete Option `mode: 'spa'`), da dies nur für clientseitiges Rendering verwendet wird (Single Page Applications). + + + +Das Ausführen von `nuxt dev` mit `target: 'static'` verbessert die Erfahrung der Entwickler: + +- `req` & `res` aus dem Context entfernen +- Fallback auf Client-seitiges Rendering bei 404, Fehlern und Weiterleitungen (siehe [SPA fallback](/docs/concepts/static-site-generation#spa-fallback)) +- `$route.query` wird beim serverseitigen Rendering immer gleich "{}" sein +- `process.static` ist `true` + +Wir stellen auch `process.target` für Modul-Autoren zur Verfügung, um Logik in Abhängigkeit vom Benutzerziel hinzuzufügen. + +## Smarter `nuxt generate` + +Jetzt mit `v2.14.0` kann man `nuxt generate` benutzen, es wird intelligent wissen, ob man Builden muss oder nicht. + +### Wahnsinnig schnelle statische Anwendungen + +`nuxt generate` mit `target: 'static'` wird alle Ihre Seiten Pre-rendern und in HTML umwandeln und eine Payload-Datei speichern, um `asyncData` und `fetch` bei der Navigation auf der Client-Seite zu simulieren. Das bedeutet **keine HTTP-Aufrufe an Ihre API bei der Navigation auf der Client-Seite mehr.** Durch die Extraktion der Seiten-Payloads in eine JS-Datei wird **auch die HTML-Größe** reduziert, sowie das Vorladen (aus dem im Header) für optimale Leistung. + +Wir haben auch das [smart prefetching](/announcements/introducing-smart-prefetching) verbessert, das bei vollständigem statischen Support auch die Payloads abruft, so dass die Navigation sofort erfolgt. 👀 + +### Crawler integriert + +Darüber hinaus verfügt es über einen Crawler, der jeden relativen Link erkennt und generiert: + +Wenn Sie eine Routen ausschließen möchten, verwenden Sie die Option [generate.exclude](/docs/configuration-glossary/configuration-generate#exclude). Sie können [generate.routes](/docs/configuration-glossary/configuration-generate#routes) weiterhin verwenden um extra Routen hinzufügen die der Crawler nicht erkennt. + +Um den Crawler zu deaktivieren setzten sie die Option `generate.crawler: false` in ihre `nuxt.cofig.js` + +### Schnellerer Re-Deploy + +Durch die Trennung von `nuxt build` und `nuxt export` eröffnen wir eine neue Reihe von Verbesserungen: pre-rendern Sie Ihre Seiten nur, wenn sich Ihr Inhalt geändert hat, das bedeutet: kein webpack build → Schnellerer Re-Deployments. + +## Smarter `nuxt start` + +Sobald Sie Ihre statische Nuxt-Anwendung in `dist/` generiert haben, verwenden Sie `nuxt start`, um einen Production-HTTP-Server zu starten und Ihre statische Anwendung zu deployen, die [SPA Fallback](/docs/concepts/static-site-generation#spa-fallback) unterstützt. + +Dieser Befehl eignet sich perfekt, um Ihre statische Anwendung lokal zu testen, bevor Sie sie an Ihren bevorzugten Hosting-Anbieter weitergeben. + +## Vorschau Modus + +Wir unterstützen die Live-Vorschau, damit Sie Ihre API weiterhin aufrufen können: + +```js{}[plugins/preview.client.js] +export default async function ({ query, enablePreview }) { + if (query.preview) { + enablePreview() + } +} +``` + +Die Daten der Seite werden automatisch aktualisiert (Aufruf von `nuxtServerInit`, `asyncData` und `fetch`). + +Wenn der Vorschau Modus aktiviert ist, werden die ursprünglichen Methoden `asyncData` und `fetch` aufgerufen. + +## Commands + +Je nach `target` können Sie diese Befehle ausführen. + +- `server` + - `nuxt dev`: Startet den Entwicklungs-Server + - `nuxt build`: Bundle deine Nuxt Anwendung für production + - `nuxt start`: Startet Production Nuxt-Anwendung +- `static` + - `nuxt dev`: Startet den Development Server (statisch) + - `nuxt generate`: Bundle Ihre Nuxt-Anwendung bei Bedarf für die Production (statisch) und exportieren Sie Ihre Anwendung als statisches HTML in das Verzeichnis `dist/`. + - `nuxt start`: Bedienen sie ihre Anwendung vom Verzeichnis `dist/` + +### Was ist als nächstes zu tun? + +::alert{type="next"} +Um mehr darüber zu erfahren, wie man von @nuxtjs/dotenv zur Laufzeitkonfiguration wechselt, lesen Sie [diesen Artikel](/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config). +:: + +::alert{type="next"} +[Newsletter abonnieren](#subscribe-to-newsletter) um die nächsten Artikel und Ressourcen nicht zu verpassen. +:: diff --git a/content/de/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md b/content/de/announcements/2.understanding-how-fetch-works-in-nuxt-2-12.md new file mode 100644 index 0000000000..65afefda84 --- /dev/null +++ b/content/de/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/de/announcements/3.nuxtjs-from-terminal-to-browser.md b/content/de/announcements/3.nuxtjs-from-terminal-to-browser.md new file mode 100644 index 0000000000..d6f7038924 --- /dev/null +++ b/content/de/announcements/3.nuxtjs-from-terminal-to-browser.md @@ -0,0 +1,55 @@ +--- +template: post +title: 'Nuxt: Vom Terminal zum Browser' +description: Wie wir die Entwicklererfahrung geändert haben, um den Wechsel zwischen Terminal und Browser zu verhindern. +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 ist ein Vue.js Framework um verschiedene Arten von Webanwendungen mit der **gleichen Verzeichnisstruktur & Konventionen** zu erstellen: Universal, Single Page, PWA oder statisch generiert.. + +_ℹ️ Diese Features sind ab folgender Version zu finden [v2.8.0 release](https://github.com/nuxt/nuxt.js/releases/tag/v2.8.0)._ + +## [](#problems)Probleme + +1. Die Entwicklung von JavaScript-Anwendungen mit Webpack oder einem anderen Builder erfordert den Wechsel zwischen Browser und Terminal zum Debuggen. +2. Die Verwendung von `console.log` zum Debuggen, wenn die Anwendung vom Server gerendert wird, erfordert, dass man sich daran erinnert, dass die Protokolle auf dem Terminal angezeigt werden, wenn die Seite aktualisiert wird. + +## [](#solutions)Lösungen + +1. Weiterleitung des Webpack-Build-Status direkt in den Browser und Anzeige in einer schicken Art und Weise. + +![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. Das Gleiche gilt für das Hot Module Replacement (sehr nützlich, wenn das Projekt größer wird und mehr Zeit für die Neuerstellung benötigt). + +![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. Weiterleitung von SSR-Protokollen an den Browser im Entwicklungsmodus + +![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 + +Der Zweck dieser Änderungen besteht darin, das Terminal nur für Befehle zu verwenden. + +Jetzt können Sie sich ganz auf Ihren Code und sein visuelles Ergebnis konzentrieren 🙂 + +> Be lazy, be smart, be Nuxt. + +Links: + +- Dokumentation: [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/de/announcements/4.introducing-smart-prefetching.md b/content/de/announcements/4.introducing-smart-prefetching.md new file mode 100644 index 0000000000..656e8912d1 --- /dev/null +++ b/content/de/announcements/4.introducing-smart-prefetching.md @@ -0,0 +1,31 @@ +--- +template: post +title: Einführung von Smart Prefetching +description: 'Ab Nuxt v2.4.0 wird Nuxt die mit einem nuxt-Link verknüpften code-gesplitteten Seiten automatisch vorladen, wenn sie standardmäßig im Viewport sichtbar sind.' +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 +--- + +## Einführung von Smart Prefetching ⚡️ + +Ab [Nuxt v2.4.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.4.0) wird Nuxt die mit einem nuxt-Link verknüpften code-gesplitteten Seiten automatisch vorladen, wenn sie standardmäßig im Viewport sichtbar sind. Dies verbessert die Leistung der Endnutzer enorm, inspiriert durch [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 sind online und wir empfehlen Ihnen, es auszuprobieren, um den Unterschied zu spüren: + +- Ohne prefetching (v2.3): [https://nuxt-no-prefetch.surge.sh](https://nuxt-no-prefetch.surge.sh) +- Mit prefetching (v2.4): [https://nuxt-prefetch.surge.sh](https://nuxt-prefetch.surge.sh) + +Du kannst mehr über dieses Feature lernen in der [``](/docs/features/nuxt-components#the-nuxtlink-component) Sektion der Dokumentation. diff --git a/content/de/announcements/index.md b/content/de/announcements/index.md new file mode 100644 index 0000000000..1c8faac46f --- /dev/null +++ b/content/de/announcements/index.md @@ -0,0 +1,9 @@ +--- +template: blog +title: Ankündigungen +description: Entdecken Sie Artikel des Nuxt-Teams. +blogPostList: true +sortBy: + field: 'position' + direction: 'asc' +--- diff --git a/content/de/case-studies/0.github.md b/content/de/case-studies/0.github.md new file mode 100644 index 0000000000..6a25d78e24 --- /dev/null +++ b/content/de/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) + +## 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) + +## 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/de/case-studies/1.livementor.md b/content/de/case-studies/1.livementor.md new file mode 100644 index 0000000000..9eb90357dc --- /dev/null +++ b/content/de/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) + +## 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/de/case-studies/2.stores.md b/content/de/case-studies/2.stores.md new file mode 100644 index 0000000000..04c0bedbbf --- /dev/null +++ b/content/de/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) + +## 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 Anguar 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) + +## 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/de/case-studies/3.parent-scheme.md b/content/de/case-studies/3.parent-scheme.md new file mode 100644 index 0000000000..9325d1feae --- /dev/null +++ b/content/de/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) + +## 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/de/case-studies/4.line.md b/content/de/case-studies/4.line.md new file mode 100644 index 0000000000..77012f6576 --- /dev/null +++ b/content/de/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) + +## 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/de/case-studies/5.404-place-vendome.md b/content/de/case-studies/5.404-place-vendome.md new file mode 100644 index 0000000000..eb4ee87c7c --- /dev/null +++ b/content/de/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) + +## 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) + +## 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/de/case-studies/6.komercia.md b/content/de/case-studies/6.komercia.md new file mode 100644 index 0000000000..fc36bddfeb --- /dev/null +++ b/content/de/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) + +## 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/de/case-studies/index.md b/content/de/case-studies/index.md new file mode 100644 index 0000000000..22b75987b0 --- /dev/null +++ b/content/de/case-studies/index.md @@ -0,0 +1,9 @@ +--- +template: blog +title: Fallstudien +description: Für die Fallstudien-Serie haben wir mit Unternehmen gesprochen, die Nuxt für die Entwicklung ihrer Produkte nutzen. Wir erkunden ihre Reise in das Framework und sein Ökosystem, untersuchen die Vielfalt der Projekte, für die Sie Nuxt verwenden können, und betrachten die Herausforderungen, auf die sie gestoßen sind, und die Vorteile, die sie erfahren haben. +blogPostList: true +sortBy: + field: 'position' + direction: 'asc' +--- diff --git a/content/de/contribution-guide/index.md b/content/de/contribution-guide/index.md new file mode 100644 index 0000000000..16bee6662e --- /dev/null +++ b/content/de/contribution-guide/index.md @@ -0,0 +1,105 @@ +--- +template: post +title: Contribution Guide +description: Jeder Beitrag zu Nuxt ist mehr als willkommen! +back: false +--- + +> Jeder Beitrag zu Nuxt ist mehr als willkommen! + +## Fehler melden + +Eine gute Möglichkeit, zum Projekt beizutragen, ist es, einen detaillierten Bericht zu schicken, wenn Sie auf ein Problem stoßen. Um die Dinge für Mitwirkende und Betreuer zu vereinfachen, verwenden wir [CMTY](https://cmty.nuxtjs.org/). + +Bitte stellen Sie sicher, dass Sie ein Reproduktions-Repository oder [CodeSandBox](https://template.nuxtjs.org/) angeben, damit Fehler ohne großen Aufwand reproduziert werden können. Je besser ein Fehler reproduziert werden kann, desto schneller können wir damit beginnen, ihn zu beheben! + +## Pull Requests + +Wir freuen uns über Ihre Pull Requests, auch wenn es nur darum geht, einen Tippfehler zu korrigieren! + +Jede signifikante Verbesserung sollte jedoch mit einem bestehenden [Feature Request](https://feature.nuxtjs.org/) oder [Bug Report](https://bug.nuxtjs.org/) verbunden werden. + +### Erste Schritte + +1. [Fork](https://help.github.com/articles/fork-a-repo/) die [Nuxt repository](https://github.com/nuxt/nuxt.js) zu deinem eigenen Github Account und dann [clone](https://help.github.com/articles/cloning-a-repository/) sie auf dein lokales Gerät. +2. Führe den Befehl `npm install` oder `yarn install` um alle Dependencies zu installieren. + +> _Beachten Sie, dass sowohl **npm** als auch **yarn** die Installation von Abhängigkeiten vergessen könnten. Um dies zu beheben, können Sie entweder den Ordner "node_modules" in Ihrer Beispielanwendung löschen und erneut installieren oder eine lokale Installation der fehlenden Dependencies durchführen._ + +> Wenn Sie eine Depenency hinzufügen, verwenden Sie bitte `yarn add`. Die Datei "yarn.lock" ist die Quelle für alle Nuxt-Dependencies. + +### Setup + +Bevor Sie Tests durchführen, vergewissern Sie sich, dass alle Dependencies erfüllt sind und erstellen Sie alle Packages: + +```sh +yarn +yarn build +``` + +### Test Struktur + +Eine großartige Pull Request, egal ob sie eine Fehlerbehebung oder eine neue Funktion enthält, beinhaltet oft auch Tests. Um gute Tests zu schreiben, wollen wir unsere Teststruktur erklären: + +#### Fixtures + +Die Fixtures (zu finden unter `tests/fixtures`) enthalten mehrere Nuxt-Anwendungen. Um die Build-Zeit so kurz wie möglich zu halten, bauen wir nicht für jeden Test eine eigene Nuxt-Anwendung. Stattdessen werden die Fixtures gebaut (`yarn test:fixtures`), bevor die eigentlichen Unit-Tests ausgeführt werden. + +Bitte stellen Sie sicher, dass Sie **eine Änderung** oder **eine neue Fixture** hinzufügen, wenn Sie eine Pull Request einreichen, um die Änderungen korrekt wiederzugeben (falls zutreffend). + +Vergessen Sie auch nicht, eine Fixture **neu zu erstellen**, nachdem Sie sie geändert haben, indem Sie den entsprechenden Test mit `jest test/fixtures/my-fixture/my-fixture.test.js` ausführen! + +#### Unit tests + +Die Unit-Tests sind in `tests/unit` zu finden und werden nach dem Bauen der Fixtures ausgeführt. Für jeden Test wird ein neuer Nuxt-Server verwendet, so dass kein gemeinsamer Zustand (außer dem Anfangszustand aus dem Build-Schritt) vorhanden ist. + +Nachdem Sie Ihre Unit-Tests hinzugefügt haben, können Sie sie direkt ausführen: + +```sh +jest test/unit/test.js +``` + +Oder Sie können die gesamte Unit-Test-Suite ausführen: + +```sh +yarn test:unit +``` + +Bitte beachten Sie auch hier, dass Sie möglicherweise Ihre Fixtures vorher builden müssen! + +### Änderungen testen + +Während der Arbeit an Ihrer PR werden Sie wahrscheinlich überprüfen wollen, ob Ihr Fixture korrekt eingerichtet ist oder Ihre aktuellen Änderungen debuggen. + +Dazu können Sie das Nuxt-Script selbst verwenden, um zum Beispiel Ihr Fixture oder eine Beispielanwendung zu starten: + +```sh +yarn nuxt examples/your-app +yarn nuxt test/fixtures/your-fixture-app +``` + +> `npm link` könnte auch (und tut es bis zu einem gewissen Grad) für diesen Zweck funktionieren, aber es ist bekannt dafür, dass es einige Probleme gibt. Deshalb empfehlen wir, `yarn nuxt` direkt aufzurufen, um Beispiele auszuführen. + +### Beispiele + +Wenn Sie an einer größeren Funktion arbeiten, legen Sie bitte eine Beispiel-App in `examples/` an. Dies wird sehr helfen, Änderungen zu verstehen und hilft auch Nuxt-Benutzern, die Funktion, die Sie gebaut haben, im Detail zu verstehen. + +### Linting + +Wie Sie vielleicht schon bemerkt haben, verwenden wir ESLint, um einen Code-Standard durchzusetzen. Bitte führen Sie `yarn lint` aus, bevor Sie Ihre Änderungen committen, um zu überprüfen, ob der Codestil korrekt ist. Wenn nicht, können Sie `yarn lint --fix` oder `npm run lint -- --fix` (kein Tippfehler!) verwenden, um die meisten Stiländerungen zu korrigieren. Wenn noch Fehler vorhanden sind, müssen Sie diese manuell korrigieren. + +### Dokumentation + +Wenn Sie eine neue Funktion hinzufügen, oder das Verhalten von Nuxt in irgendeiner anderen Weise verändern, werden Sie wahrscheinlich die Änderungen dokumentieren wollen. Bitte tun Sie dies mit einer Pull Request an das [docs](https://github.com/nuxt/docs/pulls) Repository. Sie müssen die Dokumentation nicht sofort erstellen (aber bitte tun Sie es, sobald Ihre Pull Request vollständig ist). + +### Endgültige Checkliste + +Wenn Sie Ihre Pull Request einreichen, gibt es eine einfache Vorlage, die Sie ausfüllen müssen. Bitte kreuzen Sie alle zutreffenden "Antworten" in den Checklisten an. + +### Fehlersuche + +#### Debugging Tests auf macOS + +Die Suche nach `getPort()` zeigt, dass es verwendet wird, um neue Nuxt-Prozesse während der Tests zu starten. Es wurde beobachtet, dass es unter macOS manchmal nicht mehr funktioniert und es kann erforderlich sein, einen Port für Tests manuell zu setzen. + +Ein weiteres häufiges Problem sind Nuxt-Prozesse, die bei der Ausführung von Fixture-Tests im Speicher hängen bleiben können. Ein Geisterprozess verhindert oft, dass nachfolgende Tests funktionieren. Führen Sie `ps aux | grep -i node` aus, um alle hängenden Testprozesse zu untersuchen, wenn Sie vermuten, dass dies der Fall ist. \ No newline at end of file diff --git a/content/de/design/index.md b/content/de/design/index.md new file mode 100644 index 0000000000..780f8c3045 --- /dev/null +++ b/content/de/design/index.md @@ -0,0 +1,89 @@ +--- +template: blank +title: 'Design Kit' +description: 'Erfahren Sie, wie Sie Nuxt-Logos, -Farben und -Schriften verwenden können, und laden Sie das Design-Kit herunter.' +layout: + fluid: true +navigation: false +--- + +## ::design-hero + +title: Design Kit +description: "Nuxt ist ein MIT-lizenziertes Open-Source-Projekt und kann völlig frei verwendet werden. +Sie können unsere Logos frei verwenden, solange Sie Nuxt erwähnen und auf nuxtjs.org verlinken." +button: Design Kit herunterladen + +--- + +:: + +::design-sections + +::design-section +#title +Monogramme + +#description +Unser Logo besteht aus zwei Elementen: den dreieckigen Bergen und der Wortmarke. In den meisten Fällen sollten sie zusammen erscheinen, wie das nebenstehende Master-Lockup zeigt. Das dreieckige Gebirge kann allein als Icon, Profilbild oder Abzeichen verwendet werden, aber die Wortmarke sollte nie ohne dieses Symbol an der Seite verwendet werden. + +#sectionComponent +:::design-logos + +--- + +type: monogram + +--- + +::: +:: + +::design-section +#title +Logos + +#sectionComponent +:::design-logos + +--- + +type: logos + +--- + +::: +:: + +::design-section +#title +Primärfarben + +#description +Unsere Farben wurden sorgfältig ausgewählt, um in verschiedenen Medien harmonisch und konsistent zu wirken. Verwenden Sie bei der Erstellung von Nuxt-Kommunikation die auf den folgenden Seiten dargestellten Farben, um sicherzustellen, dass Ihre Designs markenkonform sind. Diese von der Natur inspirierte primäre Farbpalette sollte in unserer gesamten offiziellen unternehmensbezogenen Kommunikation verwendet werden. + +#sectionComponent +:::design-colors + +--- + +buttonText: Color System herunterladen + +--- + +::: +:: + +::design-section +#title +Typografie + +#description +Unsere Marken-Font ist DM Sans von Colophon Foundry für Google. Diese Open-Source-Schriftart wurde wegen ihrer +Kombination aus Geschmeidigkeit und Struktur ausgewählt. Ihre geometrischen Formen und weichen Übergänge bringen Klarheit und Offenheit +in unsere Texte bringen. Da sie frei verfügbar ist, können auch andere Mitglieder der Nuxt-Gemeinschaft sie in ihre Arbeit integrieren. + +#sectionComponent +:::design-typography +:: +:: diff --git a/content/de/docs/1.get-started/1.installation.md b/content/de/docs/1.get-started/1.installation.md new file mode 100644 index 0000000000..56845b9561 --- /dev/null +++ b/content/de/docs/1.get-started/1.installation.md @@ -0,0 +1,206 @@ +--- +title: Installation +description: Here, you will find information on setting up and running a Nuxt project in 4 steps. +category: get-started +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/01_installation?fontsize=14&hidenavigation=1&theme=dark +CreateNuxtAppVideo: wHkPjOmJTt0 +CreateNuxtAppVideoTitle: Using create-nuxt-app +ManualInstallVideo: mKV_9AIG70E +ManualInstallVideoTitle: Nuxt Manual Installation +--- +# Installation + +Here, you will find information on setting up and running a Nuxt project in 4 steps. + +--- + +## Online playground + +You can play with Nuxt online directly on CodeSandbox or StackBlitz: + +:button-link[Play on CodeSandbox]{href=https://codesandbox.io/s/github/nuxt/codesandbox-nuxt/tree/master/ blank} +:button-link[Play on StackBlitz]{href=https://stackblitz.com/github/nuxt/starter/tree/stackblitz blank} + +## Prerequisites + +- [node](https://nodejs.org) - _We recommend you have the latest LTS version installed_. +- A text editor, we recommend [VS Code](https://code.visualstudio.com/) with the [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) extension or [WebStorm](https://www.jetbrains.com/webstorm/) +- A terminal, we recommend using VS Code's [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) or [WebStorm terminal](https://www.jetbrains.com/help/webstorm/terminal-emulator.html). + +## Using create-nuxt-app + +To get started quickly, you can use [create-nuxt-app](https://github.com/nuxt/create-nuxt-app). + +Make sure you have installed yarn, npx (included by default with npm v5.2+) or npm (v6.1+). + +::code-group +```bash [Yarn] +yarn create nuxt-app +``` +```bash [NPX] +npx create-nuxt-app +``` +```bash [NPM] +npm init nuxt-app +``` +:: + +It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc). To find out more about all the options see the [create-nuxt-app documentation](https://github.com/nuxt/create-nuxt-app/blob/master/README.md). + +Once all questions are answered, it will install all the dependencies. The next step is to navigate to the project folder and launch it: + +::code-group +```bash [Yarn] +cd +yarn dev +``` +```bash [NPM] +cd +npm run dev +``` +:: + +The application is now running on [http://localhost:3000](http://localhost:3000). Well done! + +::alert{type="info"} +Another way to get started with Nuxt is to use [CodeSandbox](https://template.nuxtjs.org) which is a great way for quickly playing around with Nuxt and/or sharing your code with other people. +:: + +## Manual Installation + +Creating a Nuxt project from scratch only requires one file and one directory. + +We will use the terminal to create the directories and files, feel free to create them using your editor of choice. + +### Set up your project + +Create an empty directory with the name of your project and navigate into it: + +```bash +mkdir +cd +``` + +_Replace `` with the name of your project._ + +Create the `package.json` file: + +```bash +touch package.json +``` + +Fill the content of your `package.json` with: + +```json{}[package.json] +{ + "name": "my-app", + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "generate": "nuxt generate", + "start": "nuxt start" + } +} +``` + +`scripts` define Nuxt commands that will be launched with the command `npm run ` or `yarn `. + +#### **What is a package.json file?** + +The `package.json` is like the ID card of your project. It contains all the project dependencies and much more. If you don't know what the `package.json` file is, we highly recommend you to have a quick read on the [npm documentation](https://docs.npmjs.com/creating-a-package-json-file). + +### Install Nuxt + +Once the `package.json` has been created, add `nuxt` to your project via `npm` or `yarn` like so below: + +::code-group +```bash [Yarn] +yarn add nuxt +``` +```bash [NPM] +npm install nuxt +``` +:: + +This command will add `nuxt` as a dependency to your project and add it to your `package.json`. The `node_modules` directory will also be created which is where all your installed packages and dependencies are stored. + +::alert{type="info"} + +A `yarn.lock` or `package-lock.json` is also created which ensures a consistent install and compatible dependencies of your packages installed in your project. + +:: + +### Create your first page + +Nuxt transforms every `*.vue` file inside the `pages` directory as a route for the application. + +Create the `pages` directory in your project: + +```bash +mkdir pages +``` + +Then, create an `index.vue` file in the `pages` directory: + +```bash +touch pages/index.vue +``` + +It is important that this page is called `index.vue` as this will be the default home page Nuxt shows when the application opens. + +Open the `index.vue` file in your editor and add the following content: + +```html{}[pages/index.vue] + +``` + +### Start the project + +Run your project by typing one of the following commands below in your terminal: + +::code-group +```bash [Yarn] +yarn dev +``` +```bash [NPM] +npm run dev +``` +:: + +::alert{type="info"} + +We use the dev command when running our application in development mode. + +:: + +The application is now running on **[http://localhost:3000](http://localhost:3000/)**. + +Open it in your browser by clicking the link in your terminal and you should see the text "Hello World" we copied in the previous step. + +::alert{type="info"} + +When launching Nuxt in development mode, it will listen for file changes in most directories, so there is no need to restart the application when e.g. adding new pages + +:: + +::alert{type="warning"} + +When you run the dev command it will create .nuxt folder. This folder should be ignored from version control. You can ignore files by creating a .gitignore file at the root level and adding .nuxt. + +:: + +### Bonus step + +Create a page named `fun.vue` in the `pages` directory. + +Add a `` and include a heading with a funny sentence inside. + +Then, go to your browser and see your new page on **[localhost:3000/fun](http://localhost:3000/fun)**. + +::alert{type="info"} + +Creating a directory named `more-fun` and putting an `index.vue` file inside it will give the same result as creating a `more-fun.vue` file. + +:: diff --git a/content/de/docs/1.get-started/2.routing.md b/content/de/docs/1.get-started/2.routing.md new file mode 100644 index 0000000000..1bacad2b0a --- /dev/null +++ b/content/de/docs/1.get-started/2.routing.md @@ -0,0 +1,52 @@ +--- +title: Routing +description: Most websites have more than just one page. For example a home page, about page, contact page etc. In order to show these pages we need a Router. +category: get-started +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/02_routing?fontsize=14&hidenavigation=1&theme=dark +video: cKutrcn-hdE +--- +# Routing + +Most websites have more than just one page. For example a home page, about page, contact page etc. In order to show these pages we need a Router. + +--- + +## Automatic Routes + +Most websites will have more than one page (i.e. a home page, about page, contact page etc.). In order to show these pages, we need a Router. That's where `vue-router` comes in. When working with the Vue application, you have to set up a configuration file (i.e. `router.js`) and add all your routes manually to it. Nuxt automatically generates the `vue-router` configuration for you, based on your provided Vue files inside the `pages` directory. That means you never have to write a router config again! Nuxt also gives you automatic code-splitting for all your routes. + +In other words, all you have to do to have routing in your application is to create `.vue` files in the `pages` folder. + +::alert{type="next"} +Learn more about [Routing](/docs/features/file-system-routing) +:: + +## Navigation + +To navigate between pages of your app, you should use the [NuxtLink](/docs/features/nuxt-components#the-nuxtlink-component) component. This component is included with Nuxt and therefore you don't have to import it as you do with other components. It is similar to the HTML `` tag, except that instead of using a `href="/about"` we use `to="/about"`. If you have used `vue-router` before, you can think of the `` as a replacement for `` + +A simple link to the `index.vue` page in your `pages` folder: + +```html{}[pages/index.vue] + +``` + +For all links to pages within your site, use ``. If you have links to other websites you should use the `` tag. See below for an example: + +```html{}[pages/index.vue] + +``` + +::alert{type="next"} +Learn more about the [NuxtLink component](/docs/features/nuxt-components#the-nuxtlink-component). +:: diff --git a/content/de/docs/1.get-started/3.directory-structure.md b/content/de/docs/1.get-started/3.directory-structure.md new file mode 100644 index 0000000000..0ac4ec1a21 --- /dev/null +++ b/content/de/docs/1.get-started/3.directory-structure.md @@ -0,0 +1,80 @@ +--- +title: Directory Structure +description: The default Nuxt application structure is intended to provide a great starting point for both small and large applications. You are free to organize your application however you like and can create other directories as and when you need them. +category: get-started +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/03_directory_structure?fontsize=14&hidenavigation=1&theme=dark +--- +# Directory Structure + +The default Nuxt application structure is intended to provide a great starting point for both small and large applications. You are free to organize your application however you like and can create other directories as and when you need them. + +--- + +Let's create the directories and files that do not exist in our project yet. + +```bash +mkdir components assets static +touch nuxt.config.js +``` + +These are the main directories and files that we use when building a Nuxt application. You will find an explanation of each of them below. + +::alert{type="info"} +Creating directories with these names enables features in your Nuxt project. +:: + +## Directories + +### The pages directory + +The `pages` directory contains your application's views and routes. As you've learned in the last chapter, Nuxt reads all the `.vue` files inside this directory and uses them to create the application router. + +::alert{type="next"} +Learn more about the [pages directory](/docs/directory-structure/pages) +:: + +### The components directory + +The `components` directory is where you put all your Vue.js components which are then imported into your pages. + +With Nuxt you can create your components and auto import them into your .vue files meaning there is no need to manually import them in the script section. Nuxt will scan and auto import these for you once you have components set to true. + +::alert{type="next"} +Learn more about the [components directory](/docs/directory-structure/components) +:: + +### The assets directory + +The `assets` directory contains your uncompiled assets such as your styles, images, or fonts. + +::alert{type="next"} +Learn more about the [assets directory](/docs/directory-structure/assets) +:: + +### The static directory + +The `static` directory is directly mapped to the server root and contains files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. the favicon) + +::alert{type="next"} +Learn more about the [static directory](/docs/directory-structure/static) +:: + +### The nuxt.config.js file + +The `nuxt.config.js` file is the single point of configuration for Nuxt. If you want to add modules or override default settings, this is the place to apply the changes. + +::alert{type="next"} +Learn more about the [nuxt.config.js file](/docs/directory-structure/nuxt-config) +:: + +### The package.json file + +The `package.json` file contains all the dependencies and scripts for your application. + +## More about the project structures + +There are more helpful directories and files, including [content](/docs/directory-structure/content), [layouts](/docs/directory-structure/layouts), [middleware](/docs/directory-structure/middleware), [modules](/docs/directory-structure/modules), [plugins](/docs/directory-structure/plugins) and [store](/docs/directory-structure/store) . As they aren't necessary for small applications, they are not covered here. + +::alert{type="next"} +To learn about all directories in detail, feel free to read the [Directory Structure book](/docs/directory-structure/nuxt). +:: diff --git a/content/de/docs/1.get-started/4.commands.md b/content/de/docs/1.get-started/4.commands.md new file mode 100644 index 0000000000..d7f35370ed --- /dev/null +++ b/content/de/docs/1.get-started/4.commands.md @@ -0,0 +1,169 @@ +--- +title: Commands and Deployment +description: Nuxt comes with a set of useful commands, both for development and production purpose. +category: get-started +video: hYdXzIGDlYA +--- +# Commands and deployment + +Nuxt comes with a set of useful commands, both for development and production purpose. + +--- + +## Using in package.json + +You should have these commands in your `package.json`: + +```json +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate" +} +``` + +You can launch your commands via `yarn ` or `npm run ` (example: `yarn dev` / `npm run dev`). + +## Development Environment + +To launch Nuxt in development mode with [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/) on `http://localhost:3000`: + + + +::code-group +```bash [Yarn] +yarn dev +``` +```bash [NPM] +npm run dev +``` +:: + +## List of Commands + +You can run different commands depending on the [target](/docs/features/deployment-targets): + +### target: `server` (default value) + +- **nuxt dev** - Launch the development server. +- **nuxt build** - Build and optimize your application with webpack for production. +- **nuxt start** - Start the production server (after running `nuxt build`). Use it for Node.js hosting like Heroku, Digital Ocean, etc. + +### target: `static` + +- **nuxt dev** - Launch the development server. +- **nuxt generate** - Build the application (if needed), generate every route as a HTML file and statically export to `dist/` directory (used for static hosting). +- **nuxt start** - serve the `dist/` directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying. + +## Webpack Config Inspection + +You can inspect the webpack config used by Nuxt to build the project (similar to [vue inspect](https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config)). + +- **nuxt webpack [query...]** + +**Arguments:** + +- `--name`: Bundle name to inspect. (client, server, modern) +- `--dev`: Inspect webpack config for dev mode +- `--depth`: Inspection depth. Defaults to 2 to prevent verbose output. +- `--no-colors`: Disable ANSI colors (disabled by default when TTY is not available or when piping to a file) + +**Examples:** + +- `nuxt webpack` +- `nuxt webpack devtool` +- `nuxt webpack resolve alias` +- `nuxt webpack module rules` +- `nuxt webpack module rules test=.jsx` +- `nuxt webpack module rules test=.pug oneOf use.0=raw` +- `nuxt webpack plugins constructor.name=WebpackBar options reporter` +- `nuxt webpack module rules loader=vue-` +- `nuxt webpack module rules "loader=.*-loader"` + +## Production Deployment + +Nuxt lets you choose between Server or Static deployments. + +### Server Deployment + +To deploy a SSR application we use `target: 'server'`, where server is the default value. + +::code-group +```bash [Yarn] +yarn build +``` +```bash [NPM] +npm run build +``` +:: + +Nuxt will create a `.nuxt` directory with everything inside ready to be deployed on your server hosting. + +::alert{type="info"} +We recommend putting `.nuxt` in `.npmignore` or `.gitignore`. +:: + +Once your application is built you can use the `start` command to see a production version of your application. + +::code-group +```bash [Yarn] +yarn start +``` +```bash [NPM] +npm run start +``` +:: + +### Static Deployment (Pre-rendered) + +Nuxt gives you the ability to host your web application on any static hosting. + +To deploy a static generated site make sure you have `target: 'static'` in your `nuxt.config.js` (for Nuxt >= 2.13): + +```js{}[nuxt.config.js] +export default { + target: 'static' +} +``` + +::code-group +```bash [Yarn] +yarn generate +``` +```bash [NPM] +npm run generate +``` +:: + +Nuxt will create a `dist/` directory with everything inside ready to be deployed on a static hosting service. + +As of Nuxt v2.13 there is a crawler installed that will now crawl your link tags and generate your routes when using the command `nuxt generate` based on those links. + + +::alert{type="warning"} +**Warning:** Dynamic routes are ignored by the `generate` command when using Nuxt <= v2.12: [API Configuration generate](/docs/configuration-glossary/configuration-generate) +:: + +::alert{type="info"} +When generating your web application with `nuxt generate`, [the context](/docs/internals-glossary/context) given to [asyncData](/docs/features/data-fetching#async-data) and [fetch](/docs/features/data-fetching#the-fetch-hook) will not have `req` and `res`. +:: + +#### **Fail on Error** + +To return a non-zero status code when a page error is encountered and let the CI/CD fail the deployment or build, you can use the `--fail-on-error` argument. + +::code-group +```bash [Yarn] +yarn generate --fail-on-error +``` +```bash [NPM] +npm run generate --fail-on-error +``` +:: + +## What's next? + +::alert{type="next"} +Read our [Deployment Guides](/integrations) to find examples for deployments to popular hosts. +:: diff --git a/content/de/docs/1.get-started/5.conclusion.md b/content/de/docs/1.get-started/5.conclusion.md new file mode 100644 index 0000000000..e919c4873d --- /dev/null +++ b/content/de/docs/1.get-started/5.conclusion.md @@ -0,0 +1,25 @@ +--- +title: Fazit +description: Herzlichen Glückwunsch, du hast jetzt deine erste Nuxt-App erstellt und kannst dich als Nuxter bezeichnen. Aber es gibt noch so viel mehr zu lernen und so viel mehr, was Sie mit Nuxt machen können. Hier sind ein paar Empfehlungen. +category: get-started +--- +# Fazit + +Herzlichen Glückwunsch, du hast jetzt deine erste Nuxt-App erstellt und kannst dich als Nuxter bezeichnen. Aber es gibt noch so viel mehr zu lernen und so viel mehr, was Sie mit Nuxt machen können. Hier sind ein paar Empfehlungen. +--- + +::alert{type="next"} +Schauen Sie sich das [Concepts book](../concepts/views) an +:: + +::alert{type="next"} +Arbeiten mit [asyncData](/docs/features/data-fetching#async-data) +:: + +::alert{type="next"} +Entscheiden zwischen verschiedenen [Rendering modes](/docs/features/rendering-modes) +:: + +::alert{type="star"} +Hat dir Nuxt bis jetzt gefallen? Vergessen Sie nicht [unser Projekt zu starn](https://github.com/nuxt/nuxt.js) auf GitHub +:: diff --git a/content/de/docs/1.get-started/6.upgrading.md b/content/de/docs/1.get-started/6.upgrading.md new file mode 100644 index 0000000000..0f0f3190c6 --- /dev/null +++ b/content/de/docs/1.get-started/6.upgrading.md @@ -0,0 +1,39 @@ +--- +title: Upgrading +description: Ein Upgrade von Nuxt geht schnell, ist aber aufwendiger als ein Update der package.json +category: get-started +--- +# Upgrading + +Ein Upgrade von Nuxt geht schnell, ist aber aufwendiger als ein Update der package.json + +--- + +Wenn Sie auf Nuxt v2.14 aktualisieren und Static Hosting verwenden möchten, müssen Sie [`target:static`](/docs/features/deployment-targets#static-hosting) zu Ihrer nuxt.config.js-Datei hinzufügen, damit der Generate Befehl richtig funktioniert. + +```js{}[nuxt.config.js] +export default { + target: 'static' +} +``` + +## Erste Schritte + +1. Überprüfen Sie die [Versionshinweise](/releases) für die Version, die Sie aktualisieren möchten, um zu sehen, ob es zusätzliche Anweisungen für diese bestimmte Version gibt. +2. Aktualisieren Sie die für das Paket `nuxt` in Ihrer Datei `package.json` angegebene Version. + +Nach diesem Schritt variieren die Anweisungen je nachdem, ob Sie Yarn oder npm verwenden. _[Yarn](https://yarnpkg.com/en/docs/usage) ist der bevorzugte Paketmanager für die Arbeit mit Nuxt, da es das Entwicklungswerkzeug ist, gegen das die Tests geschrieben wurden._ + +## Yarn + +3. Entfernen der `yarn.lock` Datei +4. Entfernen des `node_modules` Verzeichnis +5. Führen sie den `yarn` Befehl aus +6. Nachdem die Installation abgeschlossen ist und Sie Ihre Tests durchgeführt haben, sollten Sie auch die anderen Dependencies aktualisieren. Der Befehl `yarn outdated` kann verwendet werden. + +## npm + +3. Entfernen der `package-lock.json` Datei +4. Entfernen des `node_modules` Verzeichnis +5. Führen sie den `npm install` Befehl aus +6. Nachdem die Installation abgeschlossen ist und Sie Ihre Tests durchgeführt haben, sollten Sie auch die anderen Dependencies aktualisieren. Der Befehl `npm outdated` kann verwendet werden. diff --git a/content/de/docs/1.get-started/index.md b/content/de/docs/1.get-started/index.md new file mode 100644 index 0000000000..3ac4a407cc --- /dev/null +++ b/content/de/docs/1.get-started/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: false + redirect: /docs/get-started/installation +--- diff --git a/content/de/docs/2.concepts/1.views.md b/content/de/docs/2.concepts/1.views.md new file mode 100644 index 0000000000..ce0210a898 --- /dev/null +++ b/content/de/docs/2.concepts/1.views.md @@ -0,0 +1,169 @@ +--- +title: Views +description: The Views section describes all you need to know to configure data and views for a specific route in your Nuxt Application. Views consist of an app template, a layout, and the actual page. +category: concepts +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/01_views?fontsize=14&hidenavigation=1&theme=dark +--- +# Views + +The Views section describes all you need to know to configure data and views for a specific route in your Nuxt Application. Views consist of an app template, a layout, and the actual page. + +--- + +![Composition of a View in Nuxt](/img/docs/views.png) + +Composition of a View in Nuxt + +## Pages + +Every Page component is a Vue component but Nuxt adds special attributes and functions to make the development of your application as easy as possible. + +```html{}[pages/index.vue] + + + + + +``` + +## Properties of a page component + +There are many properties of the page component such as the head property in the example above. + +::alert{type="next"} +See the [Directory Structure book](/docs/directory-structure/nuxt) to learn more about all the properties can use on your page +:: + +## Layouts + +Layouts are a great help when you want to change the look and feel of your Nuxt app. For example you want to include a sidebar or have distinct layouts for mobile and desktop. + +### Default Layout + +You can define a default layout by adding a `default.vue` file inside the layouts directory. This will be used for all pages that don't have a layout specified. The only thing you need to include in the layout is the `` component which renders the page component. + +```html{}[layouts/default.vue] + +``` + +::alert{type="next"} +Learn more about the [Nuxt component](/docs/features/nuxt-components) in the components chapter +:: + +### Custom Layout + +You can create custom layouts by adding a `.vue` file to the layouts directory. In order to use the custom layout you need to set the `layout` property in the page component where you want to use that layout. The value will be the name of the custom layout that you have created. + +To create a blog layout add a `blog.vue` file to your layouts directory `layouts/blog.vue`: + +```html{}[layouts/blog.vue] + +``` + +::alert{type="warning"} +Make sure to add the `` component when creating a layout to actually include the page component. +:: + +We then use the layout property with the value of 'blog' in the page where we want that layout to be used. + +```html{}[pages/posts.vue] + + +``` + +::alert{type="info"} +If you don't add a layout property to your page, e.g. `layout: 'blog'`, then the `default.vue` layout will be used. +:: + +## Error Page + +The error page is a *page component* which is always displayed when an error occurs (that does not happen while server-side rendering). + +::alert{type="warning"} +Although this file is placed in the `layouts` folder, it should be treated as a page. +:: + +As mentioned above, this layout is special, since you should not include the ``  component inside its template. You must see this layout as a component displayed when an error occurs (`404`, `500`, etc.). Similar to other page components, you can set a custom layout for the error page as well in the usual way. + +You can customize the error page by adding a `layouts/error.vue` file: + +```html{}[layouts/error.vue] + + + +``` + +## Document: App.html + +The app template is used to create the actual HTML frame of your document for your Nuxt application which injects the content as well as variables for the head and body. This file is created automatically for you and in general rarely needs to be modified. You can customize the HTML app template used by Nuxt to include scripts or conditional CSS classes by creating an `app.html` file in the source directory of your project which by default is the root directory. + +The default template used by Nuxt is: + +```html{}[app.html] + + + + {{ HEAD }} + + + {{ APP }} + + +``` + +One use case of using a custom app template is to add conditional CSS classes for IE: + +```html{}[app.html] + + + + + {{ HEAD }} + + + {{ APP }} + + +``` + +::alert{type="info"} +While you can add JavaScript and CSS files in the `app.html`, it is recommended to use the `nuxt.config.js` for these tasks instead! +:: diff --git a/content/de/docs/2.concepts/2.context-helpers.md b/content/de/docs/2.concepts/2.context-helpers.md new file mode 100644 index 0000000000..4b5938d0cc --- /dev/null +++ b/content/de/docs/2.concepts/2.context-helpers.md @@ -0,0 +1,218 @@ +--- +title: Context and Helpers +description: The context provides additional and often optional information about the current request to the application. +category: concepts +csb_link_context: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/02_context_helpers-context?fontsize=14&hidenavigation=1&theme=dark +csb_link_helpers: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/02_context_helpers-helpers?fontsize=14&hidenavigation=1&theme=dark +--- +# Context and helpers + +The context provides *additional* and often optional information about the current request to the application. + +--- + +![](/img/docs/context.svg) + +The `context` object is available in specific Nuxt functions like [asyncData](/docs/features/data-fetching#async-data), [plugins](/docs/directory-structure/plugins), [middleware](/docs/directory-structure/middleware) and [nuxtServerInit](/docs/directory-structure/store#the-nuxtserverinit-action). It provides _additional_ and often optional information about the current request to the application. + +First and foremost, the context is used to provide access to other parts of the Nuxt application, e.g. the Vuex store or the underlying `connect` instance. Thus, we have the `req` and `res` objects in the context available on the server side and `store` always available. But with time, the context was extended with many other helpful variables and shortcuts. Now we have access to HMR (Hot Module Reload / Replacement) functionalities in `development` mode, the current `route`, page `params` and `query`, as well as the option to access environment variables through the context. Furthermore, module functions and helpers can be exposed through the context to be available on both - the client and the server side. + +**All context keys that are present by default** + +```js +function (context) { // Could be asyncData, nuxtServerInit, ... + // Always available + const { + app, + store, + route, + params, + query, + env, + isDev, + isHMR, + redirect, + error, + $config + } = context + + // Only available on the Server-side + if (process.server) { + const { req, res, beforeNuxtRender } = context + } + + // Only available on the Client-side + if (process.client) { + const { from, nuxtState } = context + } +} +``` + +::alert{type="warning"} +The _context_ we refer to here is not to be confused with the `context` object available in [Vuex Actions](https://vuex.vuejs.org/guide/actions.html) or the one available in the `build.extend` function in your `nuxt.config.js`. These are not related to each other! +:: + +Learn more about the different context keys in our [Internals Glossary](/docs/internals-glossary/context) + +### Using page parameters for your API query + +The context directly exposes possible dynamic parameters of the route via `context.params`. In the following example, we call an API via the `nuxt/http` module using a dynamic page parameter as part of the URL. Modules, like the [nuxt/http](https://http.nuxtjs.org/) module, can expose own functions which are then available through the [context.app](/docs/internals-glossary/context#app) object. + +Also, we wrap the API call in a `try/catch` statement to handle potential errors. With the `context.error` function, we can directly show Nuxt's error page and pass in the occurred error. + +```js{}[pages/posts/_id.vue] +export default { + async asyncData(context) { + const id = context.params.id + try { + // Using the nuxtjs/http module here exposed via context.app + const post = await context.app.$http.$get( + `https://api.nuxtjs.dev/posts/${id}` + ) + return { post } + } catch (e) { + context.error(e) // Show the nuxt error page with the thrown error + } + } +} +``` + +With [ES6](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/) you can use this syntax to destructure your context object. You can pass in the objects you want to have access to and then you can use them in the code without using the word context. + +```js{}[pages/posts/_id.vue] +export default { + async asyncData({ params, $http, error }) { + const id = params.id + + try { + // Using the nuxtjs/http module here exposed via context.app + const post = await $http.$get(`https://api.nuxtjs.dev/posts/${id}`) + return { post } + } catch (e) { + error(e) // Show the nuxt error page with the thrown error + } + } +} +``` + +Want to use query parameters instead? You then use [context.query.id](/docs/internals-glossary/context#query). + +### Redirecting users & accessing the store + +Accessing the [Vuex store](/docs/directory-structure/store) (when you have it set up through the `store` directory) is also possible through the context. It provides a `store` object which can be treated as `this.$store` in Vue components. In addition, we use the `redirect` method, an exposed helper through the context, to redirect the user in case the `authenticated` state is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy). + +```js +export default { + middleware({ store, redirect }) { + // retrieving keys via object destructuring + const isAuthenticated = store.state.authenticated + if (!isAuthenticated) { + return redirect('/login') + } + } +} +``` + +::alert{type="next"} +Check out the Internals Glossary book for more examples of the [redirect method](/docs/internals-glossary/context#redirect) +:: + +## Helpers + +Besides the shortcuts in the context, there are also other tiny helpers present in your Nuxt application. + +## `$nuxt`: The Nuxt helper + +`$nuxt` is a helper designed to improve the user experience and to be an escape hatch in some situations. It is accessible via `this.$nuxt` in Vue components and via `window.$nuxt` otherwise on the client side. + +### Connection checker + +The `$nuxt` helper provides a quick way to find out whether the internet connection of a user is present or not: It exposes the boolean values `isOffline` and `isOnline`. We can use these to show a message as soon as the user is offline (for example). + +```html{}[layouts/default.vue] + +``` + +### Accessing the root instance + +Besides providing DX/UX (Developer Experience / User Experience) features, the `$nuxt` helper also provides a shortcut to the root instance of your application from every other component. But that's not everything — you can also access the `$nuxt` helper through `window.$nuxt` which can be used as an escape hatch to gain access to module methods like `$axios` from outside your Vue components. This should be used wisely and **only as last resort**. + +### Refreshing page data + +When you want to refresh the current page for the user, you don't want to fully reload the page because you might hit the server again and at least re-initialize the whole Nuxt application. Instead, you often only want to refresh the data, provided by `asyncData` or `fetch`. + +You can do so, by using `this.$nuxt.refresh()`! + +```html + + + +``` + +#### Controlling the loading bar + +With `$nuxt`, you can also control Nuxt's loading bar programmatically via `this.$nuxt.$loading`. + +```js +export default { + mounted() { + this.$nextTick(() => { + this.$nuxt.$loading.start() + setTimeout(() => this.$nuxt.$loading.finish(), 500) + }) + } +} +``` + +Read more in the corresponding [loading feature chapter](/docs/features/loading) + +## onNuxtReady helper + +If you want to run some scripts _after_ your Nuxt application has been loaded and is ready, you can use the `window.onNuxtReady` function. This can be useful when you want to execute a function on the client-side without increasing the time to interactive of your site. + +```js +window.onNuxtReady(() => { + console.log('Nuxt is ready and mounted') +}) +``` + +## Process helpers + +Nuxt injects three boolean values (`client`, `server`, and `static`) into the global `process` object which will help you to determine whether your app was rendered on the server or fully on the client, as well as checking for static site generation. These helpers are available across your application and are commonly used in `asyncData` userland code. + +```html{}[pages/about.vue] + + + +``` + +In the example, `renderedOn` will evaluate to `'server'` when using server-side rendering and a user accesses the page directly. When the user would navigate to the page from another part of the application, e.g. by click on a ``, it will evaluate to client. diff --git a/content/de/docs/2.concepts/3.server-side-rendering.md b/content/de/docs/2.concepts/3.server-side-rendering.md new file mode 100644 index 0000000000..cd0de6f9c7 --- /dev/null +++ b/content/de/docs/2.concepts/3.server-side-rendering.md @@ -0,0 +1,98 @@ +--- +title: Server Side Rendering +description: Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. +category: concepts +--- +# Server side rendering + +Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. Server-side sends a fully rendered page to the client; the client's JavaScript bundle takes over which then allows the Vue.js app to [hydrate](https://ssr.vuejs.org/guide/hydration.html). + +--- + +## Node.js server required + +A JavaScript environment is required to render your web page. + +A Node.js server needs to be configured to execute your Vue.js application. + +## Extend and control the server + +You can extend the server with serverMiddleware and control routes with middleware. + +```js{}[server-middleware/logger.js] + +export default function (req, res, next) { + console.log(req.url) + next() +} +``` + +```js{}[nuxt.config.js] +export default { + serverMiddleware: ['~/server-middleware/logger'] + +} +``` + +## Server vs Browser environments + +Because you are in a Node.js environment you have access to Node.js objects such as `req` and `res`. You do not have access to the `window` or `document` objects as they belong to the browser environment. You can however use `window` or `document` by using the `beforeMount` or `mounted` hooks. + +```js +beforeMount () { + window.alert('hello'); +} +mounted () { + window.alert('hello'); +} +``` + +## Server-side rendering steps with Nuxt + +### Step 1: Browser to Server + +When a browser sends the initial request, it will hit the Node.js internal server. Nuxt will generate the HTML and send it back to the browser with results from executed functions, e.g. `asyncData`, `nuxtServerInit` or `fetch`. Hooks functions are executed as well. + +### Step 2: Server to Browser + +The browser receives the rendered page from the server with the generated HTML. The content is displayed and the Vue.js hydration kicks in, making it reactive. After this process, the page is interactive. + +### Step 3: Browser to Browser + +Navigating between pages with [``](/docs/features/nuxt-components#the-nuxtlink-component) is done on the client side so you don't hit the server again unless you hard refresh the browser. + +## Caveats + +### window or document undefined + +This is due to the server-side rendering. If you need to specify that you want to import a resource only on the client-side, you need to use the `process.client` variable. + +For example, in your `.vue` file: + +```js +if (process.client) { + require('external_library') +} +``` + +### iOS and phone numbers + +Some mobile Safari versions will automatically transform phone numbers into links. This will trigger a `NodeMismatch` warning as the SSR content doesn't match the website content anymore. This can make your app unusable on these Safari versions. + +If you include telephone numbers in your Nuxt page, you have two options. + +## Use a meta tag to stop the transformation + +```html + +``` + +## Wrap your phone numbers in links + +```html + + + +``` diff --git a/content/de/docs/2.concepts/4.static-site-generation.md b/content/de/docs/2.concepts/4.static-site-generation.md new file mode 100644 index 0000000000..63ddf3077f --- /dev/null +++ b/content/de/docs/2.concepts/4.static-site-generation.md @@ -0,0 +1,41 @@ +--- +title: Static Site Generation +description: With static site generation you can render your application during the build phase and deploy it to any static hosting services such as Netlify, GitHub pages, Vercel etc. This means that no server is needed in order to deploy your application. +category: concepts +--- +# Static Site Generation + +With static site generation you can render your application during the build phase and deploy it to any static hosting services such as Netlify, GitHub pages, Vercel etc. This means that no server is needed in order to deploy your application. + +--- +### Generating your site + +When deploying your site in with [`target:static`](/docs/features/deployment-targets#static-hosting) all your `.vue` pages will be generated into HTML and JavaScript files. All calls to APIs will be made and cached in a folder called static inside your generated content so that no calls to your API need to be made on client side navigation. + +### Step 1: Browser to CDN + +When a browser sends the initial request, it will hit the CDN. + +### Step 2: CDN to Browser + +The CDN will send the already generated HTML, JavaScript and static assets back to the browser. The content is displayed and the Vue.js hydration kicks in, making it reactive. After this process, the page is interactive. + +### Step 3: Browser to Browser + +Navigating between pages with [``](/docs/features/nuxt-components#the-nuxtlink-component) is done on the client side so you don't hit the CDN again and all API calls will be loaded from the already cached static folder even if you hard refresh the browser. + +### SPA Fallback + +Pages that have been excluded from generation, by using the `generate.exclude` property will fallback to being a single page application. These pages will therefore not exist in the CDN and will be rendered on client side in the browser once the user navigates to that page. + +::alert{type="next"} +To learn more about the [generate property](/docs/configuration-glossary/configuration-generate#exclude) +:: + +### Updating your content + +In order to get new content to your site from your API you will need to regenerate your site again. With most static sites hosting providers you can do this by pushing your changes to your main branch via the git command or via a pull request. + +### Preview Mode + +The Preview mode will call your API or your CMS so you can see the changes live before deploying. See the [preview mode](/docs/features/live-preview) on how to enable this feature. diff --git a/content/de/docs/2.concepts/5.nuxt-lifecycle.md b/content/de/docs/2.concepts/5.nuxt-lifecycle.md new file mode 100644 index 0000000000..65ffb86daa --- /dev/null +++ b/content/de/docs/2.concepts/5.nuxt-lifecycle.md @@ -0,0 +1,109 @@ +--- +title: Nuxt Lifecycle +description: No matter which tool you use, you will always feel more confident when you understand how the tool works under the hood. The same applies to Nuxt. +category: concepts +img: /docs/nuxt-lifecycle.svg +imgAlt: understanding-nuxt-2-12-lifecycle-hooks +--- +# Nuxt Lifecycle + +No matter which tool you use, you will always feel more confident when you understand how the tool works under the hood. The same applies to Nuxt. + +--- + +![](/img/docs/nuxt-lifecycle.svg) + +The goal of this chapter is to give you a high-level overview of the different parts of the framework, their order of execution and how they work together. + +The Nuxt lifecycle describes what happens after the build phase, where your application is bundled, chunked and minified. What happens after this phase depends on whether you have server-side rendering enabled or not. If you have, it furthermore depends on the type of server-side rendering you have chosen: + +Dynamic SSR (`nuxt start`) + +or Static Site Generation (`nuxt generate`). + +## Lifecycle + +### Server + +For SSR, these steps will be executed for every initial request to your app + +- The server starts (`nuxt start`) + +When using static site generation, the server steps are only executed on build time, but once for every page that will be generated + +- The generation process starts (`nuxt generate`) + +- Nuxt hooks +- serverMiddleware +- Server-side Nuxt plugins + - in order as defined in nuxt.config.js +- nuxtServerInit + - Vuex action that is called only on server-side to pre-populate the store + - First argument is the **Vuex context**, second argument is the **Nuxt context** + - Dispatch other actions from here → only "entry point" for subsequent store actions on server-side + - can only be defined in `store/index.js` +- Middleware + - Global middleware + - Layout middleware + - Route middleware +- asyncData +- beforeCreate (Vue lifecycle method) +- created (Vue lifecycle method) +- The new fetch (top to bottom, siblings = parallel) +- Serialization of state (`render:routeContext` Nuxt hook) + +- the HTML rendering happens (`render:route` Nuxt hook) + +- `render:routeDone` hook when HTML has been sent to the browser + +- `generate:before` Nuxt hook +- HTML files are generated + - **Full static generation** + - e.g. static payloads are extracted + - `generate:page` (HTML editable) + - `generate:routeCreated` (Route generated) +- `generate:done` when all HTML files have been generated + +### Client + +This part of the lifecycle is fully executed in the browser, no matter which Nuxt mode you've chosen. + +- Receives the HTML +- Loading assets (e.g. JavaScript) +- Vue Hydration +- Middleware + - Global middleware + - Layout middleware + - Route middleware +- client-side Nuxt plugin + - in order as defined in nuxt.config.js +- asyncData (blocking) +- beforeCreate (Vue lifecycle method) +- created (Vue lifecycle method) +- The new fetch (top to bottom, siblings = parallel) (non-blocking) +- beforeMount (Vue lifecycle method) +- mounted (Vue lifecycle method) + +### Navigate using the NuxtLink component + +Same as for the _client_ part, everything is happening in the browser but only when navigating via ``. Furthermore, no page content is displayed until all _blocking_ tasks are fulfilled. + +::alert{type="info"} +Check out the component chapter to see more info on [``](/docs/features/nuxt-components#the-nuxtlink-component) +:: + +- middleware (blocking) + - Global middleware + - Layout middleware + - Route middleware +- asyncData (blocking) +- asyncData (blocking) [or full static payload loading] +- beforeCreate & created (Vue lifecycle methods) +- fetch (non-blocking) +- beforeMount & mounted + +### What's next + +::alert{type="next"} +Check out the [Features book](/docs/features/rendering-modes) +:: diff --git a/content/de/docs/2.concepts/index.md b/content/de/docs/2.concepts/index.md new file mode 100644 index 0000000000..1cca585932 --- /dev/null +++ b/content/de/docs/2.concepts/index.md @@ -0,0 +1,5 @@ +--- +navigation: + collapse: true + redirect: /docs/concepts/views +--- diff --git a/content/de/docs/3.features/1.rendering-modes.md b/content/de/docs/3.features/1.rendering-modes.md new file mode 100644 index 0000000000..81e78e9de6 --- /dev/null +++ b/content/de/docs/3.features/1.rendering-modes.md @@ -0,0 +1,37 @@ +--- +title: Rendering +category: features +--- +# Rendering + +## Server Side Rendered Sites and Static Sites + +**Server-side rendered sites** are rendered on the server each time the user requests a page, therefore a server is needed to be able to serve the page on each request. + +**Static sites** are very similar to server-side rendered applications with the main difference being that static sites are rendered at build time, therefore no server is needed. Navigating from one page to another is then on the client-side. + +See [deployment targets](/docs/features/deployment-targets) for more info on static and server hosting. + +```js{}[nuxt.config.js] +export default { + ssr: true // default value +} +``` + +::alert{type="info"} +You do not need to add `ssr: true` to your nuxt config in order to enable server-side-rendering as it is enabled by default. +:: + +## Client Side Rendering Only + +With client side rendering only there is no server-side rendering. Client side rendering means rendering the content in the browser using JavaScript. Instead of getting all of the content from the HTML we just get a basic HTML document with a JavaScript file that will then render the rest of the site using the browser. For client side rendering set ssr to `false`. + +```js{}[nuxt.config.js] +export default { + ssr: false +} +``` + +::alert{type="next"} +[The ssr property](/docs/configuration-glossary/configuration-ssr) +:: diff --git a/content/de/docs/3.features/10.transitions.md b/content/de/docs/3.features/10.transitions.md new file mode 100644 index 0000000000..6119cee687 --- /dev/null +++ b/content/de/docs/3.features/10.transitions.md @@ -0,0 +1,235 @@ +--- +title: Transitions +description: Nuxt uses the transition component to let you create amazing transitions/animations between your routes. +category: features +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/05_transitions?fontsize=14&hidenavigation=1&theme=dark +--- +# Transitions + +Nuxt uses the [transition component](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) to let you create amazing transitions/animations between your routes. + +--- + +To define a custom transition for a specific route add the `transition` key to the page component. + +```js{}[pages/index.vue] +export default { + // Can be a String + transition: '' + // Or an Object + transition: {} + // or a Function + transition (to, from) {} +} +``` + +## String + +If the `transition` key is set as a string, it will be used as the `transition.name`. + +```js{}[pages/index.vue] +export default { + transition: 'home' +} +``` + +Nuxt will use these settings to set the component as follows: + +```html{}[pages/index.vue] + +``` + +::alert{type="warning"} +This is automatically done for you and you do not need to add the `` component to your pages or layouts. +:: + +Now all you have to do is create the new class for your transitions. + +```html{}[pages/index.vue] + +``` + +## Object + +If the `transition` key is set as an object: + +```js{}[pages/index.vue] +export default { + transition: { + name: 'home', + mode: 'out-in' + } +} +``` + +Nuxt will use these settings to set the component as follows: + +```html{}[pages/index.vue] + +``` + +The `transition` object can have many properties such as name, mode, css, duration and many more. Please see the vue docs for more info. + +You can also define methods in the page `transition` property, for more information on the [JavaScript hooks](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks) see the vue docs. + +```js +export default { + transition: { + afterLeave(el) { + console.log('afterLeave', el) + } + } +} +``` + +### Transition Mode + +::alert{type="warning"} +The default transition mode for pages differs from the default mode in Vue.js. The `transition` mode is by default set to `out-in`. If you want to run leaving and entering transitions simultaneously, you have to set the mode to the empty string `mode: ''`. +:: + +```js{}[pages/index.vue] +export default { + transition: { + name: 'home', + mode: '' + } +} +``` + +## Function + +If the `transition` key is set as a function: + +```js{}[pages/index.vue] +export default { + transition(to, from) { + if (!from) { + return 'slide-left' + } + return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left' + } +} +``` + +Transitions applied on navigation: + +`/` to `/posts` => `slide-left`,`/posts` to `/posts?page=3` => `slide-left`,`/posts?page=3` to `/posts?page=2` => `slide-right`. + +## Global Settings + +The Nuxt default transition name is `"page"`. To add a fade transition to every page of your application, all you need is a CSS file that is shared across all your routes. + +Our global css in `assets/main.css`: + +```css{}[assets/main.css] +.page-enter-active, +.page-leave-active { + transition: opacity 0.5s; +} +.page-enter, +.page-leave-to { + opacity: 0; +} +``` + +Then we add its path to the `css` array in our `nuxt.config.js` file: + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/main.css'] +} +``` + +## Configuration Settings + +### The layoutTransition Property + +The layout transition is used to set the default properties of the layout transitions. + +The default settings for layout transitions are: + +```js +{ + name: 'layout', + mode: 'out-in' +} +``` + +```css{}[assets/main.css] +.layout-enter-active, +.layout-leave-active { + transition: opacity 0.5s; +} +.layout-enter, +.layout-leave-active { + opacity: 0; +} +``` + +If you want to change the default settings for your layout transitions you can do so in the nuxt.config.js file. + +```js{}[nuxt.config.js] +export default { + layoutTransition: 'my-layouts' + // or + layoutTransition: { + name: 'my-layouts', + mode: 'out-in' + } +} +``` + +```css{}[assets/main.css] +.my-layouts-enter-active, +.my-layouts-leave-active { + transition: opacity 0.5s; +} +.my-layouts-enter, +.my-layouts-leave-active { + opacity: 0; +} +``` + +### The pageTransition Property + +The default settings for page transitions are: + +```js +{ + name: 'page', + mode: 'out-in' +} +``` + +Should you wish to modify the default settings you can do so in the nuxt.config.js + +```js{}[nuxt.config.js] +export default { + pageTransition: 'my-page' + // or + pageTransition: { + name: 'my-page', + mode: 'out-in', + beforeEnter (el) { + console.log('Before enter...'); + } + } +} +``` + +If you do modify the page Transition name you will also have to rename the css class. + +```css{}[assets/main.css] +.my-page-enter-active, +.my-page-leave-active { + transition: opacity 0.5s; +} +.my-page-enter, +.my-page-leave-to { + opacity: 0; +} +``` diff --git a/content/de/docs/3.features/11.live-preview.md b/content/de/docs/3.features/11.live-preview.md new file mode 100644 index 0000000000..17bdd57a7b --- /dev/null +++ b/content/de/docs/3.features/11.live-preview.md @@ -0,0 +1,85 @@ +--- +title: Preview Mode +description: Live Preview for target static with the preview mode +category: features +--- +# Preview mode + +Live Preview for target static with the preview mode + +--- +With Nuxt and full static you can now use live preview out of the box which will call your API or your CMS so you can see the changes live before deploying. + +::alert{type="warning"} +Only available when using [`target:static`](/docs/features/deployment-targets#static-hosting) +:: + +The preview mode will automatically refresh the page data as it uses `$nuxt.refresh` under the hood and therefore calls nuxtServerInit, asyncData and fetch on the client side. + +In order to activate live preview you will need to add the following plugin: + +```js{}[plugins/preview.client.js] +export default function ({ query, enablePreview }) { + if (query.preview) { + enablePreview() + } +} +``` + +::alert{type="warning"} +`enablePreview` is only available in the context object of plugins. Previews are handled client-side and +thus the plugin should be run on the client: preview.client.js +:: + +```js{}[nuxt.config.js] +export default { + plugins: ['~/plugins/preview.client.js'] +} +``` + +Once you have added the plugin you can now generate your site and serve it. + +::code-group +```bash [Yarn] +yarn generate +yarn start +``` +```bash [NPX] +npx nuxt generate +npx nuxt start +``` +:: + +Then you can see your preview page by adding the query param to the end of the page you want to see once: + +```js +?preview=true +``` + +::alert{type="warning"} +enablePreview should be tested locally with yarn start and not yarn +dev +:: + +### Previewing pages that are not yet generated + +For pages that are not yet generated, SPA fallback will still call the API before showing the 404 page as these pages exist on the API but are not generated yet. + +If you have set a validate hook, you will probably need to modify it so that it doesn't redirect to the 404 page in preview mode. + +```js +validate({ params, query }) { + if (query.preview) { + return true +} +``` + +### Passing data to enablePreview + +You can pass data to the `enablePreview` function. That data will then be available on the `$preview` context helper and on `this.$preview`. + +### What's next + +::alert{type="next"} +Check out the [Directory Structure book](/docs/directory-structure/nuxt) +:: diff --git a/content/de/docs/3.features/2.deployment-targets.md b/content/de/docs/3.features/2.deployment-targets.md new file mode 100644 index 0000000000..9908d43c1c --- /dev/null +++ b/content/de/docs/3.features/2.deployment-targets.md @@ -0,0 +1,44 @@ +--- +title: Deployment Targets +category: features +--- +# Deployment Targets + +## Static Hosting + +Nuxt also works as a static site generator. Statically render your Nuxt application and get all of the benefits of a universal app without a server. The `nuxt generate` command will generate a static version of your website. It will generate HTML for every one of your routes and put it inside of its own file in the `dist/` directory. This improves performance as well as SEO and better offline support. + +::alert{type="info"} +Dynamic routes are also generated thanks to the [Nuxt Crawler](/docs/configuration-glossary/configuration-generate#crawler) +:: + +For static sites the target of `static` needs to be added to your `nuxt.config` file. + +```js{}[nuxt.config.js] +export default { + target: 'static' // default is 'server' +} +``` + +**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 + +::alert{type="info"} +We are also exposing `process.target` for module authors to add logic depending on the user target. +:: + +## Server Hosting + +Server Hosting is hosting that requires a server and is intended for SSR applications or applications that are using [serverMiddleware](/docs/configuration-glossary/configuration-servermiddleware). Server-side rendering otherwise known as SSR means that your page is rendered on the server when it is requested by the user. When the user opens your page in a browser the browser sends a request to the server requesting that page. The page is rendered on the server and sent back to the browser with all its content. + +For server hosting the target of server is used, which is the default value. With SSR you use the `build` command to build your application. + +```js{}[nuxt.config.js] +export default { + target: 'server' +} +``` diff --git a/content/de/docs/3.features/3.file-system-routing.md b/content/de/docs/3.features/3.file-system-routing.md new file mode 100644 index 0000000000..0d0bcbcaa3 --- /dev/null +++ b/content/de/docs/3.features/3.file-system-routing.md @@ -0,0 +1,439 @@ +--- +title: File System Routing +description: Nuxt automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory. When you create a .vue file in your pages directory you will have basic routing working with no extra configuration needed. +category: features +--- +# File system routing + +Nuxt automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory. When you create a .vue file in your pages directory you will have basic routing working with no extra configuration needed. + +--- + + +Sometimes you might need to create dynamic routes or nested routes or you might need to further configure the router property. This chapter will go through everything you need to know in order to get the best out of your router. + +::alert{type="info"} +Nuxt gives you automatic code splitting for your routes, no configuration is needed +:: + +::alert{type="info"} +Use the [NuxtLink component](/docs/features/nuxt-components#the-nuxtlink-component) to navigate between pages +:: + +```html + +``` + +## Basic Routes + +This file tree: + +``` +pages/ +--| user/ +-----| index.vue +-----| one.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'user', + path: '/user', + component: 'pages/user/index.vue' + }, + { + name: 'user-one', + path: '/user/one', + component: 'pages/user/one.vue' + } + ] +} +``` + +## Dynamic Routes + +Sometimes it is not possible to know the name of the route such as when we make a call to an API to get a list of users or blog posts. We call these dynamic routes. To create a dynamic route you need to add an underscore (`_`) before the `.vue` file name or before the name of the directory. You can name the file or directory anything you want but you must prefix it with an underscore. + +This file tree: + +``` +pages/ +--| _slug/ +-----| comments.vue +-----| index.vue +--| users/ +-----| _id.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'users-id', + path: '/users/:id?', + component: 'pages/users/_id.vue' + }, + { + name: 'slug', + path: '/:slug', + component: 'pages/_slug/index.vue' + }, + { + name: 'slug-comments', + path: '/:slug/comments', + component: 'pages/_slug/comments.vue' + } + ] +} +``` + +::alert{type="info"} +As you can see the route named `users-id` has the path `:id?` which makes it optional, if you want to make it required, create an `index.vue` file in the `users/_id` directory instead. +:: + +::alert{type="info"} +As of Nuxt >= v2.13 there is a crawler installed that will now crawl your link tags and generate your dynamic routes based on those links. However if you have pages that are not linked to such as a secret page, then you will need to manually generate those dynamic routes. +:: + +::alert{type="next"} +[Generate dynamic routes](/docs/concepts/static-site-generation) for static sites +:: + +### Locally Accessing Route Params + +You can access the current route parameters within your local page or component by referencing `this.$route.params.{parameterName}`. For example, if you had a dynamic users page (`users/_id.vue`) and wanted to access the `id` parameter to load the user or process information, you could access the variable like this: `this.$route.params.id`. + +## Nested Routes + +Nuxt lets you create nested routes by using the children routes of vue-router. To define the parent component of a nested route, you need to create a Vue file with the same name as the directory which contains your children views. + +::alert{type="warning"} +Don't forget to include the [NuxtChild component](/docs/features/nuxt-components#the-nuxtchild-component) inside the parent component (`.vue` file). +:: + +This file tree: + +``` +pages/ +--| users/ +-----| _id.vue +-----| index.vue +--| users.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + path: '/users', + component: 'pages/users.vue', + children: [ + { + path: '', + component: 'pages/users/index.vue', + name: 'users' + }, + { + path: ':id', + component: 'pages/users/_id.vue', + name: 'users-id' + } + ] + } + ] +} +``` + +## Dynamic Nested Routes + +This is not a common scenario, but it is possible with Nuxt to have dynamic children inside dynamic parents. + +This file tree: + +``` +pages/ +--| _category/ +-----| _subCategory/ +--------| _id.vue +--------| index.vue +-----| _subCategory.vue +-----| index.vue +--| _category.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + path: '/', + component: 'pages/index.vue', + name: 'index' + }, + { + path: '/:category', + component: 'pages/_category.vue', + children: [ + { + path: '', + component: 'pages/_category/index.vue', + name: 'category' + }, + { + path: ':subCategory', + component: 'pages/_category/_subCategory.vue', + children: [ + { + path: '', + component: 'pages/_category/_subCategory/index.vue', + name: 'category-subCategory' + }, + { + path: ':id', + component: 'pages/_category/_subCategory/_id.vue', + name: 'category-subCategory-id' + } + ] + } + ] + } + ] +} +``` + +## Unknown Dynamic Nested Routes + +If you do not know the depth of your URL structure, you can use `_.vue` to dynamically match nested paths. This will handle requests that do not match a *more specific* route. + +This file tree: + +``` +pages/ +--| people/ +-----| _id.vue +-----| index.vue +--| _.vue +--| index.vue +``` + +Will handle requests like this: + +``` +/ -> index.vue +/people -> people/index.vue +/people/123 -> people/_id.vue +/about -> _.vue +/about/careers -> _.vue +/about/careers/chicago -> _.vue +``` + +::alert{type="info"} +Handling 404 pages is now up to the logic of the `_.vue` page. +:: + +## Extending the router + +There are multiple ways to extend the routing with Nuxt: + +- [router-extras-module](https://github.com/nuxt-community/router-extras-module) to customize the route parameters in the page +- component[@nuxtjs/router](https://github.com/nuxt-community/router-module) to overwrite the Nuxt router and write your own `router.js` file +- Use the [router.extendRoutes](/docs/configuration-glossary/configuration-router#extendroutes) property in your `nuxt.config.js` + +## The router Property + +The router property lets you customize the Nuxt router (vue-router). + +```js{}[nuxt.config.js] +export default { + router: { + // customize the Nuxt router + } +} +``` + +### Base: + +The base URL of the app. For example, if the entire single page application is served under `/app/`, then base should use the value `'/app/'`. + +::alert{type="next"} +[Router Base Property](/docs/configuration-glossary/configuration-router#base) +:: + +### extendRoutes + +You may want to extend the routes created by Nuxt. You can do so via the `extendRoutes` option. + +Example of adding a custom route: + +```js{}[nuxt.config.js] +export default { + router: { + extendRoutes(routes, resolve) { + routes.push({ + name: 'custom', + path: '*', + component: resolve(__dirname, 'pages/404.vue') + }) + } + } +} +``` + +If you want to sort your routes, you can use the  `sortRoutes(routes)`  function from `@nuxt/utils`: + +```js{}[nuxt.config.js] +import { sortRoutes } from '@nuxt/utils' +export default { + router: { + extendRoutes(routes, resolve) { + // Add some routes here ... + + // and then sort them + sortRoutes(routes) + } + } +} +``` + +::alert{type="warning"} +The schema of the route should respect the [vue-router](https://router.vuejs.org/en/) schema. +:: + +::alert{type="warning"} +When adding routes that use [Named Views](/docs/features/file-system-routing#nested-routes), don't forget to add the corresponding `chunkNames` of named `components`. +:: + +```js{}[nuxt.config.js] +export default { + router: { + extendRoutes(routes, resolve) { + routes.push({ + path: '/users/:id', + components: { + default: resolve(__dirname, 'pages/users'), // or routes[index].component + modal: resolve(__dirname, 'components/modal.vue') + }, + chunkNames: { + modal: 'components/modal' + } + }) + } + } +} +``` + +::alert{type="next"} +[extendRoutes Property](/docs/configuration-glossary/configuration-router#extendroutes) +:: + +### fallback + +Controls whether the router should fallback to hash mode when the browser does not support history.pushState but mode is set to history. + +::alert{type="next"} +[fallback Property](/docs/configuration-glossary/configuration-router#fallback) +:: + +### mode + +Configure the router mode, it is not recommended to change it due to server-side rendering. + +::alert{type="next"} +[mode Property](/docs/configuration-glossary/configuration-router#mode) +:: + +### parseQuery / stringifyQuery + +Provide custom query string parse / stringify functions. + +::alert{type="next"} +[parseQuery / stringifyQuery Property](/docs/configuration-glossary/configuration-router#parsequery--stringifyquery) +:: + +### routeNameSplitter + +You may want to change the separator between route names that Nuxt uses. You can do so via the `routeNameSplitter` option in your configuration file. Imagine we have the page file `pages/posts/_id.vue`. Nuxt will generate the route name programmatically, in this case `posts-id`. Changing the `routeNameSplitter` config to `/` the name will therefore change to `posts/id`. + +```js{}[nuxt.config.js] +export default { + router: { + routeNameSplitter: '/' + } +} +``` + +### scrollBehavior + +The `scrollBehavior` option lets you define a custom behavior for the scroll position between the routes. This method is called every time a page is rendered. + +::alert{type="next"} +To learn more about it, see [vue-router scrollBehavior documentation](https://router.vuejs.org/guide/advanced/scroll-behavior.html). +:: + +Available since:v2.9.0: + +In Nuxt you can use a file to overwrite the router scrollBehavior. This file should be placed in a folder called app. + +`~/app/router.scrollBehavior.js`. + +Example of forcing the scroll position to the top for every route: + +```js{}[app/router.scrollBehavior.js] +export default function (to, from, savedPosition) { + return { x: 0, y: 0 } +} +``` + +::alert{type="next"} +[Nuxt default `router.scrollBehavior.js` file.](https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/router.scrollBehavior.js) +:: + +::alert{type="next"} +[scrollBehavior Property](/docs/configuration-glossary/configuration-router#scrollbehavior) +:: + +### trailingSlash + +Available since: v2.10 + +If this option is set to true, trailing slashes will be appended to every route. If set to false, they'll be removed. + +```js{}[nuxt.config.js] +export default { + router: { + trailingSlash: true + } +} +``` + +::alert{type="warning"} +This option should not be set without preparation and has to be tested thoroughly. When setting `router.trailingSlash` to something else other than `undefined`(which is the default value), the opposite route will stop working. Thus 301 redirects should be in place and your *internal linking* has to be adapted correctly. If you set `trailingSlash` to `true`, then only `example.com/abc/` will work but not `example.com/abc`. On false, it's vice-versa. +:: + +::alert{type="next"} +[trailingSlash Property](/docs/configuration-glossary/configuration-router#trailingslash) +:: diff --git a/content/de/docs/3.features/4.data-fetching.md b/content/de/docs/3.features/4.data-fetching.md new file mode 100644 index 0000000000..539d3cac08 --- /dev/null +++ b/content/de/docs/3.features/4.data-fetching.md @@ -0,0 +1,272 @@ +--- +title: Data Fetching +description: In Nuxt we have 2 ways of getting data from an API. We can use the fetch method or the asyncData method. +category: features +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/04_data_fetching?fontsize=14&hidenavigation=1&theme=dark +--- +# Data Fetching + +In Nuxt we have 2 ways of getting data from an API. We can use the fetch method or the asyncData method. + +--- + +Nuxt supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component's `mounted()` hook. Universal apps, however, need to use Nuxt-specific hooks to be able to render data during server-side rendering. This allows your page to render with all of its required data present. + +Nuxt has two hooks for asynchronous data loading: + +- **`asyncData`**. This hook can only be placed on _page_ components. Unlike `fetch`, this hook does not display a loading placeholder during client-side rendering: instead, this hook blocks route navigation until it is resolved, displaying a page error if it fails. +- **`fetch`** (Nuxt 2.12+). This hook can be placed on any component, and provides shortcuts for rendering loading states (during client-side rendering) and errors. + +These hooks can be used with _any data fetching library_ you choose. We recommend using [@nuxt/http](https://http.nuxtjs.org/) or [@nuxt/axios](https://axios.nuxtjs.org/) for making requests to HTTP APIs. More information about these libraries, such as guides for configuring authentication headers, can be found in their respective documentation. + +::alert{type="info"} +If you define `fetch` or `asyncData` inside a mixin and also have it defined in a component/page, the mixin function will be overwritten instead of called. +:: + +## The fetch hook + +::alert{type="info"} +**Before Nuxt 2.12, there was a different `fetch` hook that only worked for _page_ components and didn't have access to the component instance.** + +If your `fetch()` accepts a `context` argument, it will be treated like a legacy fetch hook. This functionality is deprecated, and should be replaced with either `asyncData` or an [anonymous middleware](/docs/directory-structure/middleware#anonymous-middleware). +:: + +`fetch` is a hook called during server-side rendering after the component instance is created, and on the client when navigating. The fetch hook should return a promise (whether explicitly, or implicitly using `async/await`) that will be resolved: + +- On the server, before the initial page is rendered +- On the client, some time after the component is mounted + +::alert{type="info"} +For [static hosting](/docs/features/deployment-targets#static-hosting), the fetch hook is only called during page generation, and the result is then cached for use on the client. To avoid cache conflicts, it may be necessary to specify a name for your component, or alternatively provide a unique fetchKey implementation. +:: + +### Usage + +#### Fetching data +Within the fetch hook, you will have access to the component instance via `this`. + +::alert{type="info"} +Make sure any properties you want to modify have already been declared in `data()`. Then the data that comes from the fetch can be assigned to these properties. +:: + +#### Changing fetch behavior + +`fetchOnServer`: `Boolean` or `Function` (default: `true`), call `fetch()` when server-rendering the page + +`fetchKey`: `String` or `Function` (defaults to the component scope ID or component name), a key (or a function that produces a unique key) that identifies the result of this component's fetch (available on Nuxt 2.15+). When hydrating a server-rendered page, this key is used to map the result of the server-side `fetch()` to the client-side component data. [More information available in original PR](https://github.com/nuxt/nuxt.js/pull/8466). + +`fetchDelay`: `Integer` (default: `200`), set the minimum executing time in milliseconds (to avoid quick flashes) + +When `fetchOnServer` is falsy (`false` or returns `false`), `fetch` will be called only on client-side and `$fetchState.pending` will return `true` when server-rendering the component. + +```js +export default { + data: () => ({ + posts: [] + }), + async fetch() { + this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts') + }, + fetchOnServer: false, + // multiple components can return the same `fetchKey` and Nuxt will track them both separately + fetchKey: 'site-sidebar', + // alternatively, for more control, a function can be passed with access to the component instance + // It will be called in `created` and must not depend on fetched data + fetchKey(getCounter) { + // getCounter is a method that can be called to get the next number in a sequence + // as part of generating a unique fetchKey. + return this.someOtherData + getCounter('sidebar') + } +} +``` + +#### Accessing the fetch state + +The `fetch` hook exposes `this.$fetchState` at the component level with the following properties: + +- `pending` is a `Boolean` that allows you to display a placeholder when `fetch` is being called *on client-side*. +- `error` is either `null` or an `Error` thrown by the fetch hook +- `timestamp` is a timestamp of the last fetch, useful for [caching with `keep-alive`](#caching) + +In addition to fetch being called by Nuxt, you can manually call fetch in your component (to e.g. reload its async data) by calling `this.$fetch()`. + +```html{}[components/NuxtMountains.vue] + + + +``` + +::alert{type="info"} +You can access the Nuxt [context](/docs/concepts/context-helpers) within the fetch hook using `this.$nuxt.context`. +:: + +### Listening to query string changes + +The `fetch` hook is not called on query string changes by default. To watch for query changes you can add a watcher on `$route.query` and call `$fetch`: + +```js +export default { + watch: { + '$route.query': '$fetch' + }, + async fetch() { + // Called also on query changes + } +} +``` + +### Caching + +You can use `keep-alive` directive in `` and `` component to save `fetch` calls on pages you already visited: + +```html{}[layouts/default.vue] + +``` + +You can also specify the [props](https://vuejs.org/v2/api/#keep-alive) passed to `` by passing a prop `keep-alive-props` to the ``  component. + +```html{}[layouts/default.vue] + +``` + +Keeps only 10 page components in memory. + +### Error handling + +::alert{type="warning"} +If there is an error when fetching data, the normal Nuxt error page won't be loaded - and you should not use the Nuxt `redirect` or `error` methods within `fetch()`. Instead, you will need to handle it within your component using `$fetchState.error`. +:: + +We can check `$fetchState.error` and show an error message if there is an error fetching the data. + +```html{}[components/MountainsList.vue] + + +``` + +### Using `activated` hook + +Nuxt will directly fill  `this.$fetchState.timestamp`  (timestamp) of the last `fetch` call (ssr included). You can use this property combined with `activated` hook to add a 30 seconds cache to `fetch`: + +```html{}[pages/posts/_id.vue] + + + +``` + +The navigation to the same page will not call `fetch` if last `fetch` call was before 30 sec ago. + +## Async Data + +::alert{type="warning"} +`asyncData` is only available for [pages](/docs/directory-structure/pages) and you don't have access to `this` inside the hook. +:: + +`asyncData` is another hook for universal data fetching. Unlike `fetch`, which requires you to set properties on the component instance (or dispatch Vuex actions) to save your async state, `asyncData` simply merges its return value into your component's local state. Here's an example using the [@nuxt/http](https://http.nuxtjs.org/) library: + +```html{}[pages/posts/_id.vue] + + + +``` + +Unlike `fetch`, the promise returned by the `asyncData` hook is resolved _during route transition_. This means that no "loading placeholder" is visible during client-side transitions (although the [loading bar](https://nuxtjs.org/guides/features/loading/) can be used to indicate a loading state to the user). Nuxt will instead wait for the `asyncData` hook to be finished before navigating to the next page or display the [error page](/docs/directory-structure/layouts#error-page)). + +This hook can only be used for page-level components. Unlike `fetch`, `asyncData` cannot access the component instance (`this`). Instead, it receives [the context](/docs/concepts/context-helpers) as its argument. You can use it to fetch some data and Nuxt will automatically shallow merge the returned object with the component data. + +In the upcoming examples, we are using [@nuxt/http](https://http.nuxtjs.org/) which we recommend for fetching data from an API. + +### Async data in components? + +Because components do not have an `asyncData` method, you cannot directly fetch async data server side within a component. In order to get around this limitation you have three basic options: + +1. Use [the new `fetch` hook](#the-fetch-hook) that is available in Nuxt 2.12 and later versions. +2. Make the API call in the `mounted` hook and set data properties when loaded. _Downside: Won't work for server side rendering._ +3. Make the API call in the `asyncData` method of the page component and pass the data as props to the sub components. Server rendering will work fine. _Downside: the `asyncData` of the page might be less readable because it's loading the data for other components_. + +### Listening to query changes + +The `asyncData` method is not called on query string changes by default. If you want to change this behavior, for example when building a pagination component, you can set up parameters that should be listened to with the `watchQuery` property of your page component. + +::alert{type="next"} +Learn more about the [watchQuery property](/docs/components-glossary/watchquery) and see the list of available [keys in context](/docs/concepts/context-helpers). +:: diff --git a/content/de/docs/3.features/5.meta-tags-seo.md b/content/de/docs/3.features/5.meta-tags-seo.md new file mode 100644 index 0000000000..93283fdf5d --- /dev/null +++ b/content/de/docs/3.features/5.meta-tags-seo.md @@ -0,0 +1,175 @@ +--- +title: Meta Tags and SEO +description: Nuxt lets you define all default meta tags for your application inside the nuxt.config.js file using the head property. This is very useful for adding a default title and description tag for SEO purposes or for setting the viewport or adding the favicon. +category: features +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/06_meta_tags_seo?fontsize=14&hidenavigation=1&theme=dark +--- + +# Meta Tags and SEO + +Nuxt gives you 3 different ways to add meta data to your application: + +::div{.d-heading-description .leading-6} + +- Globally using the nuxt.config.js +- Locally using the head as an object +- Locally using the head as a function so that you have access to data and computed properties. + +:: + +--- + +### Global Settings + +Nuxt lets you define all default `` tags for your application inside the nuxt.config.js file using the head property. This is very useful for adding a default title and description tag for SEO purposes or for setting the viewport or adding the favicon. + +```js{}[nuxt.config.js] +export default { + head: { + title: 'my website title', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { + hid: 'description', + name: 'description', + content: 'my website description' + } + ], + link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] + } +} +``` + +::alert{type="info"} +This will give you the same title and description on every page +:: + +### Local Settings + +You can also add titles and meta for each page by setting the `head` property inside your script tag on every page: + +```js{}[pages/index.vue] + +``` + +::alert{type="info"} +Use `head` as an object to set a title and description only for the home page +:: + +```html{}[pages/index.vue] + + +``` + +::alert{type="info"} +Use `head` as a function to set a title and description only for the home page. By using a function you have access to data and computed properties +:: + +Nuxt uses [vue-meta](https://vue-meta.nuxtjs.org/) to update the document head and meta attributes of your application. + +::alert{type="warning"} +To avoid any duplication when used in child components, please give a unique identifier with the `hid` key to the meta description. This way `vue-meta` will know that it has to overwrite the default tag. +:: + +::alert{type="next"} +Learn more about the options available for `head`, in the [vue-meta documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties). +:: + +## External Resources + +You can include external resources such as scripts and fonts by adding them globally to the `nuxt.config.js` or locally in the `head` object or function. + +::alert{type="info"} +You can also pass each resource an optional `body: true` to include the resource before the closing `` tag. +:: + +### Global Settings + +```js{}[nuxt.config.js] +export default { + head: { + script: [ + { + src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' + } + ], + link: [ + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' + } + ] + } +} +``` + +### Local Settings + +```html{}[pages/index.vue] + + + + + +``` diff --git a/content/de/docs/3.features/6.configuration.md b/content/de/docs/3.features/6.configuration.md new file mode 100644 index 0000000000..eff5b01077 --- /dev/null +++ b/content/de/docs/3.features/6.configuration.md @@ -0,0 +1,453 @@ +--- +title: Configuration +description: By default, Nuxt is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file. +category: features +csb_link_host_port: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/07_configuration_host_port?fontsize=14&hidenavigation=1&theme=dark +csb_link_pre-processors: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/03_features/07_configuration_pre-processors?fontsize=14&hidenavigation=1&theme=dark +--- +# Configuration + +By default, Nuxt is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file. + +--- + +## The css Property + +Nuxt lets you define the CSS files/modules/libraries you want to set globally (included in every page). + +::alert{type="warning"} +In case you want to use `sass` make sure that you have installed the `sass` and `sass-loader` packages. +:: + +In `nuxt.config.js`, add the CSS resources: + +```js{}[nuxt.config.js] +export default { + css: [ + // Load a Node.js module directly (here it's a Sass file) + 'bulma', + // CSS file in the project + '~/assets/css/main.css', + // SCSS file in the project + '~/assets/css/main.scss' + ] +} +``` + +::alert{type="warning"} +Nuxt will automatically guess the file type by its extension and use the appropriate pre-processor loader for webpack. You will still need to install the required loader if you need to use them. +:: + +### Style Extensions + +You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file. + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/css/main', '~/assets/css/animations'] +} +``` + +::alert{type="warning"} +If you have two files with the same name, e.g. `main.scss` and `main.css`, and don't specify an extension in the css array entry, e.g. `css: ['~/assets/css/main']`, then only one file will be loaded depending on the order of `styleExtensions`. In this case only the `css` file will be loaded and the `scss` file will be ignored because `css` comes first in the default `styleExtension` array. +:: + +Default order: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']` + +## Pre-processors + +Thanks to [Vue Loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html), you can use any kind of pre-processor for your  `