diff --git a/components/molecules/cards/LogoCard.vue b/components/molecules/cards/LogoCard.vue index b878814375..8d70080734 100644 --- a/components/molecules/cards/LogoCard.vue +++ b/components/molecules/cards/LogoCard.vue @@ -9,30 +9,34 @@
- - - +
+ + + + {{ item.location }} +

{{ item.title || 'Title' }}

{{ item.description || 'Description' }}

+ - - diff --git a/components/organisms/home/HomeDiscoverPartners.vue b/components/organisms/home/HomeDiscoverPartners.vue index c935e34a36..a7913de7f7 100644 --- a/components/organisms/home/HomeDiscoverPartners.vue +++ b/components/organisms/home/HomeDiscoverPartners.vue @@ -1,6 +1,6 @@ diff --git a/content/es/docs/4.directory-structure/1.nuxt.md b/content/es/docs/4.directory-structure/1.nuxt.md index f0fb74c98e..43ff01c8ca 100644 --- a/content/es/docs/4.directory-structure/1.nuxt.md +++ b/content/es/docs/4.directory-structure/1.nuxt.md @@ -4,6 +4,7 @@ description: The .nuxt directory is the so-called "build directory". It is dynam navigation.title: .nuxt category: directory-structure --- + # Nuxt build directory The `.nuxt` directory is the so-called _build directory_. It is dynamically generated and hidden by default. Inside the directory you can find automatically generated files when using `nuxt dev` or your build artifacts when using `nuxt build`. Modifying these files is great for debugging but remember that they are generated files and once you run the `dev` or `build` command again, anything that was saved here will be regenerated. diff --git a/content/es/docs/5.configuration-glossary/10.configuration-extend-plugins.md b/content/es/docs/5.configuration-glossary/10.configuration-extend-plugins.md index 51f32841ca..3a7cb3c7b5 100644 --- a/content/es/docs/5.configuration-glossary/10.configuration-extend-plugins.md +++ b/content/es/docs/5.configuration-glossary/10.configuration-extend-plugins.md @@ -22,7 +22,7 @@ Example of changing plugins order: export default { extendPlugins(plugins) { const pluginIndex = plugins.findIndex( - ({ src }) => src === '~/plugins/shouldBeFirst.js' + plugin => (typeof plugin === 'string' ? plugin : plugin.src) === '~/plugins/shouldBeFirst.js' ) const shouldBeFirstPlugin = plugins[pluginIndex] diff --git a/content/es/docs/5.configuration-glossary/2.configuration-build.md b/content/es/docs/5.configuration-glossary/2.configuration-build.md index 96d837b6e9..775cc0e694 100644 --- a/content/es/docs/5.configuration-glossary/2.configuration-build.md +++ b/content/es/docs/5.configuration-glossary/2.configuration-build.md @@ -612,7 +612,7 @@ In Nuxt 2.15+, changing the value of this property at runtime will override the } ``` -If split codes for `layout`, `pages` and `commons` (common libs: vue|vue-loader|vue-router|vuex...). +Whether or not to create separate chunks for `layout`, `pages` and `commons` (common libs: vue|vue-loader|vue-router|vuex...). For more information, see [webpack docs](https://v4.webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks). ## ssr diff --git a/content/es/docs/6.internals-glossary/6.internals-module-container.md b/content/es/docs/6.internals-glossary/6.internals-module-container.md index dc81ff6ea6..abcc16580e 100644 --- a/content/es/docs/6.internals-glossary/6.internals-module-container.md +++ b/content/es/docs/6.internals-glossary/6.internals-module-container.md @@ -4,6 +4,7 @@ navigation.title: Module Container description: Nuxt ModuleContainer Class category: internals-glossary --- + # The ModuleContainer class --- diff --git a/content/es/docs/6.internals-glossary/7.internals-builder.md b/content/es/docs/6.internals-glossary/7.internals-builder.md index ed8cf595fd..19583630c5 100644 --- a/content/es/docs/6.internals-glossary/7.internals-builder.md +++ b/content/es/docs/6.internals-glossary/7.internals-builder.md @@ -4,6 +4,7 @@ navigation.title: Builder description: Nuxt Builder Class category: internals-glossary --- + # The Builder class --- diff --git a/content/es/docs/6.internals-glossary/8.internals-generator.md b/content/es/docs/6.internals-glossary/8.internals-generator.md index 819c15ea35..a241951685 100644 --- a/content/es/docs/6.internals-glossary/8.internals-generator.md +++ b/content/es/docs/6.internals-glossary/8.internals-generator.md @@ -4,6 +4,7 @@ navigation.title: Generator description: Nuxt Generator Class category: internals-glossary --- + # The Generator class --- diff --git a/content/es/examples/9.plugins/1.vue.md b/content/es/examples/9.plugins/1.vue.md index ae7c75b62a..8ec7e007f1 100644 --- a/content/es/examples/9.plugins/1.vue.md +++ b/content/es/examples/9.plugins/1.vue.md @@ -12,13 +12,13 @@ In this example we show how to add a vue plugin to your application In this example: -`plugins/vue-toolitp.js` imports our tooltip and tells Vue to use.. +`plugins/vue-tooltip.js` imports our tooltip and tells Vue to use it. `pages/index.vue` uses our plugin. `nuxt.config.js` contains the `plugins` property to register our plugin and the `css` property to add our tooltip css. -`package.json` show our tooltip package has been installed. +`package.json` shows our tooltip package has been installed. ::alert{type="next"} Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#vue-plugins) chapter. diff --git a/content/es/index.md b/content/es/index.md index d76a610435..40ac58b4d1 100644 --- a/content/es/index.md +++ b/content/es/index.md @@ -13,7 +13,7 @@ El Framework de Vue
Intuitivo Cree su próxima aplicación Vue.js con confianza usando Nuxt. Un framework de código abierto que hace que el desarrollo web sea simple y poderoso. #primary-button -:app-button[38K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } +:app-button[39K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } #secondary-button :app-button[Comenzar]{ to="/docs/get-started/installation" } @@ -248,7 +248,7 @@ hoverClass: 'hover:bg-sky-surface' Descubra módulos potentes, intégrelos con sus proveedores favoritos y comience rápidamente con los temas. :: -::home-campfire +::home-community --- category: Comunidad announcementsCategory: Anuncios diff --git a/content/es/teams/index.md b/content/es/teams/index.md index 54570b5db3..46bfc43dbe 100644 --- a/content/es/teams/index.md +++ b/content/es/teams/index.md @@ -1,7 +1,7 @@ --- template: blank title: 'Teams' -description: 'The development of Nuxt is lead by an international team. Our committed team works every day to move Nuxt forward.' +description: 'The development of Nuxt is led by an international team. Our committed team works every day to move Nuxt forward.' layout: fluid: true navigation: false @@ -12,7 +12,7 @@ navigation: false Teams #description -The development of Nuxt and its ecosystem is lead by an international team. Our committed team works every day to bring Nuxt forward. +The development of Nuxt and its ecosystem is led by an international team. Our committed team works every day to bring Nuxt forward. :: ::team-section @@ -32,5 +32,5 @@ teamName: community [Community]{.text-primary} #description -From contributors to advocators, the community is made of member from different horizon and skills. We are happy to see new member everyday and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core). +From contributors to advocates, the community is made of members with different horizons and skills. We are happy to see new members every day and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core). :: diff --git a/content/es/tutorials/1.creating-blog-with-nuxt-content.md b/content/es/tutorials/1.creating-blog-with-nuxt-content.md index 3f57719bfb..61840e5e20 100644 --- a/content/es/tutorials/1.creating-blog-with-nuxt-content.md +++ b/content/es/tutorials/1.creating-blog-with-nuxt-content.md @@ -819,7 +819,7 @@ And of course we should link from our blog post to our new author page. ```html{}[components/Author.vue] - +

Author

{{ author.name }}

