+
+
+```
+
+In addition, we can pass `:keep-alive-props` to `
+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/tw/deployments/bip.md b/content/tw/deployments/bip.md
new file mode 100644
index 0000000000..2739aef3d4
--- /dev/null
+++ b/content/tw/deployments/bip.md
@@ -0,0 +1,60 @@
+---
+template: guide
+title: Bip
+description: 如何使用 Bip 部屬 Nuxt 應用程式？
+target: Static
+category: deployment
+logo:
+ light: "/img/companies/square/light/bip.png"
+ dark: "/img/companies/square/dark/bip.png"
+---
+# Deploy Nuxt with Bip
+
+如何使用 Bip 部屬 Nuxt 應用程式？
+
+---
+
+[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
+
+- 您已安裝 [Yarn](https://yarnpkg.com/getting-started/install)。
+- 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 More information at [this article](https://dev.to/tillsanders/deploy-nuxt-js-on-digitalocean-app-platform-in-5-minutes-or-less-2dij). + :: + +  + +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/tw/deployments/dokku.md b/content/tw/deployments/dokku.md new file mode 100644 index 0000000000..92e3a06b63 --- /dev/null +++ b/content/tw/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` + + + +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/tw/deployments/fume.md b/content/tw/deployments/fume.md new file mode 100644 index 0000000000..d577122b4d --- /dev/null +++ b/content/tw/deployments/fume.md @@ -0,0 +1,44 @@ +--- +template: guide +title: Fume +description: How to deploy Nuxt on Fume? +target: Static & Server +category: deployment +logo: + light: "/img/companies/square/light/Fume.svg" + dark: "/img/companies/square/dark/Fume.svg" +--- +# Deploy Nuxt on Fume + +How to deploy Nuxt on Fume? + +--- + +[Fume](https://fume.app/) is an operations control platform powered by AWS. + +Fume includes the following features: + +- Serverless structures supporting both Server and Static with Lambda and CloudFront. +- [Automated](https://github.com/marketplace/actions/fume-deployment) deployments with rollbacks with the click of a button +- Metrics and cost prediction for each environment +- Domain control - import hosts, issues certificates, and map records to environments +- Integrated notifications to Slack, Discord, and other collaboration platforms + +## Setup + +Get a production-ready URL in 2 minutes with these steps: + +- Head to [Fume](https://fume.app), connect and plug in your AWS account +- Create a Team, and a Nuxt project +- Run the following command inside your projects root folder + +::code-group +```bash [Yarn] +yarn global add fume-cli +fume deploy +``` +```bash [NPM] +npm install -g fume-cli +fume deploy +``` +:: diff --git a/content/tw/deployments/github-pages.md b/content/tw/deployments/github-pages.md new file mode 100644 index 0000000000..6a9df30162 --- /dev/null +++ b/content/tw/deployments/github-pages.md @@ -0,0 +1,293 @@ +--- +template: guide +title: GitHub Pages +description: How to deploy Nuxt app on GitHub Pages? +target: Static +category: deployment +logo: + light: "/img/companies/square/light/Github_Pages.svg" + dark: "/img/companies/square/dark/Github_Pages.svg" +--- +# Deploy Nuxt on GitHub Pages + +How to deploy Nuxt app on GitHub Pages? + +--- + +Nuxt gives you the possibility to host your web application on any static hosting like [GitHub Pages](https://pages.github.com/) for example. + +To deploy on GitHub Pages, you need to generate your static web application: + +::code-group +```bash [Yarn] +yarn generate +``` +```bash [NPM] +npm run generate +``` +:: + +It will create a `dist` folder with everything inside ready to be deployed on GitHub Pages hosting. Branch `gh-pages` for project repository OR branch `master` for user or organization site + +::alert{type="info"} +Info: If you use a custom domain for your GitHub Pages and put `CNAME` file, it is recommended that CNAME file is put in the `static` directory. [More documentation](/docs/directory-structure/static) about it. +:: + +## Deploying to GitHub Pages for repository + +First of all, you want to make sure to use [static target](/docs/features/deployment-targets) since we are hosting on GitHub pages: + +```js[nuxt.config.js] +export default { + target: 'static' +} +``` + +If you are creating GitHub Pages for one specific repository, and you don't have any custom domain, the URL of the page will be in this format: `http://
+
+ 
+
+
Hello world!
+ +``` + +### Start the project + +Run your project by typing one of the following commands below in your terminal: + +::code-group +```bash [Yarn] +yarn dev +``` +```bash [NPM] +npm run dev +``` +:: + +::alert{type="info"} + +We use the dev command when running our application in development mode. + +:: + +The application is now running on **[http://localhost:3000](http://localhost:3000/)**. + +Open it in your browser by clicking the link in your terminal and you should see the text "Hello World" we copied in the previous step. + +::alert{type="info"} + +When launching Nuxt in development mode, it will listen for file changes in most directories, so there is no need to restart the application when e.g. adding new pages + +:: + +::alert{type="warning"} + +When you run the dev command it will create a .nuxt folder. This folder should be ignored from version control. You can ignore files by creating a .gitignore file at the root level and adding .nuxt. + +:: + +### Bonus step + +Create a page named `fun.vue` in the `pages` directory. + +Add a `` and include a heading with a funny sentence inside. + +Then, go to your browser and see your new page on **[localhost:3000/fun](http://localhost:3000/fun)**. + +::alert{type="info"} + +Creating a directory named `more-fun` and putting an `index.vue` file inside it will give the same result as creating a `more-fun.vue` file. + +:: diff --git a/content/tw/docs/1.get-started/2.routing.md b/content/tw/docs/1.get-started/2.routing.md new file mode 100644 index 0000000000..1bacad2b0a --- /dev/null +++ b/content/tw/docs/1.get-started/2.routing.md @@ -0,0 +1,52 @@ +--- +title: Routing +description: Most websites have more than just one page. For example a home page, about page, contact page etc. In order to show these pages we need a Router. +category: get-started +csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/01_get_started/02_routing?fontsize=14&hidenavigation=1&theme=dark +video: cKutrcn-hdE +--- +# Routing + +Most websites have more than just one page. For example a home page, about page, contact page etc. In order to show these pages we need a Router. + +--- + +## Automatic Routes + +Most websites will have more than one page (i.e. a home page, about page, contact page etc.). In order to show these pages, we need a Router. That's where `vue-router` comes in. When working with the Vue application, you have to set up a configuration file (i.e. `router.js`) and add all your routes manually to it. Nuxt automatically generates the `vue-router` configuration for you, based on your provided Vue files inside the `pages` directory. That means you never have to write a router config again! Nuxt also gives you automatic code-splitting for all your routes. + +In other words, all you have to do to have routing in your application is to create `.vue` files in the `pages` folder. + +::alert{type="next"} +Learn more about [Routing](/docs/features/file-system-routing) +:: + +## Navigation + +To navigate between pages of your app, you should use the [NuxtLink](/docs/features/nuxt-components#the-nuxtlink-component) component. This component is included with Nuxt and therefore you don't have to import it as you do with other components. It is similar to the HTML `` tag, except that instead of using a `href="/about"` we use `to="/about"`. If you have used `vue-router` before, you can think of the `Hello World
+ + + + + +``` + +## Properties of a page component + +There are many properties of the page component such as the head property in the example above. + +::alert{type="next"} +See the [Directory Structure book](/docs/directory-structure/pages) to learn more about all the properties you can use on your page +:: + +## Layouts + +Layouts are a great help when you want to change the look and feel of your Nuxt app. For example you want to include a sidebar or have distinct layouts for mobile and desktop. + +### Default Layout + +You can define a default layout by adding a `default.vue` file inside the layouts directory. This will be used for all pages that don't have a layout specified. The only thing you need to include in the layout is the `
+
+
+```
+
+::alert{type="warning"}
+Make sure to add the `My blog navigation bar here
+
+ Home page
+
+
+
+
+```
+
+## Document: App.html
+
+The app template is used to create the actual HTML frame of your document for your Nuxt application which injects the content as well as variables for the head and body. This file is created automatically for you and in general rarely needs to be modified. You can customize the HTML app template used by Nuxt to include scripts or conditional CSS classes by creating an `app.html` file in the source directory of your project which by default is the root directory.
+
+The default template used by Nuxt is:
+
+```html{}[app.html]
+
+
+
+ {{ HEAD }}
+
+
+ {{ APP }}
+
+
+```
+
+One use case of using a custom app template is to add conditional CSS classes for IE:
+
+```html{}[app.html]
+
+
+
+
+ {{ HEAD }}
+
+
+ {{ APP }}
+
+
+```
+
+::alert{type="info"}
+While you can add JavaScript and CSS files in the `app.html`, it is recommended to use the `nuxt.config.js` for these tasks instead!
+::
diff --git a/content/tw/docs/2.concepts/2.context-helpers.md b/content/tw/docs/2.concepts/2.context-helpers.md
new file mode 100644
index 0000000000..8ae4766c1e
--- /dev/null
+++ b/content/tw/docs/2.concepts/2.context-helpers.md
@@ -0,0 +1,218 @@
+---
+title: Context and Helpers
+description: The context provides additional and often optional information about the current request to the application.
+category: concepts
+csb_link_context: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/02_context_helpers-context?fontsize=14&hidenavigation=1&theme=dark
+csb_link_helpers: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/02_context_helpers-helpers?fontsize=14&hidenavigation=1&theme=dark
+---
+# Context and helpers
+
+The context provides *additional* and often optional information about the current request to the application.
+
+---
+
+
+
+The `context` object is available in specific Nuxt functions like [asyncData](/docs/features/data-fetching#async-data), [plugins](/docs/directory-structure/plugins), [middleware](/docs/directory-structure/middleware) and [nuxtServerInit](/docs/directory-structure/store#the-nuxtserverinit-action). It provides _additional_ and often optional information about the current request to the application.
+
+First and foremost, the context is used to provide access to other parts of the Nuxt application, e.g. the Vuex store or the underlying `connect` instance. Thus, we have the `req` and `res` objects in the context available on the server side and `store` always available. But with time, the context was extended with many other helpful variables and shortcuts. Now we have access to HMR (Hot Module Reload / Replacement) functionalities in `development` mode, the current `route`, page `params` and `query`, as well as the option to access environment variables through the context. Furthermore, module functions and helpers can be exposed through the context to be available on both - the client and the server side.
+
+**All context keys that are present by default**
+
+```js
+function (context) { // Could be asyncData, nuxtServerInit, ...
+ // Always available
+ const {
+ app,
+ store,
+ route,
+ params,
+ query,
+ env,
+ isDev,
+ isHMR,
+ redirect,
+ error,
+ $config
+ } = context
+
+ // Only available on the Server-side
+ if (process.server) {
+ const { req, res, beforeNuxtRender } = context
+ }
+
+ // Only available on the Client-side
+ if (process.client) {
+ const { from, nuxtState } = context
+ }
+}
+```
+
+::alert{type="warning"}
+The _context_ we refer to here is not to be confused with the `context` object available in [Vuex Actions](https://vuex.vuejs.org/guide/actions.html) or the one available in the `build.extend` function in your `nuxt.config.js`. These are not related to each other!
+::
+
+Learn more about the different context keys in our [Internals Glossary](/docs/internals-glossary/context)
+
+### Using page parameters for your API query
+
+The context directly exposes possible dynamic parameters of the route via `context.params`. In the following example, we call an API via the `nuxt/http` module using a dynamic page parameter as part of the URL. Modules, like the [nuxt/http](https://http.nuxtjs.org/) module, can expose own functions which are then available through the [context.app](/docs/internals-glossary/context#app) object.
+
+Also, we wrap the API call in a `try/catch` statement to handle potential errors. With the `context.error` function, we can directly show Nuxt's error page and pass in the occurred error.
+
+```js{}[pages/posts/_id.vue]
+export default {
+ async asyncData(context) {
+ const id = context.params.id
+ try {
+ // Using the nuxtjs/http module here exposed via context.app
+ const post = await context.app.$http.$get(
+ `https://api.nuxtjs.dev/posts/${id}`
+ )
+ return { post }
+ } catch (e) {
+ context.error(e) // Show the nuxt error page with the thrown error
+ }
+ }
+}
+```
+
+With [ES6](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/) you can use this syntax to destructure your context object. You can pass in the objects you want to have access to and then you can use them in the code without using the word context.
+
+```js{}[pages/posts/_id.vue]
+export default {
+ async asyncData({ params, $http, error }) {
+ const id = params.id
+
+ try {
+ // Using the nuxtjs/http module here exposed via context.app
+ const post = await $http.$get(`https://api.nuxtjs.dev/posts/${id}`)
+ return { post }
+ } catch (e) {
+ error(e) // Show the nuxt error page with the thrown error
+ }
+ }
+}
+```
+
+Want to use query parameters instead? You then use [context.query.id](/docs/internals-glossary/context#query).
+
+### Redirecting users & accessing the store
+
+Accessing the [Vuex store](/docs/directory-structure/store) (when you have it set up through the `store` directory) is also possible through the context. It provides a `store` object which can be treated as `this.$store` in Vue components. In addition, we use the `redirect` method, an exposed helper through the context, to redirect the user in case the `authenticated` state is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+
+```js
+export default {
+ middleware({ store, redirect }) {
+ // retrieving keys via object destructuring
+ const isAuthenticated = store.state.authenticated
+ if (!isAuthenticated) {
+ return redirect('/login')
+ }
+ }
+}
+```
+
+::alert{type="next"}
+Check out the Internals Glossary book for more examples of the [redirect method](/docs/internals-glossary/context#redirect)
+::
+
+## Helpers
+
+Besides the shortcuts in the context, there are also other tiny helpers present in your Nuxt application.
+
+## `$nuxt`: The Nuxt helper
+
+`$nuxt` is a helper designed to improve the user experience and to be an escape hatch in some situations. It is accessible via `this.$nuxt` in Vue components and via `window.$nuxt` otherwise on the client side.
+
+### Connection checker
+
+The `$nuxt` helper provides a quick way to find out whether the internet connection of a user is present or not: It exposes the boolean values `isOffline` and `isOnline`. We can use these to show a message as soon as the user is offline (for example).
+
+```html{}[layouts/default.vue]
+
+ Page not found
+An error occurred
+
+
+
+```
+
+### Accessing the root instance
+
+Besides providing DX/UX (Developer Experience / User Experience) features, the `$nuxt` helper also provides a shortcut to the root instance of your application from every other component. But that's not everything — you can also access the `$nuxt` helper through `window.$nuxt` which can be used as an escape hatch to gain access to module methods like `$axios` from outside your Vue components. This should be used wisely and **only as last resort**.
+
+### Refreshing page data
+
+When you want to refresh the current page for the user, you don't want to fully reload the page because you might hit the server again and at least re-initialize the whole Nuxt application. Instead, you often only want to refresh the data, provided by `asyncData` or `fetch`.
+
+You can do so, by using `this.$nuxt.refresh()`!
+
+```html
+
+ You are offline
+
+
+
+
+
+```
+
+#### Controlling the loading bar
+
+With `$nuxt`, you can also control Nuxt's loading bar programmatically via `this.$nuxt.$loading`.
+
+```js
+export default {
+ mounted() {
+ this.$nextTick(() => {
+ this.$nuxt.$loading.start()
+ setTimeout(() => this.$nuxt.$loading.finish(), 500)
+ })
+ }
+}
+```
+
+Read more in the corresponding [loading feature chapter](/docs/features/loading)
+
+## onNuxtReady helper
+
+If you want to run some scripts _after_ your Nuxt application has been loaded and is ready, you can use the `window.onNuxtReady` function. This can be useful when you want to execute a function on the client-side without increasing the time to interactive of your site.
+
+```js
+window.onNuxtReady(() => {
+ console.log('Nuxt is ready and mounted')
+})
+```
+
+## Process helpers
+
+Nuxt injects three boolean values (`client`, `server`, and `static`) into the global `process` object which will help you to determine whether your app was rendered on the server or fully on the client, as well as checking for static site generation. These helpers are available across your application and are commonly used in `asyncData` userland code.
+
+```html{}[pages/about.vue]
+
+ {{ content }}
+
+ I am rendered on the {{ renderedOn }} side
+ + + +``` + +In the example, `renderedOn` will evaluate to `'server'` when using server-side rendering and a user accesses the page directly. When the user would navigate to the page from another part of the application, e.g. by click on a `
+
+
+
+
+```
+
+::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 `Fetching mountains...
+An error occurred :(
+
+
+ Nuxt Mountains
+-
+
- {{ mountain.title }} +
+
+
+
+```
+
+### 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]
+
+ Loading....
+Error while fetching mountains
+-
+
- + {{ mountain.title }} + +
+
+
+
+
+```
+
+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/tw/docs/3.features/5.meta-tags-seo.md b/content/tw/docs/3.features/5.meta-tags-seo.md
new file mode 100644
index 0000000000..93283fdf5d
--- /dev/null
+++ b/content/tw/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]
+
+ {{ post.title }}
+{{ post.description }}
+