diff --git a/content/es/video-courses/index.md b/content/es/video-courses/index.md index e594c9ec50..c20d1c915c 100644 --- a/content/es/video-courses/index.md +++ b/content/es/video-courses/index.md @@ -14,7 +14,7 @@ video-courses: tier: Premium two: title: Get Started with Nuxt - description: Learn the essentials for how to build and deploy a Nuxt site including dnyamic routes, data fetching, SEO, lazy loading, global styles and transitions as well as how to generate and deploy your Nuxt app. + description: Learn the essentials for how to build and deploy a Nuxt site including dynamic routes, data fetching, SEO, lazy loading, global styles and transitions as well as how to generate and deploy your Nuxt app. image: /img/video-courses/jamstack_explorer.png link: 'https://explorers.netlify.com/learn/get-started-with-nuxt' tier: Free diff --git a/content/fr/_collections/navigations/header.md b/content/fr/_collections/navigations/header.md index d82d05815d..8e50fd0221 100644 --- a/content/fr/_collections/navigations/header.md +++ b/content/fr/_collections/navigations/header.md @@ -73,7 +73,7 @@ links: - title: 'Communauté' items: - title: 'Annonces' - subtitle: 'Les dernières nouvelles concerant Nuxt' + subtitle: 'Les dernières nouvelles concernant Nuxt' slug: 'announcements' to: '/announcements' icon: 'announcements.svg' diff --git a/content/fr/announcements/5.nuxt3-beta.md b/content/fr/announcements/5.nuxt3-beta.md index 120c37865f..0f7b6efabd 100644 --- a/content/fr/announcements/5.nuxt3-beta.md +++ b/content/fr/announcements/5.nuxt3-beta.md @@ -1,7 +1,7 @@ --- template: post title: Introducing Nuxt 3 Beta -description: "468 days after the first commit, Nuxt 3 is finally out of beta. Discover what's inside and what to expect from it. Yes, it includes Vue 3 and Vite ⚡️" +description: "468 days after the first commit, the Nuxt 3 beta has finally arrived. Discover what's inside and what to expect from it. Yes, it includes Vue 3 and Vite ⚡️" imgUrl: blog/nuxt3-beta/main.jpg date: 2021-10-12 authors: @@ -32,7 +32,7 @@ The documentation is available on https://v3.nuxtjs.org. ## A new foundation -On top of supporting [Vue 3](https://v3.vuejs.org) or [Vite](https://vitejs.dev), Nuxt 3 contains a new [server engine](https://v3.nuxtjs.org/concepts/server-engine), unlocking new full-stack capablities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a varierty of modern cloud hosting providers. +On top of supporting [Vue 3](https://v3.vuejs.org) or [Vite](https://vitejs.dev), Nuxt 3 contains a new [server engine](https://v3.nuxtjs.org/concepts/server-engine), unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern cloud hosting providers. In production, it builds your Vue application and server into one universal `.output` directory. This output is light: minified and without any other Node.js dependencies (except polyfills). You can deploy this output on any system supporting JavaScript, whether Node.js, Serverless, Workers, Edge-side rendering or purely static. diff --git a/content/fr/case-studies/2.stores.md b/content/fr/case-studies/2.stores.md index b8ee8d7428..7fc1e6a4c8 100644 --- a/content/fr/case-studies/2.stores.md +++ b/content/fr/case-studies/2.stores.md @@ -11,7 +11,7 @@ headingImg: ## 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. +[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. @@ -21,9 +21,9 @@ We considered what is the best stack for us by researching articles and meetup s ## 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 +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. +The old version of [stores.jp](http://stores.jp) was made in Angular JS. As our site grew bigger, our team of developers grew too. We needed to unify our codebase. When we want to add the logic we don't want to discuss if it should be an angular service or a factory so that is why we thought we need a framework instead of a library and that is why we chose Nuxt instead of just using Vue.js. ## Are you using dynamic or static rendering? Why? diff --git a/content/fr/case-studies/7.new-york-public-radio.md b/content/fr/case-studies/7.new-york-public-radio.md index 5aa9842bf4..b0f848fe76 100644 --- a/content/fr/case-studies/7.new-york-public-radio.md +++ b/content/fr/case-studies/7.new-york-public-radio.md @@ -1,7 +1,7 @@ --- template: post title: New York Public Radio -description: "New York Public Radio is a nonprofit member network of National Public Radio. They recently rebuilt the WNYC radio page and their news website The Gothamist with Nuxt. We talked with Kim LaRocca, Senior Engineering Manager at NYPR about their migration to Nuxt and their future plans." +description: "New York Public Radio is a nonprofit member network of National Public Radio. They recently rebuilt the WNYC radio page and their news website Gothamist with Nuxt. We talked with Kim LaRocca, Senior Engineering Manager at NYPR about their migration to Nuxt and their future plans." imgUrl: img/case-studies/nypr/cover.png headingImg: hidden: true @@ -11,7 +11,7 @@ headingImg: ## What is New York Public Radio? -New York Public Radio is a nonprofit member network of [National Public Radio](https://www.npr.org). We also own several public radio stations such as WNYC, WQXR, New Jersey Public Radio and we own a performance space called the Green Space in New York City. And we also own [The Gothamist](https://gothamist.com/), which is a news site for New York City. We're working on reshaping audio and news for the new generation, reaching out to our community. We're trying to stay on top of modern technologies to better serve our listeners and our members. +New York Public Radio is a nonprofit member network of [National Public Radio](https://www.npr.org). We also own several public radio stations such as WNYC, WQXR, New Jersey Public Radio and we own a performance space called the Green Space in New York City. And we also own [Gothamist](https://gothamist.com/), which is a news site for New York City. We're working on reshaping audio and news for the new generation, reaching out to our community. We're trying to stay on top of modern technologies to better serve our listeners and our members. ## How did you discover Nuxt? @@ -27,19 +27,19 @@ There's so many features that I love! How everything's built in, you don't have In addition, even something as simple as managing meta tags is really easy to do with Nuxt. Whereas with Ember, it was like you're jumping through all these hoops to figure out how to make that dynamic. Besides that, comparing this to other frameworks I've worked with, the community is great, the documentation is great, the modules are awesome. If we want to add Google Analytics or authentication, it's just a couple lines of code. You don't have to worry about it. **It really lets us focus on just building cool things and not worrying about the infrastructure**. -## For now you have two projects built with Nuxt, the WNYC player, and the Gothamist. +## For now you have two projects built with Nuxt, the WNYC player, and Gothamist. Yes, the first thing we did was build the [WNYC radio page](https://www.wnyc.org/radio/) in Nuxt, it's a subset of the WNYC site where people can go to listen to the radio online to the FM stream or the AM stream. We have a stream coming in through WebSockets, and we built a couple NPM packages to help with streaming audio services. But besides that, everything else was just built in with Nuxt so it's pretty easy to do. -![The Gothamist article](img/case-studies/nypr/1.png){width=736 height=407} +![Gothamist article](img/case-studies/nypr/1.png){width=736 height=407} ## What are your next steps, do you have any intents to build another project with Nuxt? -We have every intention! All our new projects are going to use Nuxt and Vue, and the next step is rebuilding the Radiolab website, it's one of our most popular shows on the radio, and besides that we're probably going to rebuild the rest of the WNYC site to use Nuxt and Vue. The Gothamist launch a couple of months ago has gotten rave reviews. Everyone noticed that it was fast so we have company approval now. Now we just need the time and the resources to actually start rebuilding but it is our every intention to use it for everything. +We have every intention! All our new projects are going to use Nuxt and Vue, and the next step is rebuilding the Radiolab website, it's one of our most popular shows on the radio, and besides that we're probably going to rebuild the rest of the WNYC site to use Nuxt and Vue. Gothamist launch a couple of months ago has gotten rave reviews. Everyone noticed that it was fast so we have company approval now. Now we just need the time and the resources to actually start rebuilding but it is our every intention to use it for everything. ## Your projects are open source, can you tell me more about it? -I pushed for having [open source for all our projects](https://github.com/nypublicradio), so our design system is open source, and the Gothamist code is open source. We're hoping that we can help some other developers along the way to make their sites better and also to attract people to work on the team because we're working with some cool technologies. We built the WNYC Radio and the design system in open source from the beginning. So if anyone was following it they saw all the problems and issues we had along the way, and how we solved them. +I pushed for having [open source for all our projects](https://github.com/nypublicradio), so our design system is open source, and Gothamist code is open source. We're hoping that we can help some other developers along the way to make their sites better and also to attract people to work on the team because we're working with some cool technologies. We built the WNYC Radio and the design system in open source from the beginning. So if anyone was following it they saw all the problems and issues we had along the way, and how we solved them. ## Would you recommend Nuxt, and for what kind of projects? diff --git a/content/fr/deployments/2.layer0.md b/content/fr/deployments/2.layer0.md index 5c057bf59e..66c72bf261 100644 --- a/content/fr/deployments/2.layer0.md +++ b/content/fr/deployments/2.layer0.md @@ -24,23 +24,18 @@ For detailed instructions consult the [Layer0 Nuxt documentation](https://docs.l 2. Install the [Layer0 CLI](https://docs.layer0.co/guides/cli) - - -```bash + +::code-group +```bash [Yarn] yarn global add @layer0/cli ``` - - - - -```bash +```bash [NPM] npm i -g @layer0/cli ``` +:: - - ## Configure your project diff --git a/content/fr/deployments/fume.md b/content/fr/deployments/fume.md index 58a3aa2cd6..d577122b4d 100644 --- a/content/fr/deployments/fume.md +++ b/content/fr/deployments/fume.md @@ -1,7 +1,7 @@ --- template: guide title: Fume -description: How to deploy Nuxt on Fume +description: How to deploy Nuxt on Fume? target: Static & Server category: deployment logo: @@ -10,7 +10,7 @@ logo: --- # Deploy Nuxt on Fume -How to deploy Nuxt on Fume +How to deploy Nuxt on Fume? --- @@ -21,7 +21,7 @@ Fume includes the following features: - Serverless structures supporting both Server and Static with Lambda and CloudFront. - [Automated](https://github.com/marketplace/actions/fume-deployment) deployments with rollbacks with the click of a button - Metrics and cost prediction for each environment -- Domain control - import hosts, issues certificates, and map recorde to environments +- Domain control - import hosts, issues certificates, and map records to environments - Integrated notifications to Slack, Discord, and other collaboration platforms ## Setup diff --git a/content/fr/deployments/github-pages.md b/content/fr/deployments/github-pages.md index b4df462f48..6a9df30162 100644 --- a/content/fr/deployments/github-pages.md +++ b/content/fr/deployments/github-pages.md @@ -18,17 +18,20 @@ Nuxt gives you the possibility to host your web application on any static hostin To deploy on GitHub Pages, you need to generate your static web application: -```bash +::code-group +```bash [Yarn] +yarn generate +``` +```bash [NPM] npm run generate ``` +:: It will create a `dist` folder with everything inside ready to be deployed on GitHub Pages hosting. Branch `gh-pages` for project repository OR branch `master` for user or organization site -
- +::alert{type="info"} Info: If you use a custom domain for your GitHub Pages and put `CNAME` file, it is recommended that CNAME file is put in the `static` directory. [More documentation](/docs/directory-structure/static) about it. - -
+:: ## Deploying to GitHub Pages for repository @@ -61,11 +64,16 @@ This way, all generated path asset will be prefixed with `//`, You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir): -First install it via npm: +First install it: -```bash +::code-group +```bash [Yarn] +yarn add --dev push-dir +``` +```bash [NPM] npm install push-dir --save-dev ``` +:: Add a `deploy` command to your `package.json` with the branch as `gh-pages` for project repository OR `master` for user or organization site. @@ -80,17 +88,21 @@ Add a `deploy` command to your `package.json` with the branch as `gh-pages` for Then generate and deploy your static application: -```bash +::code-group +```bash [Yarn] +yarn generate +yarn deploy +``` +```bash [NPM] npm run generate npm run deploy ``` +:: ## Build server deployment You can take deployment one step further and rather than having to manually compile and deploy the files from your local install, you can make use of a build server to monitor your GitHub repository for new commits and then checkout, compile and deploy everything for you automatically. -Before you configure the build server, you'll first need to [generate a GitHub personal access token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/#creating-a-token) in order to grant the build server permission to perform tasks on your behalf. Once you have created your token, keep a copy of it safe ready to use a little later on. - ### GitHub Actions To deploy via [GitHub Actions](https://github.com/features/actions), the official tool for software automation with GitHub, if you don't have a workflow you need to create a new one or append a new step to your existing workflow. @@ -136,7 +148,7 @@ jobs: run: yarn - name: Generate - run: yarn run generate + run: yarn generate - name: Deploy uses: peaceiris/actions-gh-pages@v3 @@ -174,7 +186,7 @@ Finally, create a `.travis.yml` configuration file in the root of your repositor ```yaml language: node_js node_js: - - '8' + - '12' cache: directories: @@ -227,8 +239,8 @@ Next, in the root of your repository, create an `appveyor.yml` configuration fil ```yaml environment: - # Nuxt requires node v8 minimum - nodejs_version: '8' + # Nuxt requires node v12 minimum + nodejs_version: '12' # Encrypt sensitive data (https://ci.appveyor.com/tools/encrypt) github_access_token: secure: ENCRYPTED_GITHUB_ACCESS_TOKEN diff --git a/content/fr/deployments/google-appengine.md b/content/fr/deployments/google-appengine.md index c1fb171e1b..207a15527e 100644 --- a/content/fr/deployments/google-appengine.md +++ b/content/fr/deployments/google-appengine.md @@ -58,7 +58,7 @@ env: flex ## Build and deploy the app -Now build your app with `npm run build`. +Now build your app with `npm run build` or `yarn build`. At this point, your app is ready to be uploaded to Google App Engine. Now just run the following command: diff --git a/content/fr/deployments/google-cloud-run.md b/content/fr/deployments/google-cloud-run.md index 38d6870f5e..21bcae5e69 100644 --- a/content/fr/deployments/google-cloud-run.md +++ b/content/fr/deployments/google-cloud-run.md @@ -56,38 +56,6 @@ $ npm run dev Check that everything works. -## Application configuration - -!Attention: from now and on, the port is set to `3000`, change all occurrences if needed. - -The host should not be set to localhost, but to 0.0.0.0. You can update the server configuration in `nuxt.config.js`: - -```javascript -export default { - server: { - port: 3000, // default: 3000 - host: '0.0.0.0', // default: localhost, - timing: false - } -} -``` - -More information [here](/docs/configuration-glossary/configuration-server). - -Or, add this to your package.json file: - -```json -{ - "config": { - "nuxt": { - "host": "0.0.0.0", - "port": "3000", - "timing": false - } - } -} -``` - ## Containerize your application Now, we will create a container with Cloud Build. @@ -101,11 +69,13 @@ FROM node:14 WORKDIR /usr/src/app -COPY package.json ./ +COPY . ./ RUN yarn -COPY . . -EXPOSE 3000 +EXPOSE 8080 + +ENV HOST=0.0.0.0 +ENV PORT=8080 RUN yarn build @@ -119,11 +89,13 @@ FROM node:14 WORKDIR /usr/src/app -COPY package.json ./ +COPY . ./ RUN npm install -COPY . . -EXPOSE 3000 +EXPOSE 8080 + +ENV HOST=0.0.0.0 +ENV PORT=8080 RUN npm run build diff --git a/content/fr/deployments/heroku.md b/content/fr/deployments/heroku.md index 46c3a5dbf8..9e65c1ad9a 100644 --- a/content/fr/deployments/heroku.md +++ b/content/fr/deployments/heroku.md @@ -24,24 +24,19 @@ We recommend you read the [Heroku documentation for Node.js](https://devcenter.h
-First, we want our application to listen on the host `0.0.0.0` and run in production mode: +You can set up and configure your app via the [Heroku dashboard](https://devcenter.heroku.com/articles/heroku-dashboard) or the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). + +First, we create our app. Then we add the Node.js [buildpack](https://devcenter.heroku.com/articles/buildpacks) and configure the app to listen on the host `0.0.0.0`: ```bash +heroku create myapp +heroku buildpacks:set heroku/nodejs heroku config:set HOST=0.0.0.0 -heroku config:set NODE_ENV=production ``` -You should see this in your Heroku dashboard (Settings section): - -![nuxt config vars Heroku](https://i.imgur.com/EEKl6aS.png) +Your app's Settings section on the Heroku dashboard should contain this: -Heroku uses a [Procfile](https://devcenter.heroku.com/articles/procfile) (name the file `Procfile` with no file extension) that specifies the commands that are executed by the apps dynos. To start the Procfile will be very simple, and needs to contain the following line: - -``` -web: nuxt start -``` - -This will instruct run the `nuxt start` command and tell Heroku to direct external HTTP traffic to it. +![nuxt config vars Heroku](https://user-images.githubusercontent.com/23453691/116850762-81ea0e00-abf1-11eb-9f70-260721a1d525.png) Finally, we can push the app on Heroku with: @@ -57,4 +52,6 @@ git push heroku develop:master where `develop` is the name of your branch. +You can optionally configure automatic deploys from a selected branch of your app's GitHub repository in the Deploy section of your app in the Heroku dashboard. + Voilà! Your Nuxt application is now hosted on Heroku! diff --git a/content/fr/deployments/nginx.md b/content/fr/deployments/nginx.md index 9e6043d91f..476e1f6b6d 100644 --- a/content/fr/deployments/nginx.md +++ b/content/fr/deployments/nginx.md @@ -52,7 +52,7 @@ Below is an example configuration. Keep in mind that: - root folder should be the same as set by [configuration generate.dir](/docs/configuration-glossary/configuration-generate#dir) - expire headers set by Nuxt are stripped (due to the cache) -- both Nuxt as nginx can set additional headers, it's advised to choose one (if in doubt, choose nginx) +- both Nuxt and nginx can set additional headers, it's advised to choose one (if in doubt, choose nginx) - if your site is mostly static, increase the `proxy_cache_path inactive` and `proxy_cache_valid` numbers If you don't generate your routes but still wish to benefit from nginx cache: diff --git a/content/fr/deployments/platformsh.md b/content/fr/deployments/platformsh.md index f169b8acbd..2bb43b4105 100644 --- a/content/fr/deployments/platformsh.md +++ b/content/fr/deployments/platformsh.md @@ -31,7 +31,7 @@ Platform.sh includes the following features: Platform.sh has a pre-made template for Nuxt available. The link below will create a new Platform.sh project and pre-populate it with a sample Nuxt application that you can then customize.

- + Deploy on Platform.sh

diff --git a/content/fr/examples/9.plugins/1.vue.md b/content/fr/examples/9.plugins/1.vue.md index 1b36b096e8..71885bff1f 100644 --- a/content/fr/examples/9.plugins/1.vue.md +++ b/content/fr/examples/9.plugins/1.vue.md @@ -11,7 +11,7 @@ Dans cet exemple, nous montrons comment ajouter un plugin vue à votre applicati Dans cet exemple : -`plugins/vue-toolitp.js` importe notre info-bulle et indique à Vue d'utiliser .. +`plugins/vue-tooltip.js` importe notre info-bulle et indique à Vue d'utiliser .. `pages/index.vue` utilise notre plugin. diff --git a/content/fr/index.md b/content/fr/index.md index c7b5a693d2..d01d54af17 100644 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -13,7 +13,7 @@ Le framework Vue
intuitif Construisez votre prochaine application Vue.js en toute confiance avec Nuxt. Un framework open source qui rend le développement web simple et puissant. #primary-button -:app-button[38K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } +:app-button[39K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } #secondary-button :app-button[Commencer]{ to="/docs/get-started/installation" extraClass="text-black bg-primary-500 hover:bg-primary-400 focus:ring-primary-600 py-4" } diff --git a/content/fr/teams/index.md b/content/fr/teams/index.md index e9d58d3bf4..41a256dbde 100644 --- a/content/fr/teams/index.md +++ b/content/fr/teams/index.md @@ -1,7 +1,7 @@ --- template: blank title: 'Teams' -description: 'The development of Nuxt is lead by an international team. Our committed team works every day to move Nuxt forward.' +description: 'The development of Nuxt is led by an international team. Our committed team works every day to move Nuxt forward.' layout: fluid: true navigation: false diff --git a/content/fr/tutorials/1.creating-blog-with-nuxt-content.md b/content/fr/tutorials/1.creating-blog-with-nuxt-content.md index 3f57719bfb..61840e5e20 100644 --- a/content/fr/tutorials/1.creating-blog-with-nuxt-content.md +++ b/content/fr/tutorials/1.creating-blog-with-nuxt-content.md @@ -819,7 +819,7 @@ And of course we should link from our blog post to our new author page. ```html{}[components/Author.vue] - +

Author

{{ author.name }}

diff --git a/content/ja/announcements/5.nuxt3-beta.md b/content/ja/announcements/5.nuxt3-beta.md index 120c37865f..0f7b6efabd 100644 --- a/content/ja/announcements/5.nuxt3-beta.md +++ b/content/ja/announcements/5.nuxt3-beta.md @@ -1,7 +1,7 @@ --- template: post title: Introducing Nuxt 3 Beta -description: "468 days after the first commit, Nuxt 3 is finally out of beta. Discover what's inside and what to expect from it. Yes, it includes Vue 3 and Vite ⚡️" +description: "468 days after the first commit, the Nuxt 3 beta has finally arrived. Discover what's inside and what to expect from it. Yes, it includes Vue 3 and Vite ⚡️" imgUrl: blog/nuxt3-beta/main.jpg date: 2021-10-12 authors: @@ -32,7 +32,7 @@ The documentation is available on https://v3.nuxtjs.org. ## A new foundation -On top of supporting [Vue 3](https://v3.vuejs.org) or [Vite](https://vitejs.dev), Nuxt 3 contains a new [server engine](https://v3.nuxtjs.org/concepts/server-engine), unlocking new full-stack capablities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a varierty of modern cloud hosting providers. +On top of supporting [Vue 3](https://v3.vuejs.org) or [Vite](https://vitejs.dev), Nuxt 3 contains a new [server engine](https://v3.nuxtjs.org/concepts/server-engine), unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern cloud hosting providers. In production, it builds your Vue application and server into one universal `.output` directory. This output is light: minified and without any other Node.js dependencies (except polyfills). You can deploy this output on any system supporting JavaScript, whether Node.js, Serverless, Workers, Edge-side rendering or purely static. diff --git a/content/ja/case-studies/2.stores.md b/content/ja/case-studies/2.stores.md index b8ee8d7428..7fc1e6a4c8 100644 --- a/content/ja/case-studies/2.stores.md +++ b/content/ja/case-studies/2.stores.md @@ -11,7 +11,7 @@ headingImg: ## 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. +[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. @@ -21,9 +21,9 @@ We considered what is the best stack for us by researching articles and meetup s ## 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 +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. +The old version of [stores.jp](http://stores.jp) was made in Angular JS. As our site grew bigger, our team of developers grew too. We needed to unify our codebase. When we want to add the logic we don't want to discuss if it should be an angular service or a factory so that is why we thought we need a framework instead of a library and that is why we chose Nuxt instead of just using Vue.js. ## Are you using dynamic or static rendering? Why? diff --git a/content/ja/case-studies/7.new-york-public-radio.md b/content/ja/case-studies/7.new-york-public-radio.md index 5aa9842bf4..b0f848fe76 100644 --- a/content/ja/case-studies/7.new-york-public-radio.md +++ b/content/ja/case-studies/7.new-york-public-radio.md @@ -1,7 +1,7 @@ --- template: post title: New York Public Radio -description: "New York Public Radio is a nonprofit member network of National Public Radio. They recently rebuilt the WNYC radio page and their news website The Gothamist with Nuxt. We talked with Kim LaRocca, Senior Engineering Manager at NYPR about their migration to Nuxt and their future plans." +description: "New York Public Radio is a nonprofit member network of National Public Radio. They recently rebuilt the WNYC radio page and their news website Gothamist with Nuxt. We talked with Kim LaRocca, Senior Engineering Manager at NYPR about their migration to Nuxt and their future plans." imgUrl: img/case-studies/nypr/cover.png headingImg: hidden: true @@ -11,7 +11,7 @@ headingImg: ## What is New York Public Radio? -New York Public Radio is a nonprofit member network of [National Public Radio](https://www.npr.org). We also own several public radio stations such as WNYC, WQXR, New Jersey Public Radio and we own a performance space called the Green Space in New York City. And we also own [The Gothamist](https://gothamist.com/), which is a news site for New York City. We're working on reshaping audio and news for the new generation, reaching out to our community. We're trying to stay on top of modern technologies to better serve our listeners and our members. +New York Public Radio is a nonprofit member network of [National Public Radio](https://www.npr.org). We also own several public radio stations such as WNYC, WQXR, New Jersey Public Radio and we own a performance space called the Green Space in New York City. And we also own [Gothamist](https://gothamist.com/), which is a news site for New York City. We're working on reshaping audio and news for the new generation, reaching out to our community. We're trying to stay on top of modern technologies to better serve our listeners and our members. ## How did you discover Nuxt? @@ -27,19 +27,19 @@ There's so many features that I love! How everything's built in, you don't have In addition, even something as simple as managing meta tags is really easy to do with Nuxt. Whereas with Ember, it was like you're jumping through all these hoops to figure out how to make that dynamic. Besides that, comparing this to other frameworks I've worked with, the community is great, the documentation is great, the modules are awesome. If we want to add Google Analytics or authentication, it's just a couple lines of code. You don't have to worry about it. **It really lets us focus on just building cool things and not worrying about the infrastructure**. -## For now you have two projects built with Nuxt, the WNYC player, and the Gothamist. +## For now you have two projects built with Nuxt, the WNYC player, and Gothamist. Yes, the first thing we did was build the [WNYC radio page](https://www.wnyc.org/radio/) in Nuxt, it's a subset of the WNYC site where people can go to listen to the radio online to the FM stream or the AM stream. We have a stream coming in through WebSockets, and we built a couple NPM packages to help with streaming audio services. But besides that, everything else was just built in with Nuxt so it's pretty easy to do. -![The Gothamist article](img/case-studies/nypr/1.png){width=736 height=407} +![Gothamist article](img/case-studies/nypr/1.png){width=736 height=407} ## What are your next steps, do you have any intents to build another project with Nuxt? -We have every intention! All our new projects are going to use Nuxt and Vue, and the next step is rebuilding the Radiolab website, it's one of our most popular shows on the radio, and besides that we're probably going to rebuild the rest of the WNYC site to use Nuxt and Vue. The Gothamist launch a couple of months ago has gotten rave reviews. Everyone noticed that it was fast so we have company approval now. Now we just need the time and the resources to actually start rebuilding but it is our every intention to use it for everything. +We have every intention! All our new projects are going to use Nuxt and Vue, and the next step is rebuilding the Radiolab website, it's one of our most popular shows on the radio, and besides that we're probably going to rebuild the rest of the WNYC site to use Nuxt and Vue. Gothamist launch a couple of months ago has gotten rave reviews. Everyone noticed that it was fast so we have company approval now. Now we just need the time and the resources to actually start rebuilding but it is our every intention to use it for everything. ## Your projects are open source, can you tell me more about it? -I pushed for having [open source for all our projects](https://github.com/nypublicradio), so our design system is open source, and the Gothamist code is open source. We're hoping that we can help some other developers along the way to make their sites better and also to attract people to work on the team because we're working with some cool technologies. We built the WNYC Radio and the design system in open source from the beginning. So if anyone was following it they saw all the problems and issues we had along the way, and how we solved them. +I pushed for having [open source for all our projects](https://github.com/nypublicradio), so our design system is open source, and Gothamist code is open source. We're hoping that we can help some other developers along the way to make their sites better and also to attract people to work on the team because we're working with some cool technologies. We built the WNYC Radio and the design system in open source from the beginning. So if anyone was following it they saw all the problems and issues we had along the way, and how we solved them. ## Would you recommend Nuxt, and for what kind of projects? diff --git a/content/ja/docs/3.features/8.nuxt-components.md b/content/ja/docs/3.features/8.nuxt-components.md index f65f7d8a20..2ab57c2c27 100644 --- a/content/ja/docs/3.features/8.nuxt-components.md +++ b/content/ja/docs/3.features/8.nuxt-components.md @@ -328,7 +328,9 @@ export default { - +
diff --git a/content/ja/examples/9.plugins/1.vue.md b/content/ja/examples/9.plugins/1.vue.md index c513444973..eea215e74e 100644 --- a/content/ja/examples/9.plugins/1.vue.md +++ b/content/ja/examples/9.plugins/1.vue.md @@ -12,7 +12,7 @@ category: plugins この例において： -`plugins/vue-toolitp.js` は、ツールチップをインポートして、Vue に使用するように指示します。 +`plugins/vue-tooltip.js` は、ツールチップをインポートして、Vue に使用するように指示します。 `pages/index.vue` は、プラグインを使用しています。 diff --git a/content/ja/index.md b/content/ja/index.md index b52cfee552..1741e362b3 100644 --- a/content/ja/index.md +++ b/content/ja/index.md @@ -13,7 +13,7 @@ The Intuitive Vue
Framework Nuxt を使って信頼ある次世代の Vue.js アプリケーションを構築する Web 開発をシンプルにかつパワフルにするオープンソースフレームワーク #primary-button -:app-button[38K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } +:app-button[39K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } #secondary-button :app-button[はじめる]{ to="/docs/get-started/installation" extraClass="text-black bg-primary-500 hover:bg-primary-400 focus:ring-primary-600 py-4" } diff --git a/content/ja/teams/index.md b/content/ja/teams/index.md index e6961e8297..5df3c6293d 100644 --- a/content/ja/teams/index.md +++ b/content/ja/teams/index.md @@ -1,7 +1,7 @@ --- template: blank title: 'Teams' -description: 'The development of Nuxt is lead by an international team. Our committed team works every day to move Nuxt forward.' +description: 'The development of Nuxt is led by an international team. Our committed team works every day to move Nuxt forward.' layout: fluid: true navigation: false diff --git a/content/ja/tutorials/1.creating-blog-with-nuxt-content.md b/content/ja/tutorials/1.creating-blog-with-nuxt-content.md index 3f57719bfb..61840e5e20 100644 --- a/content/ja/tutorials/1.creating-blog-with-nuxt-content.md +++ b/content/ja/tutorials/1.creating-blog-with-nuxt-content.md @@ -819,7 +819,7 @@ And of course we should link from our blog post to our new author page. ```html{}[components/Author.vue] - +

Author

{{ author.name }}

diff --git a/content/pt-br/_collections/design/colors.md b/content/pt-br/_collections/design/colors.md new file mode 100644 index 0000000000..db0a6754dd --- /dev/null +++ b/content/pt-br/_collections/design/colors.md @@ -0,0 +1,13 @@ +--- +colors: +- + name: Green Default + bg_color: bg-primary + hexa: '#00DC82' + rgb: '0 220 130' +- + name: Sky Darker + bg_color: bg-secondary-darker + hexa: '#002E3B' + rgb: '0 46 59' +--- diff --git a/content/pt-br/_collections/design/logos.md b/content/pt-br/_collections/design/logos.md new file mode 100644 index 0000000000..5c4646b06c --- /dev/null +++ b/content/pt-br/_collections/design/logos.md @@ -0,0 +1,19 @@ +--- +logos: +- + type: Text colored + logoImg: '/design-kit/colored-text' + color: dark +- + type: Text black + logoImg: '/design-kit/black-text' + color: dark +- + type: Text white + logoImg: '/design-kit/white-text' + color: light +- + type: Text colored & white + logoImg: '/design-kit/colored-white-text' + color: light +--- diff --git a/content/pt-br/_collections/design/monogram.md b/content/pt-br/_collections/design/monogram.md new file mode 100644 index 0000000000..82c505b59a --- /dev/null +++ b/content/pt-br/_collections/design/monogram.md @@ -0,0 +1,16 @@ +--- +logos: +- + type: Logo colored + logoImg: '/design-kit/colored-logo' + color: dark +- + type: Logo black + logoImg: '/design-kit/black-logo' + color: dark +- + type: Logo white + logoImg: '/design-kit/white-logo' + color: light +- +--- diff --git a/content/pt-br/_collections/events/2019.md b/content/pt-br/_collections/events/2019.md new file mode 100644 index 0000000000..90a2e2fafe --- /dev/null +++ b/content/pt-br/_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/pt-br/_collections/events/2020.md b/content/pt-br/_collections/events/2020.md new file mode 100644 index 0000000000..ea9cd58030 --- /dev/null +++ b/content/pt-br/_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/pt-br/_collections/events/2021.md b/content/pt-br/_collections/events/2021.md new file mode 100644 index 0000000000..52aea9cfde --- /dev/null +++ b/content/pt-br/_collections/events/2021.md @@ -0,0 +1,48 @@ +--- +events: + - + name: 'Vuejs Amsterdam' + title: 'Nuxt3 in Action' + speaker: 'Sébastien Chopin' + description: 'Get a first glance at what Nuxt3 looks like from a user perspective with this demo from Sébastien' + logo: 'https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/ClF9BvKCVwY' + date: '26/02/2021' + lang: 'English' + - + name: 'Vuejs Amsterdam' + title: 'State of Nuxt3' + speaker: 'Pooya Parsa' + description: 'In this talk, Pooya recaps how Nuxt works, and gives details about what Nuxt3 brings to the table, including Nitro, Nuxt Kit and the new CLI.' + logo: 'https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/_-wqph-IaAw' + date: '26/02/2021' + lang: 'English' + - + name: 'Vuejs Amsterdam' + title: 'Edge-rendering with Nuxt' + speaker: 'Daniel Roe' + description: 'Take a sneak peek at the next-generation rendering engine that will power Nuxt 3 and Nuxt 2. Look at how this revolutionises building SSR Vue apps, and what you need to do to use this today.' + logo: 'https://pbs.twimg.com/profile_images/1326211963614007302/UJyvtK2f_400x400.jpg' + eventLogo: 'vuejs_amsterdam.svg' + eventLink: 'https://vuejs.amsterdam/' + link: 'https://youtu.be/ApUPE8b-m04' + date: '26/02/2021' + lang: 'English' + - + name: 'Strapi Conf' + title: 'Nuxt + Strapi + Composition API' + speaker: 'Alexander Lichter' + description: 'In this session, Alexander builds the fitting frontend for a Strapi CMS backend by leveraging the Composition API and ensure it is performant and fast. Get insights into the world of Vue and Nuxt, useful patterns for the Composition API and possibly some sneak peaks' + logo: 'https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg' + eventLogo: 'strapi.jpeg' + imgUrl: '/img/events/light/strapi-conf-alexander-lichter.png' + eventLink: 'https://conf.strapi.io/' + link: 'https://youtu.be/WZI5lt607ww' + date: '06/05/2021' + lang: 'English' +--- diff --git a/content/pt-br/_collections/events/index.md b/content/pt-br/_collections/events/index.md new file mode 100644 index 0000000000..dc762ec9a6 --- /dev/null +++ b/content/pt-br/_collections/events/index.md @@ -0,0 +1,3 @@ +--- +navigation: false +--- diff --git a/content/pt-br/_collections/navigations/footer.md b/content/pt-br/_collections/navigations/footer.md new file mode 100644 index 0000000000..e39c383d8a --- /dev/null +++ b/content/pt-br/_collections/navigations/footer.md @@ -0,0 +1,55 @@ +--- +links: + - title: 'Sobre' + items: + - title: 'Fale conosco' + href: 'mailto:hello@nuxtjs.com' + - title: 'Suporte para empresas' + to: '/support' + - title: 'Empresa NuxtLabs' + href: 'https://nuxtlabs.com/' + - title: 'Software de código aberto' + href: 'https://github.com/nuxt' + - title: 'Parcerias' + to: '/partners' + - title: 'Telemetria' + href: 'https://github.com/nuxt/telemetry' + - title: 'Ecossistema' + items: + - title: 'Anúncios' + to: '/announcements' + - title: 'Contribuir' + to: '/contribution-guide' + - title: 'Bate-papo com a gente' + href: 'https://discord.nuxtjs.org/' + - title: 'Eventos' + to: '/events' + - title: 'Patrocinadores' + to: '/sponsors' + - title: 'Equipes' + to: '/teams' + - title: 'Tutoriais' + to: '/tutorials' + - title: 'Cursos em Vídeo' + to: '/video-courses/' + - title: 'Recursos' + items: + - title: 'Design' + to: '/design' + - title: 'Documentação' + to: '/docs' + - title: 'Exemplos' + to: '/examples' + - title: 'Deployments' + to: '/deployments' + - title: 'Cursos de Mestres' + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite' + - title: 'Módulos' + href: 'https://modules.nuxtjs.org' + - title: 'Releases' + to: '/releases' + - title: 'Estudos de caso' + to: '/showcases' + - title: 'Temas' + to: '/themes' +--- diff --git a/content/pt-br/_collections/navigations/header.md b/content/pt-br/_collections/navigations/header.md new file mode 100644 index 0000000000..a979fd32fc --- /dev/null +++ b/content/pt-br/_collections/navigations/header.md @@ -0,0 +1,102 @@ +--- +links: + - title: 'Descubra' + items: + - title: 'Vitrines' + subtitle: 'Seleção de website construído com Nuxt' + slug: 'showcases' + to: '/showcases' + icon: 'showcases.svg' + color: 'bg-sand' + - title: 'Estudos de caso' + subtitle: 'Como as companhias usam Nuxt' + slug: 'case-studies' + to: '/case-studies' + icon: 'case-studies.svg' + color: 'bg-sand-dark' + - title: 'Depoimentos' + subtitle: 'O que eles pensam sobre nós' + slug: 'testimonials' + to: '/testimonials' + icon: 'testimonials.svg' + color: 'bg-sand-darker' + - title: 'Aprenda' + items: + - title: 'Documentação' + subtitle: 'Crie sites rápido facilmente' + slug: 'docs' + to: '/docs' + icon: 'docs.svg' + color: 'bg-green-500' + - title: 'Exemplos' + subtitle: 'Entenda tudo no Nuxt' + slug: 'examples' + to: '/examples' + icon: 'examples.svg' + color: 'bg-green-600' + - title: 'Tutoriais' + subtitle: 'Aprenda com casos práticos' + slug: 'tutorials' + to: '/tutorials' + icon: 'tutorials.svg' + color: 'bg-green-700' + - title: 'Cursos de Mestres' + subtitle: 'Aprenda com os especialistas' + href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=nsite' + icon: 'master-courses.svg' + color: 'bg-green-800' + - title: 'Explore' + items: + - title: 'Deploy' + subtitle: 'Como implementar o Nuxt' + slug: 'deployments' + to: '/deployments' + icon: 'deployments.svg' + color: 'bg-indigo-light' + - title: 'Módulos' + subtitle: 'Estender o poder do Nuxt' + href: 'https://modules.nuxtjs.org' + icon: 'modules.svg' + color: 'bg-indigo' + - title: 'Temas' + subtitle: 'Introdução aos temas' + slug: 'themes' + to: '/themes' + icon: 'themes.svg' + color: 'bg-indigo-dark' + - title: 'Cursos em Vídeos' + subtitle: 'Aprenda passo-a-passo' + slug: 'video-courses' + to: '/video-courses' + icon: 'video-courses.svg' + color: 'bg-indigo-darker' + - title: 'Comunidade' + items: + - title: 'Anúncios' + subtitle: 'Últimas notícias sobre Nuxt' + slug: 'announcements' + to: '/announcements' + icon: 'announcements.svg' + color: 'bg-mint-lighter' + - title: 'Equipes' + subtitle: 'Eles são Nuxt' + slug: 'teams' + to: '/teams' + icon: 'teams.svg' + color: 'bg-mint-light' + - title: 'Lançamentos' + subtitle: 'Todo o código que lançamos' + slug: 'releases' + to: '/releases' + icon: 'releases.svg' + color: 'bg-mint' + - title: 'Patrocinadores' + subtitle: 'Eles confiam em nós' + slug: 'sponsors' + to: '/sponsors' + icon: 'sponsors.svg' + color: 'bg-mint-dark' + - title: 'Parceiros' + slug: 'partners' + to: '/partners' +--- diff --git a/content/pt-br/_collections/teams/1.framework.md b/content/pt-br/_collections/teams/1.framework.md new file mode 100644 index 0000000000..84dda91bca --- /dev/null +++ b/content/pt-br/_collections/teams/1.framework.md @@ -0,0 +1,51 @@ +--- +members: + - + avatarUrl: 'https://github.com/alexchopin.png' + name: 'Alexandre Chopin' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/alexchopin' + - twitter: 'https://twitter.com/iamnuxt' + - linkedIn: 'https://www.linkedin.com/in/alexchopin/' + - + avatarUrl: 'https://github.com/atinux.png' + name: 'Sebastien Chopin' + location: 'Bordeaux, France' + socials: + - gitHub: 'https://github.com/Atinux' + - twitter: 'https://twitter.com/Atinux' + - linkedIn: 'https://www.linkedin.com/in/atinux/' + - + avatarUrl: 'https://github.com/pi0.png' + name: 'Pooya Parsa (پویا پارسا)' + location: 'Haarlem, Netherlands' + socials: + - gitHub: 'https://github.com/pi0' + - twitter: 'https://twitter.com/_pi0_' + - linkedIn: 'https://www.linkedin.com/in/pooyaparsa/' + - + avatarUrl: 'https://github.com/danielroe.png' + name: 'Daniel Roe' + location: 'Durham, UK' + socials: + - gitHub: 'https://github.com/danielroe' + - twitter: 'https://twitter.com/danielroe' + - linkedIn: 'https://www.linkedin.com/in/daniel-roe/' + - + avatarUrl: 'https://github.com/clarkdo.png' + name: 'Clark Du (杜欣)' + location: 'Dublin, Ireland' + socials: + - gitHub: 'https://github.com/clarkdo' + - twitter: 'https://twitter.com/ClarkDu_' + - linkedIn: 'https://www.linkedin.com/in/clark-du/' + - + avatarUrl: 'https://github.com/antfu.png' + name: 'Anthony Fu' + location: 'Hangzhou, China' + socials: + - gitHub: 'https://github.com/antfu' + - twitter: 'https://twitter.com/antfu7' + - website: 'https://antfu.me/' +--- diff --git a/content/pt-br/_collections/teams/2.community.md b/content/pt-br/_collections/teams/2.community.md new file mode 100644 index 0000000000..4defd98b68 --- /dev/null +++ b/content/pt-br/_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/pt-br/_collections/teams/index.md b/content/pt-br/_collections/teams/index.md new file mode 100644 index 0000000000..dc762ec9a6 --- /dev/null +++ b/content/pt-br/_collections/teams/index.md @@ -0,0 +1,3 @@ +--- +navigation: false +--- diff --git a/content/pt-br/_collections/testimonials/index.md b/content/pt-br/_collections/testimonials/index.md new file mode 100644 index 0000000000..73bf33acbd --- /dev/null +++ b/content/pt-br/_collections/testimonials/index.md @@ -0,0 +1,85 @@ +--- +testimonials: + - + testimonial: 'Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake.' + author: 'Evan You' + authorIcon: 'evan' + authorUrl: 'https://twitter.com/youyuxi' + job: 'Creator of Vue.js' + jobIcon: 'vue' + jobUrl: 'https://vuejs.org' + - + testimonial: + 'Nuxt has outstanding developer productivity, experience, and performance right out of the gate!
There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications.' + author: 'Sarah Drasner' + authorIcon: 'sarah' + authorUrl: 'https://twitter.com/sarah_edo' + job: 'Core Team of Vue.js' + jobIcon: 'vue' + jobUrl: 'https://vuejs.org' + - + testimonial: + 'Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX.' + author: 'Addy Osmani' + authorIcon: 'addy' + authorUrl: 'https://twitter.com/addyosmani' + job: 'Chief Engineer of Chrome' + jobIcon: 'chrome' + jobUrl: 'https://www.google.com/chrome/' + - + testimonial: + 'Nuxt has been an incredible source of innovation and inspiration for developers and framework authors alike. It’s been amazing to see its growth in web projects of all sizes on the web.' + author: 'Guillermo Rauch' + authorIcon: 'guillermo' + authorUrl: 'https://twitter.com/rauchg' + job: 'Founder of Vercel' + jobIcon: 'vercel-light' + jobIconDark: 'vercel-dark' + jobUrl: 'https://vercel.com' + - + testimonial: + 'Nuxt has a unique approach of combining a great developer experience with reusable, fully integrated features that speed up the development and performance of your next website or application.' + author: 'Dominik Angerer' + authorIcon: 'dominik' + authorUrl: 'https://twitter.com/domangerer' + job: 'Founder of Storyblok' + jobIcon: 'storyblok' + jobUrl: 'https://www.storyblok.com' + - + testimonial: + 'Nuxt is our primary choice for offering a seamless website development experience to our users. Its simplicity and progressive learning curve makes it our ideal choice for SliceMachine.' + author: 'Sadek Drobi' + authorIcon: 'sadek' + authorUrl: 'https://twitter.com/Sadache' + job: 'Founder of Prismic' + jobIcon: 'prismic' + jobUrl: 'https://prismic.io' + - + testimonial: + "Every serious full stack development team needs to stop take a look at Nuxt. Vue's developer productivity combined with Nuxt's server side rendering, is the foundation for instant loading web sites that delight users and improve team velocity." + author: 'Ajay Kapur' + authorIcon: 'ajay' + authorUrl: 'https://www.linkedin.com/in/ajaykapur/' + job: 'Founder of Layer0' + jobIcon: 'layer0-light' + jobIconDark: 'layer0-dark' + jobUrl: 'https://www.layer0.co/' + - + testimonial: + 'Nuxt has an ideal balance of approachability for developers new to JAMstack, and power for experienced teams working on complex applications. The modules and first-class integration with the rest of the Vue ecosystem makes for a superb DX.' + author: 'Dave Loneragan' + authorIcon: 'dave' + authorUrl: 'https://twitter.com/paper_tokyo' + job: 'Co-founder of Swell' + jobIcon: 'swell' + jobUrl: 'https://swell.is' + - + testimonial: + 'The moment I used Nuxt for the first time I felt in love with it. Apart from its scalability, performance and developer experience, the team behind of it is also fantastic. Thanks for developing such a great framework and making our lives much easier!' + author: 'Savas Vedova' + authorIcon: 'savas' + authorUrl: 'https://www.linkedin.com/in/savas-vedova/' + job: 'Founder of Stormkit' + jobIcon: 'stormkit' + jobUrl: 'https://www.stormkit.io/' +--- diff --git a/content/pt-br/announcements/0.nuxt-static-improvements.md b/content/pt-br/announcements/0.nuxt-static-improvements.md new file mode 100644 index 0000000000..07a0417028 --- /dev/null +++ b/content/pt-br/announcements/0.nuxt-static-improvements.md @@ -0,0 +1,169 @@ +--- +template: post +title: Nuxt Static Improvements +description: With Nuxt version 2.13, the full-static mode has been introduced. In addition, a new command nuxt export was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... until now. +imgUrl: blog/nuxt-static-improvements/main.jpeg +imgCredits: Naresh Bojja +imgCreditsUrl: https://unsplash.com/@nareshbojja +date: 2020-07-27 +authors: + - name: Alexander Lichter + avatarUrl: https://pbs.twimg.com/profile_images/1316077440414998528/mY2rcM7__400x400.jpg + link: https://twitter.com/TheAlexLichter + - name: Sébastien Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/atinux + - name: Pooya Parsa + avatarUrl: https://pbs.twimg.com/profile_images/1268227177612541952/9-fujxqt_400x400.jpg + link: https://twitter.com/_pi0_ +tags: + - release + - full-static + - framework +category: Release +--- + +## Introduction + +With Nuxt version 2.13, the [full-static mode](/announcements/going-full-static) has been introduced. In addition, a new command `nuxt export` was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... **until now.** + +- [Introduction](#introduction) +- [Faster Static Deployments](#faster-static-deployments) +- [Generate time: cache vs full webpack build](#generate-time-cache-vs-full-webpack-build) +- [Using in your projects](#using-in-your-projects) + - [Excluding Files from Cache](#excluding-files-from-cache) + - [Module Authors](#module-authors) +- [How it works](#how-it-works) + - [Back to old school commands](#back-to-old-school-commands) +- [What to do next](#what-to-do-next) + +## Faster Static Deployments + +With v2.14, `nuxt generate` will **automagically skip webpack build step when no code has been changed** and use the previous build using cache. This will help to drastically improve static deployments time by avoiding unnecessary builds which is usually the most time-consuming part of generation process. Cache support is **platform-agnostic** and works on Netlify, Vercel, or any other CI/CD setup that is caching `node_modules`. + +::video-player +--- +sources: +- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.webm + type: video/webm +- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.mp4 + type: video/mp4 +- src: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.ogv + type: video/ogg +poster: https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.jpg +--- +:: + +## Generate time: cache vs full webpack build + +See the comparison in seconds between two `nuxt generate`: + +- `Build` is when a webpack build is required +- `Cache` is only when the content has changed (webpack build skipped) + + + +::alert{type="next"} +The static site generation of our projects on content changes are now **~3.6x times** faster 🚀 +:: + +Project links: [Basic](https://github.com/pi0/nuxt-static-demo), [Strapi Module Docs](https://github.com/nuxt-community/strapi-module/tree/master/docs), [Content Module Docs](https://github.com/nuxt/content/tree/master/docs) and [Nuxt Docs](https://github.com/nuxt/nuxtjs.org). + +## Using in your projects + +1. Update `nuxt` to the latest minor version, which is v2.14. + +::code-group +```bash [Yarn] +yarn upgrade nuxt +``` +```bash [NPM] +npm update +``` +:: + +2. Ensure `target` is `static` inside your `nuxt.config` + +```js{}[nuxt.config.js] +export default { + target: 'static' + // ... +} +``` + +`nuxt generate` will behave as before to avoid breaking changes and provide legacy compatibility if you keep `target: ‘server’` or don't specify target. + +3. That’s it 🙌 + +Now, the `nuxt generate` command will build the project only if necessary, which is the case when files inside the project have been changed. It will always re-render your routes to static HTML files, like `nuxt export` is doing already. + +Now you only have to change your build command back from `nuxt build && nuxt export` to `nuxt generate` on the platform you are using. If you are using a CI, ensure that you are properly caching `node_modules`. + +### Excluding Files from Cache + +By default, nuxt ignores these directories so if any change happens inside them, build will not be triggered: + +- Build directory (`.nuxt/`) +- Static directory (`static/`) +- Generate dist (`dist/`) +- `node_modules` +- `README.md` +- Hidden dotfiles (like `.npmrc`) + +You can add more patterns using [generate.cache.ignore](/docs/configuration-glossary/configuration-generate#cache) option in `nuxt.config`: + +```js{}[nuxt.config.js] +export default { + generate: { + cache: { + ignore: [ + // When something changed in the docs folder, do not re-build via webpack + 'docs' + ] + } + } +} +``` + +It is also possible to use a function for `ignore` option to override default ignore entries. + +### Module Authors + +What if you are developing a nuxt module that is working with files that should not trigger a rebuild? The best example is for [@nuxt/content](https://content.nuxtjs.org) module that reads markdown files from the repository. In this case, these files are used within a runtime module, which is the case when using `@nuxt/content`, the module itself can tell nuxt to ignore these files for you already so you don't have to do anything! Module authors can use the new `generate:cache:ignore` hook to do so: + +```js +nuxt.hook('generate:cache:ignore', ignore => ignore.push('content')) +``` + +## How it works + +When using the new `nuxt generate` with `static` target, a snapshot including checksum of non-ignored project files as well as nuxt version and some other configuration will be written `.nuxt/build.json`. In addition, we also move the build directory to `node_modules/.cache/nuxt`. Because `node_modules` is cached by all major platforms (Netlify, Vercel, ...) and common CI/CD scripts, this solution works out of the box without additional configuration. + +When `nuxt generate` is called subsequently, it will again create a checksum based on your project files and then compare it to the existing one inside `node_modules/.cache/nuxt/build.json`. + +If they match, it means that nothing is changed that needs rebuild so we can directly start rendering pages. + +If a mismatch is detected, it means that a full rebuild would be necessary. You can also see what file caused rebuild by checking console logs. After the build, nuxt generate will save the new checksum inside `.nuxt/build.json`. You can check full implementation [here](https://github.com/nuxt/nuxt.js/pull/7712). + +### Back to old school commands + +With Nuxt v2.13, we introduced `nuxt export` and `nuxt serve` specially designed for the static target. With Nuxt v2.14, they are deprecated as `nuxt generate` and `nuxt start` is smart to detect the target and build when necessary. + +Server target: + +- `nuxt dev` = development server +- `nuxt build` = build your application for production +- `nuxt start` = start the production server (use it for Node.js hosting like Heroku, Digital Ocean, etc) + +Static target: + +- `nuxt dev` = development server +- `nuxt generate` = build if needed and statically export to `dist/` +- `nuxt start` = serve the `dist/` directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying + +## What to do next + +- Upgrade your project to [nuxt@2.14.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.14.0) +- Use `nuxt generate` instead of `nuxt export` +- Use `nuxt start` instead of `nuxt serve` +- Enjoy fast deployments 🤙 diff --git a/content/pt-br/announcements/1.going-full-static.md b/content/pt-br/announcements/1.going-full-static.md new file mode 100644 index 0000000000..d06dd4c381 --- /dev/null +++ b/content/pt-br/announcements/1.going-full-static.md @@ -0,0 +1,173 @@ +--- +template: post +title: 'Going Full Static' +description: 'Long awaited features for JAMstack fans has been shipped in v2.13: full static export, improved smart prefetching, integrated crawler, faster re-deploy, built-in web server and new target option for config ⚡️' +imgUrl: blog/going-full-static/main.jpeg +imgCredits: Vincent Ledvina +imgCreditsUrl: https://unsplash.com/@vincentledvina +date: 2020-06-18 +authors: + - name: Sebastien Chopin + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/Atinux +tags: + - Nuxt + - Static + - Crawler + - Live Preview +category: Release +--- + +## Too long to read + +1. Upgrade nuxt to `2.14.0` +2. Set `target: 'static'` in your `nuxt.config.js` +3. Run `nuxt generate` +4. That's it ✨ + +_Bonus: you can run `nuxt start` to run a local server serving your generated static application._ + +::video-player +--- +sources: +- src: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.webm + type: video/webm +- src: https://res.cloudinary.com/nuxt/video/upload/v1592503417/nuxt-full-static_rnnbvm.mp4 + type: video/mp4 +- src: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.ogv + type: video/ogg +poster: https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-full-static_rnnbvm.jpg +--- +:: + +

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

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

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

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

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

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

+ + Deploy on Platform.sh + +

+ +The `README.md` file includes details of the provided default configuration. New Platform.sh accounts are free for the first 30 days. diff --git a/content/pt-br/deployments/pm2.md b/content/pt-br/deployments/pm2.md new file mode 100644 index 0000000000..f4844f6be8 --- /dev/null +++ b/content/pt-br/deployments/pm2.md @@ -0,0 +1,65 @@ +--- +template: guide +title: PM2 +description: How to deploy Nuxt with PM2 cluster mode enabled? +target: Server +category: deployment +logo: + light: "/img/companies/square/light/pm2.png" + dark: "/img/companies/square/dark/pm2.png" +--- +# Deploy Nuxt using PM2 + +How to deploy Nuxt with PM2 cluster mode enabled? + +--- + +Deploying using [PM2](https://pm2.keymetrics.io/) (Process Manager 2) is a fast and easy solution for hosting your universal Nuxt application on your server or VM. + +In this guide, we build the application locally and serve it though a PM2 config file with the cluster mode activated. Cluster mode will prevent downtime by allowing applications to be scaled across multiple CPUs. + +## Getting Started + +Make sure you have pm2 installed on your server. If not, simply globally install it from yarn or npm. + +```bash +# yarn pm2 install +$ sudo yarn global add pm2 --prefix /usr/local + +# npm pm2 install +$ npm install pm2 -g +``` + +## Configure your application + +All you need to add to your universal Nuxt app for serving it though PM2 is a file called `ecosystem.config.js`. Create a new file with that name in your root project directory and add the following content: + +```javascript +module.exports = { + apps: [ + { + name: 'NuxtAppName', + exec_mode: 'cluster', + instances: 'max', // Or a number of instances + script: './node_modules/nuxt/bin/nuxt.js', + args: 'start' + } + ] +} +``` + +## Build and serve the app + +Now build your app with `npm run build`. + +And serve it with `pm2 start`. + +Check the status `pm2 ls`. + +Your Nuxt application is now serving! + +## Further Information + +This solution guarantees no downtime for your application on this server. (You should also prevent server failure through redundancy or high availability cloud solutions.) + +You can find PM2 additional configurations [here](https://pm2.keymetrics.io/docs/usage/application-declaration/#general). diff --git a/content/pt-br/deployments/qovery.md b/content/pt-br/deployments/qovery.md new file mode 100644 index 0000000000..66cfd665f3 --- /dev/null +++ b/content/pt-br/deployments/qovery.md @@ -0,0 +1,70 @@ +--- +template: guide +title: Qovery +description: How to deploy Nuxt on Qovery? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Qovery.svg" + dark: "/img/companies/square/dark/Qovery.svg" +--- +# Deploy Nuxt on Qovery + +How to deploy Nuxt on Qovery? + +--- + +[Qovery](https://qovery.com) is a fully-managed cloud platform that runs on your AWS, GCP, Azure and Digital Ocean account where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place. + +Static sites are **completely free** on Qovery and include the following: + +- Continuous, automatic builds & deploys from GitHub and GitLab. +- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org). +- Free managed PostgreSQL. +- Free SSD storage. +- Unlimited collaborators. +- Unlimited [custom domains](https://docs.qovery.com/guides/getting-started/setting-custom-domain/). + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, follow the [Get Started](/docs/get-started/installation) guide. + +## Setup + +Follow the procedure below to set up Nuxt on Qovery: + +### 1. Create a Qovery account. + +Visit the [Qovery dashboard](https://console.qovery.com) to create an account if you don't already have one. + +### 2. Create a project + +Click on "Create a new project" and give a name to your project. + +Click on "Next". + +### 3. Add an application + +Click on "Create an application" then choose "I have an application" and select the repository where your Nuxt site is located. + +Click on "Next". + +Skip adding services for static website. + +Click on "Deploy". + +## Deploy + +Your app should be deployed. You can see the status in real time by clicking on deployment logs. + +## Continuous deploys + +Now that Qovery is connected to your repo, it will **automatically build and publish your site** any time you push to git. + +## Custom domains + +Add your own domains to your site easily using Qovery's [custom domains](https://docs.qovery.com/guides/getting-started/setting-custom-domain/) guide. + +## Support + +Chat with Qovery developers on [Discord](https://discord.qovery.com) if you need help. diff --git a/content/pt-br/deployments/stormkitio.md b/content/pt-br/deployments/stormkitio.md new file mode 100644 index 0000000000..ef93109e42 --- /dev/null +++ b/content/pt-br/deployments/stormkitio.md @@ -0,0 +1,60 @@ +--- +template: guide +title: Stormkit.io +description: How to deploy Nuxt with Stormkit.io? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Stormkit.svg" + dark: "/img/companies/square/dark/Stormkit.svg" +--- +# Deploy with Stormkit + +How to deploy Nuxt with Stormkit.io? + +--- + +Easily build, deploy and scale your Nuxt applications with [Stormkit.io](https://www.stormkit.io). It supports instant rollbacks, serverless-side logic, snippet injections, multiple development environments and more... + +## Prerequisites + +This guide assumes you already have a Nuxt project to deploy. If you need a project, use the [create-nuxt-app](https://github.com/nuxt/create-nuxt-app) to get started or fork Stormkit's [Nuxt Example](https://github.com/stormkit-dev/hackernews-nuxt) before continuing. + +## Setup + +1. Go to [app.stormkit.io](https://app.stormkit.io) and log in by selecting your git provider. +2. Once logged in, Stormkit will ask you in which provider your codebase is located. Click on the provider once more. +3. If Github, click on ‘Connect more repositories’ and grant Stormkit access to it. +4. Next, select your repository. This will create the application on Stormkit. +5. On your application's page, find the **Production** environment and click on that. +6. Click on edit to configure your application. You will provide the build command and the + environment variables in this screen. + +## Static websites + +You don't have to do anything for static websites. Applications built with `nuxt generate` will be handled out of the box. + +## Single page applications + +For single page applications, all you have to do is to provide a `stormkit.config.yml` which redirects +all requests to `index.html`. To do so, create a `stormkit.config.yml` file on the top level of your project and specify the following rule: + +``` +app: +- redirects: + - from: /* + to: /index.html + assets: false +``` + +## Hybrid applications + +For hybrid applications, you'll have to turn on the `Serverless` toggle on the build configuration page. This will tell Stormkit to serve the requests from the lambdas instead of the CDN. You can find more on [this guide](https://www.stormkit.io/docs/deployments/configuration/nuxt#hybrid) to configure your hybrid serverless applications. + +## Hosting using Stormkit + +Stormkit generates a unique URL for each deployment. You can preview your application using these links. Later, you can connect your domain and publish any deployment so that the users will start to see that version of your application. You can also do staged-rollouts or A/B testing by publishing multiple versions at the same time. + +## Support + +If you need additional support, you can chat with Stormkit developers and other community members on [Discord](https://discord.gg/6yQWhyY). diff --git a/content/pt-br/deployments/surge.md b/content/pt-br/deployments/surge.md new file mode 100644 index 0000000000..093dc8a8bb --- /dev/null +++ b/content/pt-br/deployments/surge.md @@ -0,0 +1,64 @@ +--- +template: guide +title: Surge +description: How to deploy Nuxt app with Surge? +target: Static +category: deployment +logo: + light: "/img/companies/square/light/Surge.svg" + dark: "/img/companies/square/dark/Surge.svg" +--- +# Deploy Nuxt with Surge + +How to deploy Nuxt app with Surge? + +--- + +Nuxt gives you the possibility to host your web application on any static hosting like [Surge](https://surge.sh/) for example. + +To deploy on Surge, first install it on your computer: + +<<<<<<< HEAD +```bash +npm install -g surge +``` + +Then, we tell Nuxt to generate our web application: + +```bash +======= +::code-group +```bash [Yarn] +yarn global add surge +``` +```bash [NPM] +npm install -g surge +``` +:: + +Then, we tell Nuxt to generate our web application: + +::code-group +```bash [Yarn] +yarn generate +``` +```bash [NPM] +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on a static hosting. + +We can then deploy it to Surge: + +```bash +surge dist/ +``` + +Done :) + +If you have a project with [dynamic routes](/docs/directory-structure/pages#dynamic-pages), take a look at the [`generate` configuration](/docs/configuration-glossary/configuration-generate) to tell Nuxt how to generate these dynamic routes if you are using Nuxt <= v2.12. + +::alert{type="warning"} +When generating your web application with `nuxt generate`, [the context](/docs/internals-glossary/context) given to [asyncData](/docs/features/data-fetching) will not have `req` and `res`. +:: diff --git a/content/pt-br/design/index.md b/content/pt-br/design/index.md new file mode 100644 index 0000000000..537299c6a5 --- /dev/null +++ b/content/pt-br/design/index.md @@ -0,0 +1,75 @@ +--- +template: blank +title: 'Design Kit' +description: 'Learn how to use Nuxt logos, colors and fonts and download the design kit.' +layout: + fluid: true +navigation: false +--- +::design-hero +--- +title: Design Kit +description: "Nuxt is an MIT licensed open source project and completely free to use. +You can freely use our logos as long as you mention Nuxt and link to nuxtjs.org." +button: Download Design Kit +--- +:: + +::design-sections + +::design-section +#title +Monograms + +#description +Our logo is made from two elements: the triangular mountains and the wordmark. In most cases, they should appear together as the opposite master lockup shows. The triangular mountains can be used on their own as an icon, profile picture or badge, but the wordmark should never be used without this symbol on the side. + +#sectionComponent + :::design-logos + --- + type: monogram + --- + ::: +:: + +::design-section +#title +Logos + +#sectionComponent + :::design-logos + --- + type: logos + --- + ::: +:: + +::design-section +#title +Primary colors + +#description +Our colours have been carefully considered to work in harmony and consistency across various media. When creating Nuxt communications, use the colour values shown on the following pages to make sure your designs stay on-brand. This nature-inspired primary colour palette should be used in all of our formal company related communications. + +#sectionComponent + :::design-colors + --- + buttonText: Download Color System + --- + ::: +:: + +::design-section +#title +Typography + +#description +Our brand typeface is DM Sans by Colophon Foundry for Google. This open-source typeface was chosen for its +combination of smoothness and structure. Its geometric shapes and soft transitions will bring clarity and openness +to our texts. Also, it’s open availability will let other members of the Nuxt community incorporate it into +their work. + +#sectionComponent + :::design-typography +:: +:: diff --git a/content/pt-br/docs/1.get-started/1.installation.md b/content/pt-br/docs/1.get-started/1.installation.md new file mode 100644 index 0000000000..173ad34155 --- /dev/null +++ b/content/pt-br/docs/1.get-started/1.installation.md @@ -0,0 +1,222 @@ +--- +title: Instalação +description: Aqui, você vai encontrar informações sobre como configurar e iniciar um projeto Nuxt em 4 passos. +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: Usando create-nuxt-app +ManualInstallVideo: mKV_9AIG70E +ManualInstallVideoTitle: Instalar Nuxt manualmente +--- + +# Instalação + +Aqui, você vai encontrar informações sobre como configurar e iniciar um projeto Nuxt em 4 passos. + +--- + +## Online playground + +Você pode se divertir com o Nuxt de forma online, diretamente pelo CodeSandbox ou StackBlitz: +:app-button[Divertir-se no CodeSandbox]{href=https://codesandbox.io/s/github/nuxt/codesandbox-nuxt/tree/master/ size="small" externalIcon} +:app-button[Divertir-se no StackBlitz]{href=https://stackblitz.com/github/nuxt/starter/tree/stackblitz size="small" externalIcon} + +## Pré-requisitos + +- [node](https://nodejs.org) - _Nós recomendamos que você tenha a última versão LTS instalada_. +- Um editor de texto, nós recomendamos [VS Code](https://code.visualstudio.com/) com a extensão [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) ou [WebStorm](https://www.jetbrains.com/webstorm/) +- Um terminal, nós recomendamos utilizar o [terminal integrado](https://code.visualstudio.com/docs/editor/integrated-terminal) do VS Code ou [terminal WebStorm](https://www.jetbrains.com/help/webstorm/terminal-emulator.html). + +## Usando create-nuxt-app + +Para iniciar rapidamente, você pode utilizar [create-nuxt-app](https://github.com/nuxt/create-nuxt-app). + +Tenha certeza que você possui instalado o yarn, npx (incluído por padrão no npm v5.2+) ou npm (v6.1+). + +::code-group + +```bash [Yarn] +yarn create nuxt-app +``` + +```bash [NPX] +npx create-nuxt-app +``` + +```bash [NPM] +npm init nuxt-app +``` + +:: + +O terminal irá fazer algumas perguntas (nome, opções do Nuxt, framework de UI, TypeScript, linter, framework de testes, etc). Para encontrar mais detalhes sobre todas essas opções veja a [documentação do create-nuxt-app](https://github.com/nuxt/create-nuxt-app/blob/master/README.md). + +Uma vez que todas as questões foram respondidas, todas as dependências serão instaladas. O próximo passo é navegar para a pasta do projeto e iniciá-lo: + +::code-group + +```bash [Yarn] +cd +yarn dev +``` + +```bash [NPM] +cd +npm run dev +``` + +:: + +A aplicação agora estará rodando em [http://localhost:3000](http://localhost:3000). Parabéns! + +::alert{type="info"} +Outra forma de iniciar o Nuxt é utilizando [CodeSandbox](https://template.nuxtjs.org) o qual é uma ótima maneira de iniciar rapidamente no Nuxt e/ou compartilhar o seu código com outras pessoas. +:: + +## Instalação manual + +Criar um projeto Nuxt do início vai necessitar apenas de um arquivo e uma pasta. + +Nós vamos usar o terminal para criar os diretórios e arquivos, sinta-se livre para criar usando um editor de sua escolha. + +### Configurando o seu projeto + +Crie uma pasta vazia com o nome do seu projeto e navegue para dentro dele: + +```bash +mkdir + +cd +``` + +_Substitua `` com o nome do seu projeto._ + +Crie o arquivo `package.json` : + +```bash +touch package.json +``` + +Preencha o conteúdo do seu `package.json` com: + +```json{}[package.json] +{ + "name": "my-app", + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "generate": "nuxt generate", + "start": "nuxt start" + } +} +``` + +`scripts` define os comandos do Nuxt que serão executados com o comando `npm run ` ou `yarn `. + +#### **O que é o arquivo package.json?** + +O arquivo `package.json` é como o documento de identificação do seu projeto. Ele irá conter todas as dependências do projeto e muito mais. Se você não sabe o que é o arquivo `package.json`, nós recomendamos imensamente a leitura da documentação do [npm](https://docs.npmjs.com/creating-a-package-json-file). + +### Instalando Nuxt + +Uma vez que o `package.json` foi criado, adicione `nuxt` no seu projeto via `npm` or `yarn` utilizando um dos comandos abaixo: + +::code-group + +```bash [Yarn] +yarn add nuxt +``` + +```bash [NPM] +npm install nuxt +``` + +:: + +Esse comando vai adicionar `nuxt` como uma dependência para o seu projeto e vai adicioná-lo no seu `package.json`. A pasta `node_modules` também será criada, é aonde todos os seus pacotes instalados e dependências serão salvas. + +::alert{type="info"} + +Um arquivo `yarn.lock` ou `package-lock.json` também será criado, o qual garante consistência e a compatibilidade das dependências instaladas no seu projeto. + +:: + +### Criando a sua primeira página + +Nuxt transforma todos arquivos `*.vue` dentro da pasta `pages` em rotas para a aplicação. + +Crie a pasta `pages` dentro do seu projeto: + +```bash +mkdir pages +``` + +Então, crie um arquivo `index.vue` dentro da pasta `pages`: + +```bash +touch pages/index.vue +``` + +É importante que essa página seja nomeada `index.vue` dessa forma ela será a página principal que o Nuxt irá mostrar quando a aplicação abrir. + +Abra o arquivo `index.vue` no seu editor e adicione o seguinte conteúdo: + +```html{}[pages/index.vue] + +``` + +### Iniciando o projeto + +Inicie o seu projeto executando um dos seguintes comandos abaixo: + +::code-group + +```bash [Yarn] +yarn dev +``` + +```bash [NPM] +npm run dev +``` + +:: + +::alert{type="info"} + +Nós usamos o comando dev quando iniciamos a nossa aplicação no modo de desenvolvimento. + +:: + +A aplicação está agora rodando em **[http://localhost:3000](http://localhost:3000/)**. + +Abra no seu navegador clicando no link do seu terminal e você deverá ver o texto "Olá mundo!" +que nós copiamos no passo anterior. + +::alert{type="info"} + +Quando iniciado o Nuxt no modo de desenvolvimento, ele estará escutando por mudanças nos arquivos dentro dos demais diretórios, então não há necessidade de reiniciar a aplicação quando por exemplo adicionar páginas novas. + +:: + +::alert{type="warning"} + +Quando você rodar o comando dev será criado uma pasta chamada `.nuxt`. Essa pasta deve ser ignorada +pelo controle de versionamento. Você pode ignorar arquivos criando um arquivo `.gitignore` na raiz do projeto e adicionando .nuxt ao arquivo. + +:: + +### Passo extra + +Crie uma página chamada `fun.vue` dentro da pasta `pages`. + +Adicione um `` e inclua um cabeçalho com uma frase engraçada dentro. + +Então, vá até o seu navegador e veja a sua nova página em **[http://localhost:3000/fun](http://localhost:3000/fun)**. + +::alert{type="info"} + +Criar uma pasta `more-fun` e colocar um arquivo `index.vue` dentro, irá dar o mesmo resultado que criar um arquivo `more-fun.vue`. + +:: diff --git a/content/pt-br/docs/1.get-started/2.routing.md b/content/pt-br/docs/1.get-started/2.routing.md new file mode 100644 index 0000000000..f1acfab67b --- /dev/null +++ b/content/pt-br/docs/1.get-started/2.routing.md @@ -0,0 +1,57 @@ +--- +title: Roteamento +description: A maioria dos sites possuem mais que uma página. Por exemplo uma página inicial, uma página sobre, formas de contato etc. Para mostrar essas páginas nós precisamos de um 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 +--- + +# Roteamento + +A maioria dos sites possuem mais que uma página. Por exemplo uma página inicial, uma página sobre, formas de contato etc. Para mostrar essas páginas nós precisamos de um Router + +--- + +## Rotas automáticas + +A maioria dos websites irão ter mais que uma página. Para mostrar essas páginas nós precisamos de um Router. É aonde o `vue-router` entra. Quando se trabalha com aplicações Vue, você tem que iniciar o arquivo de configuração (exemplo `router.js`) e adicionar todas as rotas manualmente nele. + +O Nuxt gera automaticamente as configurações do `vue-router` para você, baseando-se nos arquivos Vue dentro da pasta `pages`. Isso significa que você nunca mais terá que escrever as configurações do router! Nuxt também te dá code-splitting automático para todas as suas rotas. + +Em outras palavras, tudo que você tem que fazer para ter uma rota na sua aplicação é criar arquivos `.vue` dentro da pasta `pages`. + +::alert{type="next"} +Aprenda mais sobre [Roteamento](/docs/features/file-system-routing) +:: + +## Navegação + +Para navegar entre as páginas do seu app, você deve usar o componente [NuxtLink](/docs/features/nuxt-components#the-nuxtlink-component). Esse componente está incluído no Nuxt, portanto você não tem que importá-lo como você faz com os outros componentes. É igual a tag HTML ``, exceto que ao invés de usarmos uma `href="/about"` nós usamos `to="/about"`. Se você já usou `vue-router` antes, você pode imaginar que o `` é uma substituição do ``. + +Um simples link para a página `index.vue` dentro da sua pasta `pages`: + +```html{}[pages/index.vue] + +``` + +Para todas as páginas de dentro do seu site, use ``. Se você tem links para outros sites você deve usar a tag ``. Veja abaixo um exemplo: + +```html{}[pages/index.vue] + +``` + +::alert{type="next"} +Leia mais sobre [componente NuxtLink](/docs/features/nuxt-components#the-nuxtlink-component). +:: diff --git a/content/pt-br/docs/1.get-started/3.directory-structure.md b/content/pt-br/docs/1.get-started/3.directory-structure.md new file mode 100644 index 0000000000..ee80b429ad --- /dev/null +++ b/content/pt-br/docs/1.get-started/3.directory-structure.md @@ -0,0 +1,88 @@ +--- +title: Estrutura de pastas +description: A estrutura padrão de uma aplicação Nuxt é planejada para permitir um ótimo ponto de início tanto para aplicações pequenas, quanto para aplicações grandes. Você é livre para organizar a sua aplicação da forma que gostar e criar outras pastas conforme precisar. +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 +--- + +# Estrutura de pastas + +A estrutura padrão de uma aplicação Nuxt é planejada para permitir um ótimo ponto de início tanto para aplicações pequenas, quanto para aplicações grandes. +Você é livre para organizar a sua aplicação da forma que gostar e criar outras pastas conforme precisar. + +--- + +Vamos criar as pastas e arquivos que ainda não existem no seu projeto. + +```bash +mkdir components assets static +touch nuxt.config.js +``` + +Essas são as pastas e os arquivos principais que nós usamos quando construímos uma aplicação Nuxt. Você vai encontrar uma explicação para cada um deles abaixo. + +::alert{type="info"} + +Criar pastas com esses nomes habilita recursos no seu projeto Nuxt. + +:: + +## Pastas + +### A pasta pages + +A pasta `pages` contém as suas visualizações e rotas. +Conforme você aprendeu no último capítulo, Nuxt lê todos os arquivos `.vue` dentro da pasta e os utiliza para criar as rotas da aplicação. + +::alert{type="next"} +Aprender mais sobre a [pasta pages](/docs/directory-structure/pages) +:: + +### A pasta components + +A pasta `components` é aonde você vai colocar todos os seus componentes Vue.js os quais serão importados dentro das suas páginas. + +Com Nuxt você pode criar os seus componentes e importá-los automaticamente +dentro dos seus arquivos .vue, significando que não é mais necessário importá-los manualmente na sessão script. + +A Nuxt fará a varredura e a importação automática destes para você, uma vez que você tenha os componentes configurados como "true" + +::alert{type="next"} +Aprenda mais sobre a [pasta components](/docs/directory-structure/components) +:: + +### A pasta assets + +A pasta `assets` contém seus arquivos não compilados como folhas de estilo, imagens, ou fontes. + +::alert{type="next"} +Aprenda mais sobre a [pasta assets](/docs/directory-structure/assets) +:: + +### A pasta static + +A pasta `static` é mapeada diretamente para a raiz do servidor e contém arquivos que precisam manter os seus nomes (por exemplo `robots.txt`) _ou_ semelhantes que não irão mudar (exemplo o favicon) + +::alert{type="next"} +Aprenda mais sobre a [pasta static](/docs/directory-structure/static) +:: + +### O arquivo nuxt.config.js + +O arquivo `nuxt.config.js` é o único ponto de configuração para o Nuxt. Se você quiser adicionar módulos ou sobrescrever as configurações padrão, esse é o lugar para aplicar as mudanças. + +::alert{type="next"} +Aprenda mais sobre o [arquivo nuxt.config.js](/docs/directory-structure/nuxt-config) +:: + +### O arquivo package.json + +O arquivo `package.json` contém todas as dependências e scripts para a sua aplicação. + +## Mais sobre a estrutura do projeto + +Existem outros diretórios e arquivos úteis, como [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) e [store](/docs/directory-structure/store). Como eles não são necessários para pequenas aplicações, eles não sào explicados aqui. + +::alert{type="next"} +Para aprender mais sobre todas as pastas em detalhes, sinta-se livre para ler [O guia de estrutura de pastas](/docs/directory-structure/nuxt). +:: diff --git a/content/pt-br/docs/1.get-started/4.commands.md b/content/pt-br/docs/1.get-started/4.commands.md new file mode 100644 index 0000000000..ec500f9d44 --- /dev/null +++ b/content/pt-br/docs/1.get-started/4.commands.md @@ -0,0 +1,182 @@ +--- +title: Comandos e Deploy +description: Nuxt vem com um conjunto de comandos úteis, tanto para propósitos de desenvolvimento como para produção. +category: get-started +video: hYdXzIGDlYA +--- + +# Comandos e deployment + +Nuxt vem com um conjunto de comandos úteis, tanto para propósitos de desenvolvimento como para produção. + +--- + +## Usando no package.json + +Você deve ter esses comandos no seu `package.json`: + +```json +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate" +} +``` + +Você pode iniciar os seus comandos via `yarn ` ou `npm run ` (exemplo: `yarn dev`/`npm run dev`). + +## Ambiente de desenvolvimento + +Para iniciar o Nuxt em modo de desenvolvimento com o [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/) em `http://localhost:3000`: + +::code-group + +```bash [Yarn] +yarn dev +``` + +```bash [NPM] +npm run dev +``` + +:: + +## Lista de comandos + +Você pode iniciar diferentes comandos dependendo do [target](/docs/features/deployment-targets): + +### target: `server` (valor padrão) + +- **nuxt dev** - Inicia o servidor de desenvolvimento. +- **nuxt build** - Constrói e otimiza a sua aplicação com webpack para produção. +- **nuxt start** - Inicia o servidor de produção (depois de rodar `nuxt build`). Use-o para rodar Node.js em locais como Heroku, Digital Ocean, etc. + +### target: `static` + +- **nuxt dev** - Inicia o servidor de desenvolvimento. +- **nuxt generate** - Constrói a aplicação (se necessário), gera todas as rotas como um arquivo HTML e exporta para a pasta `dist/` (usado para hospedagem estática). +- **nuxt start** - Serve o diretório `dist/` como sua hospedagem estática deve fazer (Netlify, Vercel, Surge, etc), ótimo para testar antes do deploy. + +## Inspeção da configuração do Webpack + +Você pode inspecionar a configuração do webpack usada pelo Nuxt para montar o projeto (similar ao [vue inspect](https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config)). + +- **nuxt webpack [query...]** + +**Argumentos:** + +- `--name`: Nome do pacote a ser inspecionado. (client, server, modern) +- `--dev`: Inspeciona a configuração do webpack para modo de desenvolvimento +- `--depth`: Inspeção profunda. O padrão é 2 para evitar a saída detalhada. +- `--no-colors`: Desativar cores ANSI (desativado por padrão quando o TTY não está disponível ou quando redirecionando para um arquivo) + +**Exemplos:** + +- `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"` + +## Deploy em produção + +Nuxt deixa você escolher entre deploy para servidor ou estático. + +### Deploy para servidor + +Para fazer o deploy da aplicação SSR nós usamos `target: 'server'`, aonde server é o valor padrão. + +::code-group + +```bash [Yarn] +yarn build +``` + +```bash [NPM] +npm run build +``` + +:: + +Nuxt vai criar uma pasta `.nuxt` com tudo dentro pronto para ser hospedado no seu servidor. + +::alert{type="info"} +Nós recomendamos colocar `.nuxt` no `.npmignore` ou `.gitignore`. +:: + +Uma vez que sua aplicação foi construída você pode usar o comando `start` para ver a versão de produção da sua aplicação. + +::code-group + +```bash [Yarn] +yarn start +``` + +```bash [NPM] +npm run start +``` + +:: + +### Deploy estático (Pre-renderizado) + +Nuxt dá a habilidade de hospedar o seu site em qualquer site de hospedagem estática. + +Para fazer o deploy de um site estático, tenha certeza que você tem `target: 'static'` no seu `nuxt.config.js` (para Nuxt >= 2.13): + +```js{}[nuxt.config.js] +export default { + target: 'static' +} +``` + +::code-group + +```bash [Yarn] +yarn generate +``` + +```bash [NPM] +npm run generate +``` + +:: + +Nuxt vai criar uma pasta `.nuxt` com tudo dentro pronto para ser hospedado no seu serviço de hospedagens de sites estáticos. + +A partir do Nuxt v2.13, há um crawler instalado que agora rastreará suas tags de link e gerará suas rotas ao usar o comando `nuxt generate` com base nesses links. + +::alert{type="warning"} +**Aviso:** Rotas dinâmicas são ignoradas pelo comando `generate` ao usar Nuxt <= v2.12: [API Configuration generate](/docs/configuration-glossary/configuration-generate) +:: + +::alert{type="info"} +Ao gerar a sua aplicação web com `nuxt generate`, [o contexto](/docs/internals-glossary/context) given to [asyncData](/docs/features/data-fetching#async-data) e [fetch](/docs/features/data-fetching#the-fetch-hook) não terá `req` e `res`. +:: + +#### **Falha no erro** + +Para retornar um código de status diferente de zero quando um erro de página for encontrado e permitir que o CI/CD falhe no deploy ou compilação, você pode usar o argumento `--fail-on-error`. + +::code-group + +```bash [Yarn] +yarn generate --fail-on-error +``` + +```bash [NPM] +npm run generate --fail-on-error +``` + +:: + +## O que vem a seguir? + +::alert{type="next"} +Leia o [Guia de Deploy](/deployments) para encontrar exemplos de implantações em hosts populares. +:: diff --git a/content/pt-br/docs/1.get-started/5.conclusion.md b/content/pt-br/docs/1.get-started/5.conclusion.md new file mode 100644 index 0000000000..b7be02e64d --- /dev/null +++ b/content/pt-br/docs/1.get-started/5.conclusion.md @@ -0,0 +1,27 @@ +--- +title: Conclusão +description: Parabéns você acabou de criar a sua primeira aplicação Nuxt e você agora deve se considerar um Nuxter. Mais existe ainda muita coisa para aprender e muito mais que você pode fazer com o Nuxt. Aqui temos algumas recomendações. +category: get-started +--- + +# Conclusão + +Parabéns você acabou de criar a sua primeira aplicação Nuxt e você agora deve se considerar um Nuxter. Mais existe ainda muita coisa para aprender e muito mais que você pode fazer com o Nuxt. Aqui temos algumas recomendações. + +--- + +::alert{type="next"} +Dê uma olhada no [Livro de conceitos](../concepts/views) +:: + +::alert{type="next"} +Trabalhando com [asyncData](/docs/features/data-fetching#async-data) +:: + +::alert{type="next"} +Escolhendo entre os diferentes [modos de renderização](/docs/features/rendering-modes) +:: + +::alert{type="star"} +Você têm gostado do Nuxt? Não se esqueça de dar uma [estrela no nosso projeto](https://github.com/nuxt/nuxt.js) no GitHub +:: diff --git a/content/pt-br/docs/1.get-started/6.upgrading.md b/content/pt-br/docs/1.get-started/6.upgrading.md new file mode 100644 index 0000000000..b0dbd5c539 --- /dev/null +++ b/content/pt-br/docs/1.get-started/6.upgrading.md @@ -0,0 +1,40 @@ +--- +title: Atualizando +description: Atualizar o Nuxt é rápido, porém existem mais coisas envolvidas que o seu package.json +category: get-started +--- + +# Upgrading + +Atualizar o Nuxt é rápido, porém existem mais coisas envolvidas que o seu package.json + +--- + +Se você estiver atualizando para Nuxt v2.14 e você quer usar hospedagem estática então você precisa adicionar [`target:static`](/docs/features/deployment-targets#static-hosting) no seu arquivo nuxt.config.js para conseguir gerar o comando e funcionar apropriadamente. + +```js{}[nuxt.config.js] +export default { + target: 'static' +} +``` + +## Iniciando + +1. Olhe a [notas de lançamento](/releases) para a versão que você deseja atualizar, e valide se existem instruções adicionais para aquela release em particular. +2. Atualize a versão especificada para o pacote `nuxt` no seu arquivo `package.json`. + +Após esta etapa, as instruções variam dependendo se você está usando Yarn ou npm. _[Yarn](https://yarnpkg.com/en/docs/usage) é o gerenciador de pacotes preferido para trabalhar com Nuxt, pois é a ferramenta de desenvolvimento que os testes foram escritos._ + +## Yarn + +3. Remova o arquivo `yarn.lock` +4. Remova a pasta `node_modules` +5. E xecute o comando `yarn` +6. Após a instalação ser concluída e você ter executado seus testes, considere atualizar também outras dependências. O comando `yarn outdated` pode ser usado para isso. + +## npm + +3. Remova o arquivo `package-lock.json` +4. Remova o diretório `node_modules` +5. Execute o comando `npm install` +6. Após a instalação ser concluída e você ter executado seus testes, considere atualizar também outras dependências. O comando `npm outdated` pode ser usado. diff --git a/content/pt-br/docs/1.get-started/index.md b/content/pt-br/docs/1.get-started/index.md new file mode 100644 index 0000000000..79d5be8727 --- /dev/null +++ b/content/pt-br/docs/1.get-started/index.md @@ -0,0 +1,6 @@ +--- +title: 'Comece a usar' +navigation: + collapse: false + redirect: /docs/get-started/installation +--- diff --git a/content/pt-br/docs/2.concepts/1.views.md b/content/pt-br/docs/2.concepts/1.views.md new file mode 100644 index 0000000000..4730768b39 --- /dev/null +++ b/content/pt-br/docs/2.concepts/1.views.md @@ -0,0 +1,171 @@ +--- +title: Exibições +description: A sessão de Exibições descreve tudo o que você precisa saber para configurar dados e visualizações de uma rota específica da sua Aplicação Nuxt. As exibições consistem em um modelo de aplicativo, um layout e a página real. +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 +--- + +# Exibições + +A sessão de Exibições descreve tudo o que você precisa saber para configurar dados e visualizações de uma rota específica da sua Aplicação Nuxt. As exibições consistem em um modelo de aplicativo, um layout e a página real. + +--- + +![Composição de uma Exibição no Nuxt](/img/docs/views.png) + +Composição de uma Exibição no Nuxt + +## Páginas + +Cada Página é um componente Vue, mas o Nuxt adiciona atributos e funções especiais para tornar o desenvolvimento de seu aplicativo o mais fácil possível. + +```html{}[pages/index.vue] + + + + + +``` + +## Propriedades de uma Página + +Há muitas propriedades em uma página, tais como a propriedade head no exemplo acima. + +::alert{type="next"} +Consulte [Estrutura de Diretório](/docs/directory-structure/nuxt) para aprender mais sobre todas as propriedades que podem ser utilizadas na sua página. +:: + +## Layouts + +Os Layouts são uma grande ajuda quando você quer mudar o visual e a aparência de seu aplicativo Nuxt. Por exemplo, você quer incluir uma barra lateral ou ter layouts distintos para celular e desktop. + +### Layout Padrão + +Você pode definir um Layout padrão adicionando um arquivo `default.vue` dentro do diretório de layouts. Isso será usado por todas as páginas que não tenham um layout especificado. A única coisa que você precisa incluir no layout é o componente ``que irá renderizar a página; + +```html{}[layouts/default.vue] + +``` + +::alert{type="next"} +Leia mais sobre o [componente Nuxt](/docs/features/nuxt-components) no capítulo de componentes +:: + +### Layout personalizado + +Você pode criar um layout personalizado adicionando um arquivo `.vue` no diretório de layouts. Para usar o layout personalizado você precisa definir a propriedade `layout`na página em que você deseja usar o layout. O valor será o nome do layout personalizado que você criou. + +Para criar um layout blog adicione o arquivo `blog.vue` no diretório de layouts `layouts/blog.vue`: + +```html{}[layouts/blog.vue] + +``` + +::alert{type="warning"} +Certifique-se de adicionar o componente `` ao criar um layout para realmente incluir a página. +:: + +Em seguida, usamos a propriedade layout com o valor 'blog' na página em que queremos aplicar o layout. + +```html{}[pages/posts.vue] + + + +``` + +::alert{type="info"} +Se você não adicionar a propriedade layout a sua página, ex: `layout: 'blog'` o layout `default.vue`será usado. +:: + +## Página de Erro + +A página de erro é uma página que sempre é mostrada quando um erro ocorre (não ira mostrar quando estiver renderizado no lado do servidor). + +::alert{type="warning"} +Apesar de esse arquivo estar no diretório de `layouts`, ele deve ser tratado como uma página. +:: + +Como mencionado anteriormente, esse layout é especial, visto que você não deve incluir o componente `` dentro dele. Você deve ver esse layout quando ocorrer um erro (`400`, `500`, etc.). Similar a outras páginas, você também pode definir um layout personalizado para a página de erro da maneira usual. + +Você pode personalizar a página de erro adicionando o arquivo `layouts/error.vue`: + +```html{}[layouts/error.vue] + + + +``` + +## Documento: App.html + +O template é usado para criar o quadro HTML real de seu documento para seu aplicativo Nuxt que injeta o conteúdo, assim como variáveis para o head e o body. Este arquivo é criado automaticamente para você e, em geral, raramente precisa ser modificado. Você pode personalizar o HTML usado pelo Nuxt para incluir scripts ou classes CSS condicionais, criando um arquivo app.html no diretório fonte de seu projeto que, por padrão, é o diretório raiz. + +O modelo padrão usado pelo Nuxt é: + +```html{}[app.html] + + + + {{ HEAD }} + + + {{ APP }} + + +``` + +Um caso de uso de um template personalizado é adicionar classes CSS condicionais para o 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/pt-br/docs/2.concepts/2.context-helpers.md b/content/pt-br/docs/2.concepts/2.context-helpers.md new file mode 100644 index 0000000000..e319516249 --- /dev/null +++ b/content/pt-br/docs/2.concepts/2.context-helpers.md @@ -0,0 +1,327 @@ +--- +<<<<<<< HEAD +title: Contexto e Auxiliadores +description: O contexto fornece informações adicionais e muitas vezes informações opcionais sobre a requisição atual para a aplicação. +======= +title: Context and Helpers +description: The context provides additional and often optional information about the current request to the application. +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 +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 +--- + +<<<<<<< HEAD + +# Contexto e auxiliadores + +# O contexto fornece _informações adicionais_ e muitas vezes informações opcionais sobre a requisição atual para a aplicação. + +# Context and helpers + +The context provides _additional_ and often optional information about the current request to the application. + +> > > > > > > ec0edd074c49c596294bec042bcadf3a276aeb00 + +--- + +![](/img/docs/context.svg) + +<<<<<<< HEAD +O objeto `contexto` está disponível em funções específicas do Nuxt como [asyncData](/docs/features/data-fetching#async-data), [plugins](/docs/directory-structure/plugins), [middleware](/docs/directory-structure/middleware) e [nuxtServerInit](/docs/directory-structure/store#the-nuxtserverinit-action). Ele fornece _informações adicionais_ e muitas vezes informações sobre a requisição atual para a aplicação. + +Em primeiro lugar, o contexto é usado para fornecer acesso a outras partes da aplicação Nuxt, ex. o Vuex store ou a instância `connect`. Dessa forma, temos os objetos `req` e `res` disponíveis no contexto no lado do servidor e o `store` sempre disponível. Mas com o tempo, o contexto foi estendido com muitas outras variáveis ​​e atalhos úteis. Agora temos acesso ao HMR (Hot Module Reload/Replacement) em modo de desenvolvimento, a rota atual (`route`), parâmetros da página (`params` e `query`), também a opção de acessar variáveis ​​de ambiente por meio do contexto. Além disso funções de módulos e auxiliares podem ser expostos por meio do contexto para estarem disponíveis em ambos - no lado do cliente e do servidor. + +**Todas as chaves de contexto que são disponíveis por padrão** + +````js +function (context) { // Pode ser asyncData ou nuxtServerInit + // Sempre disponível +======= +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 +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 + const { + app, + store, + route, + params, + query, + env, + isDev, + isHMR, + redirect, + error, +<<<<<<< HEAD + $config + } = context + + // Disponível apenas no lado do servidor +======= + $config + } = context + + // Only available on the Server-side +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 + if (process.server) { + const { req, res, beforeNuxtRender } = context + } + +<<<<<<< HEAD + // Disponível apenas no lado do cliente +======= + // Only available on the Client-side +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 + if (process.client) { + const { from, nuxtState } = context + } +} +```` + +::alert{type="warning"} +<<<<<<< HEAD +O _context_ que nos referimos aqui não deve ser confundido com o objeto de contexto disponível em Ações Vuex ou aquele disponível na função `build.context` no seu `nuxt.config.js`. Eles não estão relacionados entre si! +:: + +Aprenda mais sobre as diferentes chaves de contexto no nosso [Glossário Interno](/docs/internals-glossary/context) + +### Usando parâmetros de página para consulta em sua API + +O contexto expõe diretamente os possíveis parâmetros dinâmicos da rota através do `context.params`. No exemplo a seguir, chamamos uma API através do módulo `nuxt/http` utilizando um parâmetro de página dinâmicos como parte da URL. Os módulos, como o módulo [nuxt/http](https://http.nuxtjs.org/), podem expor funções próprias que estão então disponíveis através do objeto [context.app](/docs/internals-glossary/context#app). + +# Além disso, nós envolvemos a chama da API em uma declaração `try/catch` para tratar possíveis erros. Com a função `context.error`, podemos mostrar diretamente a Página de Erro do Nuxt e passar no erro ocorrido. + +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. + +> > > > > > > ec0edd074c49c596294bec042bcadf3a276aeb00 + +```js{}[pages/posts/_id.vue] +export default { + async asyncData(context) { + const id = context.params.id + try { +<<<<<<< HEAD + // Usando o módulo nuxtjs/http exposto via context.app +======= + // Using the nuxtjs/http module here exposed via context.app +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 + const post = await context.app.$http.$get( + `https://api.nuxtjs.dev/posts/${id}` + ) + return { post } + } catch (e) { +<<<<<<< HEAD + context.error(e) // Mostrando a página de erro do Nuxt +======= + context.error(e) // Show the nuxt error page with the thrown error +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 + } + } +} +``` + +<<<<<<< HEAD +Com o [ES6](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring) você poda usar essa sintaxe para desestruturar o seu objeto do contexto. Você pode passar nos objetos aos quais deseja ter acesso e depois usá-los no código sem usar a palavra contexto. +======= +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. + +> > > > > > > ec0edd074c49c596294bec042bcadf3a276aeb00 + +```js{}[pages/posts/_id.vue] +export default { + async asyncData({ params, $http, error }) { + const id = params.id + + try { +<<<<<<< HEAD + // Usando o modulo nuxtjs/http exposto através do context.app + const post = await $http.$get(`https://api.nuxtjs.dev/posts/${id}`) + return { post } + } catch (e) { + error(e) // Mostrando a página de erro do Nuxt +======= + // 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 +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 + } + } +} +``` + +<<<<<<< HEAD +Quer usar query params? Você usará [context.query.id](/docs/internals-glossary/context#query) + +### Redirecionando usuários e acessando o store + +# Também é possível acessar o [Vuex store](/docs/directory-structure/store) (quando você tiver configurando o diretório `store`) através do contexto. Ele fornece um objeto `store` que pode ser tratado como `this.$store` nos componentes Vue. Além disso, utilizamos o método `redirect`, um auxiliador exporto através do contexto, para redirecionar o usuário caso o estado `authenticated` seja [falso](https://developer.mozilla.org/pt-BR/docs/Glossary/Falsy). + +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). + +> > > > > > > ec0edd074c49c596294bec042bcadf3a276aeb00 + +```js +export default { + middleware({ store, redirect }) { +<<<<<<< HEAD + // Recuperando chaves através de desestruturação de objetos + const isAuthenticated = store.state.authenticated + +======= + // retrieving keys via object destructuring + const isAuthenticated = store.state.authenticated +>>>>>>> ec0edd074c49c596294bec042bcadf3a276aeb00 + if (!isAuthenticated) { + return redirect('/login') + } + } +} +``` + +::alert{type="next"} +<<<<<<< HEAD +Consulte o Glossário Interno para mais exemplo do [método redirect](/docs/internals-glossary/context#redirect) +:: + +## Auxiliadores + +Além dos atalhos no contexto, há também outros pequenos auxiliadores presentes na sua aplicação Nuxt. + +## `$nuxt`: O Auxiliador do Nuxt + +O `$nuxt` é um auxiliador projetado para melhorar a experiência do usuário para ser uma válvula de escape em algumas situações. Pode ser acessado através de `this.$nuxt` nos componente Vue e através de `window.$nuxt` no lado do cliente. + +### Verificador de conexão + +# O auxiliador `$nuxt` oferece uma maneira rápida de descobrir se a conexão de internet do usuário está presente ou não: Expõe os valores booleanos `isOffline` e `isOnline`. Podemos utilizá-los para mostrar uma mensagem assim que o usuário estiver offline (por exemplo). + +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). + +> > > > > > > ec0edd074c49c596294bec042bcadf3a276aeb00 + +```html{}[layouts/default.vue] + +``` + +### Acessando a instância raiz + +Além de fornecer características DX/UX (Developer Experience/User Experience), o auxiliador `$nuxt` também fornece um atalho para a instância raiz da sua aplicação em qualquer componente. Mas isso não é tudo - você também pode acessar o auxiliador `$nuxt` através de `window.$nuxt` que pode ser usado como uma válvula de escape para obter acesso ao métodos dos módulos como `$axios` de fora dos seus componentes Vue. Isso deve ser usado com muito cuidado e **apenas como último recurso**. + +### Atualização dos dados da página + +Quando você quiser atualizar a página atual para o usuário, mas você não quer recarregar totalmente a página, pois poderá fazer uma chamada ao servidor novamente ou pelo menos reiniciar toda a aplicação Nuxt. Em vez disso, muitas vezes você só deseja atualizar os dados, fornecidos por `asyncData` ou `fetch`. + +Você pode fazer isso, usando `this.$nuxt.refresh()` + +```html + + + +``` + +#### Controlando a barra de carregamento + +Com `$nuxt`, você pode controlar a barra de carregamento do Nuxt através de `this.$nuxt.$loading`. + +```js +export default { + mounted() { + this.$nextTick(() => { + this.$nuxt.$loading.start() + setTimeout(() => this.$nuxt.$loading.finish(), 500) + }) + } +} +``` + +Leia mais em [características de carregamento](/docs/features/loading). + +## Auxiliador onNuxtReady + +Se você quiser executar alguns script _após_ sua aplicação Nuxt ser carregada e estiver pronta, você pode usar a função `window.onNuxtReady`. Ela pode ser útil quando você quiser executar uma função no lado do cliente sem aumentar o tempo de interação de seu site. + +```js +window.onNuxtReady(() => { + console.log('Nuxt está pronto e montado!') +}) +``` + +## Auxiliadores de processos + +Nuxt injeta três valores booleanos (`client`, `server`, `status`) no objeto global `process` que pode ajudar você a determinar se sua aplicação foi renderizada no servidor ou totalmente no cliente, bem como verificar a geração estática do site. Esses auxiliadores estão disponíveis em toda a sua aplicação e são frequentemente mais utilizados em código `asyncData` na área do usuário. + +```html{}[pages/about.vue] + + + +``` + +Nesse exemplo, `renderedOn` retornará `'servidor'` quando estiver sendo utilizado no lado do servidor e um usuário acessa a página diretamente. Quando o usuário navegar para um página a partir de outra parte da aplicação, por exemplo, clicando em um ``, será retornado `'cliente'`. diff --git a/content/pt-br/docs/2.concepts/3.server-side-rendering.md b/content/pt-br/docs/2.concepts/3.server-side-rendering.md new file mode 100644 index 0000000000..c53a0b5f6a --- /dev/null +++ b/content/pt-br/docs/2.concepts/3.server-side-rendering.md @@ -0,0 +1,99 @@ +--- +title: Renderização do Lado do Servidor +descrição: Renderização do lado do servidor (SSR), é a capacidade de uma aplicação renderizar uma página web no servidor em vez de renderizá-la no navegador. +category: concepts +--- + +# Renderização do Lado do Servidor + +A renderização do lado do servidor (SSR), é a capacidade de uma aplicação renderizar uma página web no servidor em vez de renderizá-la no navegador. O lado do servidor envia uma página totalmente renderizada para o cliente; o JavaScript no lado do cliente assume o controle e permite que Vue.js [hidrate](https://ssr.vuejs.org/guide/hydration.html) nossa aplicação. + +--- + +## Servidor Node.js obrigatório + +Um ambiente JavaScript é necessário para renderizar sua página da web. + +Um servidor Node.js precisa ser configurado para executar sua aplicação Vue.js. + +## Estender e melhorar o servidor + +Você pode estender o servidor com serverMiddleware e controlar rotas com o 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'] + +} +``` + +## Ambiente Servidor vs Navegador + +Como você está em um ambiente Node.js você tem acesso a objetos do Node.js como `req` e `res`. Você não tem acesso aos objetos `window` ou `document` pois eles pertencem no ambiente do navegador. No entanto, você pode utilizar `window` ou `document` através dos hooks `beforeMount` ou `mounted` + +```js +beforeMount () { + window.alert('olá'); +} +mounted () { + window.alert('olá'); +} +``` + +## Passos da renderização do lado do servidor com Nuxt + +### Passo 1: Navegador para o servidor + +Quando o navegador envia o primeiro request, ele chamará o servidor interno Node.js. O Nuxt irá gerar o HTML e enviar de volta ao navegador com os resultados das funções executadas, por exemplo `asyncData`, `nuxtServerInit` ou `fetch`. Funções hooks também são executadas. + +### Passo 2: Servidor para o Navegador + +O navegador recebe a página renderizada do servidor com o HTML gerado. O conteúdo é exibido e a hidratação do Vue.js entra em ação. Após esse processo, a página será interativa. + +### Passo 3: Navegador para o Navegador + +A navegação entre página com [``](/docs/features/nuxt-componentes#the-nuxtlink-componente) é feita no lado do cliente para que o servidor não seja requisitado novamente, a menos que você atualize o navegador. + +## Cavernas + +### window ou document indefinidos + +Isso acontece por conta da renderização do lado do servidor. Se você deseja importar um recurso somente no lado do cliente, você precisa utilizar a variável `process.client`. + +Por exemplo, no seu arquivo `.vue`: + +```js +if (process.client) { + require('external_library') +} +``` + +### iOS e números de telefone + +Algumas versões móveis do Safari vão transformar números de telefone em links automaticamente. Isso acionará um aviso `NodeMismatch`, pois o conteúdo do SSR não corresponde com o conteúdo do site. Isso pode tornar seu app inutilizável nessas versões do Safari. + +Se você incluir números de telefone em sua página Nuxt, você tem duas opções + +## Use um meta tag para parar a transformação + +```html + +``` + +## Coloque links em volta do seu número de telefone + +```html + + + +``` diff --git a/content/pt-br/docs/2.concepts/4.static-site-generation.md b/content/pt-br/docs/2.concepts/4.static-site-generation.md new file mode 100644 index 0000000000..6938a81ba0 --- /dev/null +++ b/content/pt-br/docs/2.concepts/4.static-site-generation.md @@ -0,0 +1,43 @@ +--- +title: Geração de Site Estático +description: Com a geração de site estático você pode renderizar sua aplicação durante o build e fazer o deploy em qualquer serviço de hospedagem estática como Netlify, GitHub pages, Vercel, etc. Isso significa que não é necessário servidor para fazer o deploy de sua aplicação. +category: concepts +--- + +# Geração de Site Estático + +Com a geração de site estático você pode renderizar sua aplicação durante o build e fazer o deploy em qualquer serviço de hospedagem estática como Netlify, GitHub pages, Vercel, etc. Isso significa que não é necessário servidor para fazer o deploy de sua aplicação. + +--- + +### Gerando o seu site + +Ao fazer o deploy do seu site com [`target:static`](/docs/features/deployment-targets#static-hosting) todos as suas páginas `.vue` serão geradas em arquivos HTML e Javascript. Todas as chamadas a APIs serão feitas e colocadas em cache na pasta `static` dentro do seu conteúdo gerado, para que nenhuma chamada a API precise ser feita na navegação do lado do cliente. + +### Passo 1: Navegador para CDN + +Quando o navegador enviar a primeira requisição a CDN será chamada. + +### Passo 2: CDN para o Navegador + +A CDN irá enviar o os arquivos HTML, JavaScript e os estáticos de volta para o navegador. O conteúdo será exibido e a hidratação Vue.js entrará em ação, tornando-o reativo. Depois desse processo, a página será interativa. + +### Passo 3: Navegador para Navegador + +A Navegação entre as páginas com [``](/docs/features/nuxt-components#the-nuxtlink-component) é feita no lado do cliente então a CDN não será chamada novamente e todas as chamadas à APIs serão carregadas dos conteúdos em cache na pasta static mesmo se você atualizar a página. + +### Aplicação de Página Única (SPA) + +As páginas que foram excluídas da geração, utilizando a propriedade `generation.exclude`, gerarão uma aplicação de página única. Essas páginas não existirão na CDN e serão renderizadas no lado do cliente no navegador uma vez que o usuário navegue até elas. + +::alert{type="next"} +Saiba mais sobre a [propriedade `generate`](/docs/configuration-glossary/configuration-generate#exclude) +:: + +### Atualizando seu conteúdo + +Se você quiser obter novos conteúdos no seu site vindos de uma API, você precisará regenerar o seu site. Na maioria dos provedores de hospedagem, você pode fazer isso atualizando sua branch principal através dos comandos git ou através de um pull request. + +### Modo de Pré-visualização + +O modo de pré-visualização chamará nossa API ou seu CMS para que você possa ver as alterações ao vivo antes de fazer o deploy. Veja o [modo de pré-visualização](/docs/features/live-preview) e como habilitar esse recurso. diff --git a/content/pt-br/docs/2.concepts/5.nuxt-lifecycle.md b/content/pt-br/docs/2.concepts/5.nuxt-lifecycle.md new file mode 100644 index 0000000000..b684c53a9f --- /dev/null +++ b/content/pt-br/docs/2.concepts/5.nuxt-lifecycle.md @@ -0,0 +1,106 @@ +--- +title: O Ciclo de Vida do Nuxt +description: Não importa qual ferramenta você use, você sempre se sentirá mais confiante quando entender como a ferramenta funciona por baixo dos panos. O mesmo se aplica ao Nuxt. +category: concepts +img: /docs/nuxt-lifecycle.svg +imgAlt: understanding-nuxt-2-12-lifecycle-hooks +--- + +# O Clico de Vida do Nuxt + +Não importa qual ferramenta você use, você sempre se sentirá mais confiante quando entender como a ferramenta funciona por baixo dos panos. O mesmo se aplica ao Nuxt. + +--- + +![](/img/docs/nuxt-lifecycle.svg) + +O objetivo dessa capítulo é fornecer uma visão geral das diferentes partes do framework, a ordem de execução e como eles funcionam juntos. + +O Ciclo de Cida do Nuxt descreve o que acontece após a fase de compilação, onde seu aplicativo é empacotado, fragmentado e reduzido. O que acontece após essa fase depende se você tem a renderização do lado do servidor habilitada ou não. Se você tiver, depende ainda do tipo de renderização do lado do servidor que você escolheu: + +SSR Dinâmico (`nuxt start`) + +ou Geração de Site Estático (`nuxt generate`) + +## Ciclo de Vida + +### Servidor + +Para SSR, esses etapas serão executadas para cada requisição inicial ao seu aplicativo + +- O server inicia (`nuxt start`) + +Ao usar a geração de site estático, as etapas do servidor não são executadas apenas no momento da construção, mas uma vez para cada página que será gerada. + +- O processo de geração inicia (`nuxt generate`) +- Hooks do Nuxt +- serverMiddleware +- Módulos Nuxt do Lado do Servidor + - Na ordem conforme definido no `nuxt.config.js` +- nuxtServerInit + - Ações Vuex são chamadas apenas no lado do servir pré-carregar o store + - O primeiro argumento é o **contexto Vuex**, o segundo argumento é o **contexto Nuxt** + - Nós despachamos outras ações daqui → é apenas o "ponto de entrada" para outras ações no lado do servidor + - Só pode ser definido em `store/index.js` +- Middleware + - Middleware Global + - Middleware de Layout + - Middleware de Rotas +- asyncData +- beforeCreate (Método do ciclo de vida do Vue) +- created (Método do ciclo de vida do Vue) +- Uma nova busca (de cima para baixo, em paralelo se forem vizinhos) +- Serialização do estado (Hook `render:routeContext` do Nuxt) +- A renderização do HTML inicia (Hook `render:route` do Nuxt) +- Hook `render:routeDone` do Nuxt quando HTML foi enviado para o navegador +- Hook do Nuxt `generate:before` +- Arquivos HTML são gerados + - **Geração estática completa** + - por exemplo, payloads estáticos são extraídos + - `generate:page` (HTML editável) + - `generate:routeCreated` (Rota gerada) +- `generate:done` quando todos os arquivos HTML foram gerados + +### Cliente + +Essa parte do ciclo de vida é totalmente executada no navegador, não importando qual modo do Nuxt você escolheu. + +- Recebe o HTML +- Carrega os recursos (por exemplo, JavaScript) +- Hidratação do Vue +- Middleware + - Middleware Global + - Middleware do Layout + - Middleware de Rotas +- Módulos Nuxt do Lado do Cliente + - Na ordem conforme definido no `nuxt.config.js` +- asyncData (bloqueio) +- beforeCreate (Método do ciclo de vida do Vue) +- created (Método do ciclo de vida do Vue) +- A nova busca (de cima para baixo, em paralelo se forem vizinhos) (não bloqueio) +- beforeMount (Método do ciclo de vida do Vue) +- mounted (Método do clico de Vida do Vue) + +### Navegação usando o componente NuxtLink + +O mesmo que para a parte do _cliente_, tudo está acontecendo no navegador, mas somente quando se navega via ``. Além disso, nenhum conteúdo de página é exibido até que todas as tarefas de _bloqueio_ sejam cumpridas. + +::alert{type="info"} +Ver mais informações sobre [``](/docs/features/nuxt-components#the-nuxtlink-component) +:: + +- middleware (bloqueio) + - Middleware Global + - Middleware do Layout + - Middleware de Rotas +- asyncData (bloqueio) +- asyncData (bloqueio) [ou payload estático completa] +- beforeCreate & created (Método do Ciclo de Vida do Vue) +- fetch (não bloqueio) +- beforeMount & mounted + +### What's next + +::alert{type="next"} +Confira o [livro de características](/docs/features/rendering-modes) +:: diff --git a/content/pt-br/docs/2.concepts/index.md b/content/pt-br/docs/2.concepts/index.md new file mode 100644 index 0000000000..ccedf7ea43 --- /dev/null +++ b/content/pt-br/docs/2.concepts/index.md @@ -0,0 +1,6 @@ +--- +title: 'Conceitos' +navigation: + collapse: true + redirect: /docs/concepts/views +--- diff --git a/content/pt-br/docs/3.features/1.rendering-modes.md b/content/pt-br/docs/3.features/1.rendering-modes.md new file mode 100644 index 0000000000..81e78e9de6 --- /dev/null +++ b/content/pt-br/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/pt-br/docs/3.features/10.transitions.md b/content/pt-br/docs/3.features/10.transitions.md new file mode 100644 index 0000000000..6119cee687 --- /dev/null +++ b/content/pt-br/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/pt-br/docs/3.features/11.live-preview.md b/content/pt-br/docs/3.features/11.live-preview.md new file mode 100644 index 0000000000..17bdd57a7b --- /dev/null +++ b/content/pt-br/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/pt-br/docs/3.features/2.deployment-targets.md b/content/pt-br/docs/3.features/2.deployment-targets.md new file mode 100644 index 0000000000..1b95837ebe --- /dev/null +++ b/content/pt-br/docs/3.features/2.deployment-targets.md @@ -0,0 +1,50 @@ +--- +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 means running Nuxt on a Node.js server. When the user opens your page, their browser will request that page from the server. Nuxt will handle the request, render the page and send back the resulting page with all its content. + +You might need server hosting if you want to render HTML on each request rather than in advance at generate-time, or if you need [serverMiddleware](/docs/configuration-glossary/configuration-servermiddleware). + +::alert{type="info"} +You can still run Nuxt with server hosting with `ssr: false` but Nuxt will not fully render the HTML for each page - leaving that task to the browser. You might choose this option if you need serverMiddleware but do not want fully server-side rendered HTML. +:: + +For server hosting, `target: 'server'` is used, which is the default value. You will use the `build` command to build your application. + +```js{}[nuxt.config.js] +export default { + target: 'server' +} +``` diff --git a/content/pt-br/docs/3.features/3.file-system-routing.md b/content/pt-br/docs/3.features/3.file-system-routing.md new file mode 100644 index 0000000000..0d0bcbcaa3 --- /dev/null +++ b/content/pt-br/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/pt-br/docs/3.features/4.data-fetching.md b/content/pt-br/docs/3.features/4.data-fetching.md new file mode 100644 index 0000000000..a86a343680 --- /dev/null +++ b/content/pt-br/docs/3.features/4.data-fetching.md @@ -0,0 +1,276 @@ +--- +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/pt-br/docs/3.features/5.meta-tags-seo.md b/content/pt-br/docs/3.features/5.meta-tags-seo.md new file mode 100644 index 0000000000..93283fdf5d --- /dev/null +++ b/content/pt-br/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/pt-br/docs/3.features/6.configuration.md b/content/pt-br/docs/3.features/6.configuration.md new file mode 100644 index 0000000000..9ee3b8a1b7 --- /dev/null +++ b/content/pt-br/docs/3.features/6.configuration.md @@ -0,0 +1,450 @@ +--- +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  ` diff --git a/content/pt/docs/5.configuration-glossary/10.configuration-extend-plugins.md b/content/pt/docs/5.configuration-glossary/10.configuration-extend-plugins.md index 51f32841ca..3a7cb3c7b5 100644 --- a/content/pt/docs/5.configuration-glossary/10.configuration-extend-plugins.md +++ b/content/pt/docs/5.configuration-glossary/10.configuration-extend-plugins.md @@ -22,7 +22,7 @@ Example of changing plugins order: export default { extendPlugins(plugins) { const pluginIndex = plugins.findIndex( - ({ src }) => src === '~/plugins/shouldBeFirst.js' + plugin => (typeof plugin === 'string' ? plugin : plugin.src) === '~/plugins/shouldBeFirst.js' ) const shouldBeFirstPlugin = plugins[pluginIndex] diff --git a/content/pt/docs/5.configuration-glossary/2.configuration-build.md b/content/pt/docs/5.configuration-glossary/2.configuration-build.md index 30bcb08e84..775cc0e694 100644 --- a/content/pt/docs/5.configuration-glossary/2.configuration-build.md +++ b/content/pt/docs/5.configuration-glossary/2.configuration-build.md @@ -540,7 +540,7 @@ export default { ### postcss plugins & @nuxtjs/tailwindcss -If you want to apply a postcss plugin (e.g. postcss-pxtorem) on the @nuxtjs/tailwindcss configuration, you have to change order and load tailwindcss first. +If you want to apply a postcss plugin (e.g. postcss-pxtorem) on the [@nuxtjs/tailwindcss](https://github.com/nuxt-community/tailwindcss-module) configuration, you have to change order and load tailwindcss first. **This setup has no impact on nuxt-purgecss.** @@ -612,7 +612,7 @@ In Nuxt 2.15+, changing the value of this property at runtime will override the } ``` -If split codes for `layout`, `pages` and `commons` (common libs: vue|vue-loader|vue-router|vuex...). +Whether or not to create separate chunks for `layout`, `pages` and `commons` (common libs: vue|vue-loader|vue-router|vuex...). For more information, see [webpack docs](https://v4.webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks). ## ssr diff --git a/content/pt/examples/9.plugins/1.vue.md b/content/pt/examples/9.plugins/1.vue.md index ae7c75b62a..8ec7e007f1 100644 --- a/content/pt/examples/9.plugins/1.vue.md +++ b/content/pt/examples/9.plugins/1.vue.md @@ -12,13 +12,13 @@ In this example we show how to add a vue plugin to your application In this example: -`plugins/vue-toolitp.js` imports our tooltip and tells Vue to use.. +`plugins/vue-tooltip.js` imports our tooltip and tells Vue to use it. `pages/index.vue` uses our plugin. `nuxt.config.js` contains the `plugins` property to register our plugin and the `css` property to add our tooltip css. -`package.json` show our tooltip package has been installed. +`package.json` shows our tooltip package has been installed. ::alert{type="next"} Learn more in the Directory Structure book in the [plugins](/docs/directory-structure/plugins#vue-plugins) chapter. diff --git a/content/pt/index.md b/content/pt/index.md index 49b4933793..68cdb0f2a8 100644 --- a/content/pt/index.md +++ b/content/pt/index.md @@ -13,10 +13,10 @@ The Intuitive Vue
Framework Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful. #primary-button -:app-button[38K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } +:app-button[39K+ GitHub stars]{ href="https://github.com/nuxt/nuxt.js" icon="IconGitHub" extraClass="text-white bg-sky-black hover:bg-sky-darker leading-4" } #secondary-button -:app-button[Get started]{ to="/docs/get-started/installation" extraClass="text-black bg-primary-500 hover:bg-primary-400 focus:ring-primary-600 py-4" } +:app-button[Get started]{ to="/docs/get-started/installation" } :: ::home-learn-master diff --git a/content/pt/support/index.md b/content/pt/support/index.md index 1fa4be270d..e14e90871a 100644 --- a/content/pt/support/index.md +++ b/content/pt/support/index.md @@ -41,6 +41,7 @@ Get technical support, report bugs or contribute to the Nuxt framework developme #description If anything isn't working like it's supposed to, open an issue on Github. :: + ::support-card --- image: 'suggest' diff --git a/content/pt/teams/index.md b/content/pt/teams/index.md index 54570b5db3..46bfc43dbe 100644 --- a/content/pt/teams/index.md +++ b/content/pt/teams/index.md @@ -1,7 +1,7 @@ --- template: blank title: 'Teams' -description: 'The development of Nuxt is lead by an international team. Our committed team works every day to move Nuxt forward.' +description: 'The development of Nuxt is led by an international team. Our committed team works every day to move Nuxt forward.' layout: fluid: true navigation: false @@ -12,7 +12,7 @@ navigation: false Teams #description -The development of Nuxt and its ecosystem is lead by an international team. Our committed team works every day to bring Nuxt forward. +The development of Nuxt and its ecosystem is led by an international team. Our committed team works every day to bring Nuxt forward. :: ::team-section @@ -32,5 +32,5 @@ teamName: community [Community]{.text-primary} #description -From contributors to advocators, the community is made of member from different horizon and skills. We are happy to see new member everyday and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core). +From contributors to advocates, the community is made of members with different horizons and skills. We are happy to see new members every day and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core). :: diff --git a/content/pt/tutorials/1.creating-blog-with-nuxt-content.md b/content/pt/tutorials/1.creating-blog-with-nuxt-content.md index 3f57719bfb..61840e5e20 100644 --- a/content/pt/tutorials/1.creating-blog-with-nuxt-content.md +++ b/content/pt/tutorials/1.creating-blog-with-nuxt-content.md @@ -819,7 +819,7 @@ And of course we should link from our blog post to our new author page. ```html{}[components/Author.vue] - +

Author

{{ author.name }}

diff --git a/content/pt/video-courses/index.md b/content/pt/video-courses/index.md index e594c9ec50..c20d1c915c 100644 --- a/content/pt/video-courses/index.md +++ b/content/pt/video-courses/index.md @@ -14,7 +14,7 @@ video-courses: tier: Premium two: title: Get Started with Nuxt - description: Learn the essentials for how to build and deploy a Nuxt site including dnyamic routes, data fetching, SEO, lazy loading, global styles and transitions as well as how to generate and deploy your Nuxt app. + description: Learn the essentials for how to build and deploy a Nuxt site including dynamic routes, data fetching, SEO, lazy loading, global styles and transitions as well as how to generate and deploy your Nuxt app. image: /img/video-courses/jamstack_explorer.png link: 'https://explorers.netlify.com/learn/get-started-with-nuxt' tier: Free diff --git a/i18n/pt-BR.js b/i18n/pt-BR.js index 04766c30de..67bd8b9cb5 100644 --- a/i18n/pt-BR.js +++ b/i18n/pt-BR.js @@ -1,12 +1,12 @@ export default { banner: { here: 'v3.nuxtjs.org', - format: '{nuxt} beta saiu! Descubra mais sobre isso em {here}' + format: '{nuxt} beta está no ar! Descubra mais em {here}' }, cookies: { message: 'Nós usamos Cookies para análise do usuário e fazer melhorias na página!', - link: 'Aprenda sobre cookies', - button: 'Ok' + link: 'Entenda sobre os cookies', + button: 'Entendi' }, footer: { newsletter: { @@ -14,13 +14,13 @@ export default { description: 'As últimas novidades, artigos, e recursos, enviados para seu inbox mensalmente', form: { email: 'Email', - subscribing: 'Se inscrevendo...', + subscribing: 'Adicionando seu email...', subscribe: 'Se inscrever', already_registered: 'Você já é registrado', invalid_address: 'Endereço inválido', subscribed_messages: { - error: 'An error occurred while sending confirmation email', - pre: 'Um email para confirmar a sua inscriçào foi enviado para', + error: 'Ocorreu um erro ao enviar um e-mail de confirmação', + pre: 'Um e-mail para confirmar sua assinatura foi enviado', confirmation: 'Email confirmado' } } @@ -41,13 +41,13 @@ export default { ui: 'UI', data: 'Dados', modules: 'Módulos', - deployment: 'Implementação' + deployment: 'Deploy' }, - cli: 'Pelo CLI', - scratch: 'Pelo princípio' + cli: 'Pela CLI', + scratch: 'A partir do zero' }, modules: { - search: 'Pesquisar um módulo (nome, categoria, usuario, etc.)', + search: 'Pesquisar um módulo (nome, categoria, usuário, etc.)', sort_by: 'Ordenar por', loading: 'Carregando...', error: 'Um erro ocorreu enquanto carregava os módulos.' @@ -68,23 +68,23 @@ export default { mvp_detail: { services: 'Serviços', location: 'Localização', - contact_partner: 'Contact {partner}', - follow_partner: "Follow {partner}'s activities", - resources: 'Resources', - join_us: 'Join us', - they_will_get_back_to_you: 'They will get back to you asap.', + contact_partner: 'Entre em contato {partner}', + follow_partner: 'Seguir as atividades do {partner}', + resources: 'Recursos', + join_us: 'Trabalhe com a gente', + they_will_get_back_to_you: 'Eles voltarão para você o mais rápido possível.', find_them_on_the_web: 'Find them on the web.', - first_name: 'First name', - last_name: 'Last name', - company_name: 'Company name', + first_name: 'Nome', + last_name: 'Sobrenome', + company_name: 'Nome da companhia', email: 'Email', - message: 'Message', - submit: 'Submit' + message: 'Mensagem', + submit: 'Enviar' } }, support: { confirm_sending: 'Mensagem enviada para o suporte técnico', - error_sending: 'Erro durante envio', + error_sending: 'Erro ao enviar mensagem', invalid_adress: 'Endereço inválido' }, showcases: { @@ -101,7 +101,7 @@ export default { Entertainment: 'Entretenimento', Travel: 'Viagem', Finance: 'Financias', - Tech: 'Técnologia', + Tech: 'Tecnologia', Business: 'Negócios' } }, @@ -110,14 +110,14 @@ export default { released_on: 'Lançamento em {datetime}' }, partners: { - become_partner: 'torne-se um parceiro', - contact_success: 'Your request has been sent' + become_partner: 'Torne-se um parceiro', + contact_success: 'Sua solicitação foi enviada' }, translated_pages: { - title: 'Translated page', - content_outdated: 'Contents of this page might be outdated.', - read_original_page: 'Read the original page', - contribute: 'Improve translation of this page' + title: 'Página traduzida', + content_outdated: 'O conteúdo desta página pode estar desatualizado.', + read_original_page: 'Ler a página original', + contribute: 'Melhorar a tradução desta página' }, theme_mode: { system: 'Sistema', @@ -127,12 +127,12 @@ export default { common: { an_error_occurred: 'Um erro ocorreu', page_not_found: 'Não foi possível encontrar a página que você está procurando.', - please_define_title: 'Please define a title in the front matter', + please_define_title: 'Por favor, defina um título na matéria de frente', please_define_description: 'Por favor, defina uma descrição no assunto', search: 'Procurar ("/" para focar)', settings: 'Configurações', version: 'Versão', - currently_version: 'Atualmente em private beta', + currently_version: 'Atualmente em beta fechado', back: 'Voltar', go_to: 'Ir para {title}', go_home: 'Ir para página inicial', @@ -149,5 +149,5 @@ export default { star: 'Estrela', stars: 'Estrelas' }, - iso: 'pt' + iso: 'pt-br' } diff --git a/static/img/banners/mastering-nuxt/bg-desktop.png b/static/img/banners/mastering-nuxt/bg-desktop.png deleted file mode 100644 index 66c7dcc442..0000000000 Binary files a/static/img/banners/mastering-nuxt/bg-desktop.png and /dev/null differ diff --git a/static/img/banners/mastering-nuxt/bg-tablet.png b/static/img/banners/mastering-nuxt/bg-tablet.png deleted file mode 100644 index 10227ebd30..0000000000 Binary files a/static/img/banners/mastering-nuxt/bg-tablet.png and /dev/null differ diff --git a/static/img/banners/mastering-nuxt/logo.png b/static/img/banners/mastering-nuxt/logo.png deleted file mode 100644 index d96efe38d4..0000000000 Binary files a/static/img/banners/mastering-nuxt/logo.png and /dev/null differ diff --git a/windi.config.js b/windi.config.js index cfb647081a..eec1b7df38 100644 --- a/windi.config.js +++ b/windi.config.js @@ -99,8 +99,7 @@ export default { darker: '#3B3B00', darkest: '#2D2E01', black: '#1F2100' - }, - 'azure-radiance': '#0086f6' + } // 'green-lighter': '#80EEC0', // 'green-light': '#40E5A1',