Skip to content

Commit

Permalink
🐛 (docs) update docs links (avoid errors while building..)
Browse files Browse the repository at this point in the history
  • Loading branch information
Tahul committed Jul 7, 2021
1 parent a4580b5 commit 05ae645
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ _Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV
<a href="https://github.com/bdrtsky/nuxt-dev-to-clone" target="_blank" rel="noopener nofollow">Source</a>
</p>

This article is intended to demonstrate use cases and awesomeness of new Nuxt `fetch` functionality [introduced in release v2.12](/docs/2.x/components-glossary/pages-fetch#nuxt-gt-2-12), and show you how to apply its power in your own projects. For in-depth technical analysis and details of the new `fetch` you can check [Krutie Patel’s article](/blog/understanding-how-fetch-works-in-nuxt-2-12).
This article is intended to demonstrate use cases and awesomeness of new Nuxt `fetch` functionality [introduced in release v2.12](https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#nuxt-gt-2-12), and show you how to apply its power in your own projects. For in-depth technical analysis and details of the new `fetch` you can check [Krutie Patel’s article](/blog/understanding-how-fetch-works-in-nuxt-2-12).

Here’s the high-level outline of how we will build our dev.to clone using `fetch` hook. We will:

Expand Down Expand Up @@ -72,7 +72,7 @@ To keep it simple, for communication with the DEV API we will use native JavaScr

If you are an experienced developer you can skip this part and [get straight to the point](#developing-the-application).

Make sure you have Node and npm installed. We will use `create-nuxt-app` to [initialize](/docs/2.x/get-started/installation#using-code-create-nuxt-app-code-) the project, so just type the following command in terminal:
Make sure you have Node and npm installed. We will use `create-nuxt-app` to [initialize](https://nuxtjs.org/docs/2.x/get-started/installation#using-code-create-nuxt-app-code-) the project, so just type the following command in terminal:

```
npx create-nuxt-app nuxt-dev-to-clone
Expand All @@ -85,7 +85,7 @@ Let’s install necessary packages and discuss how we will build our app next.

### CSS Styles

For styling we will use the most common CSS pre-processor Sass/SCSS and leverage Vue.js [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html) feature, to keep our components styles encapsulated. To [use Sass/SCSS with Nuxt](/docs/2.x/features/configuration#pre-processors) run:
For styling we will use the most common CSS pre-processor Sass/SCSS and leverage Vue.js [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html) feature, to keep our components styles encapsulated. To [use Sass/SCSS with Nuxt](https://nuxtjs.org/docs/2.x/features/configuration#pre-processors) run:

<code-group>
<code-block label="Yarn" active>
Expand Down Expand Up @@ -129,7 +129,7 @@ Now tell Nuxt to use it by adding this code to `nuxt.config.js`
buildModules: ['@nuxtjs/style-resources']
```

Read more about this module [here](https://github.com/nuxt-community/style-resources-module#scss-example), regarding `buildModules`, you can learn more on it in the [modules vs buildModules](/docs/2.x/configuration-glossary/configuration-modules#-code-buildmodules-code-) section of the documentation.
Read more about this module [here](https://github.com/nuxt-community/style-resources-module#scss-example), regarding `buildModules`, you can learn more on it in the [modules vs buildModules](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-modules#-code-buildmodules-code-) section of the documentation.

Let’s define our design tokens as SCSS variables, put them in `~/assets/styles/tokens.scss` and tell `@nuxtjs/style-resources` to load them by adding to `nuxt.config.js`

Expand Down Expand Up @@ -181,7 +181,7 @@ To keep the frontend app fast and simple we will use only two dependencies, both
- [vue-observe-visibility](https://github.com/Akryum/vue-observe-visibility) by [Guillaume Chau](https://twitter.com/Akryum), for effective detecting elements in viewport with IntersectionObserver and trigger lazy loading. Only 1.6kB gzipped
- [vue-content-placeholders](https://github.com/michalsnik/vue-content-placeholders) by [Michał Sajnóg](https://twitter.com/michalsnik), for showing nicely animated placeholders for UI elements while content is fetching. Only 650B gzipped.

Let’s add them as Nuxt [plugins](/docs/2.x/configuration-glossary/configuration-plugins), by creating two files.
Let’s add them as Nuxt [plugins](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-plugins), by creating two files.

```js{}[vue-observe-visibility.client.js]
import Vue from 'vue'
Expand All @@ -208,11 +208,11 @@ plugins: [

## Developing the Application

Now we finally can start developing our DEV clone powered by Nuxt and [new fetch](/docs/2.x/components-glossary/pages-fetch).
Now we finally can start developing our DEV clone powered by Nuxt and [new fetch](https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch).

### URL structure

Let’s imitate the DEV URL structure for our simple app. Our [pages](/docs/2.x/concepts/views#pages) folder should look like this:
Let’s imitate the DEV URL structure for our simple app. Our [pages](https://nuxtjs.org/docs/2.x/concepts/views#pages) folder should look like this:

```
├── index.vue
Expand All @@ -224,12 +224,12 @@ Let’s imitate the DEV URL structure for our simple app. Our [pages](/docs/2.x/
└── index.vue
```

We will have 2 [static pages](/docs/2.x/get-started/routing#automatic-routes):
We will have 2 [static pages](https://nuxtjs.org/docs/2.x/get-started/routing#automatic-routes):

- `index.vue`: latest articles about Nuxt.js will be listed
- `top.vue`: most popular articles for last year period.

For the rest of the app URL’s we will use convenient Nuxt file based [dynamic routes](/docs/2.x/directory-structure/pages#dynamic-pages) feature to scaffold necessary pages by creating such file structure:
For the rest of the app URL’s we will use convenient Nuxt file based [dynamic routes](https://nuxtjs.org/docs/2.x/directory-structure/pages#dynamic-pages) feature to scaffold necessary pages by creating such file structure:

- `_username/index.vue` - user profile page with list of his published articles
- `_username/_article.vue` - this is where article, author profile and comments will be rendered
Expand Down
6 changes: 3 additions & 3 deletions docs/content/5.templates/blog/creating-a-nuxt-module.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ mkdir modules modules/ngrok
touch modules/ngrok/index.js
```

In order to use our module we will need to register it by adding it in the [buildModules](/docs/2.x/directory-structure/modules/#buildmodules) section of our `nuxt.config.js` file. BuildModules are only imported during development and build time which is perfect for our module as we only need it to work in dev mode.
In order to use our module we will need to register it by adding it in the [buildModules](https://nuxtjs.org/docs/2.x/directory-structure/modules/#buildmodules) section of our `nuxt.config.js` file. BuildModules are only imported during development and build time which is perfect for our module as we only need it to work in dev mode.

```js{}[nuxt.config.js]
export default {
Expand Down Expand Up @@ -147,7 +147,7 @@ export default function () {

## Start the ngrok tunnel when the Nuxt server is listening

We want to start the ngrok tunnel when the nuxt sever is listening. To do that we need a way to hook into Nuxt and listen for a port so we can connect. That's where Nuxt hooks come in. [Nuxt hooks](/docs/2.x/internals-glossary/internals-nuxt) are listeners to Nuxt events. We will use the `nuxt.hook()` passing in the value of `listen` followed by an async function. In this function we need to pass in the server, followed by the port.
We want to start the ngrok tunnel when the nuxt sever is listening. To do that we need a way to hook into Nuxt and listen for a port so we can connect. That's where Nuxt hooks come in. [Nuxt hooks](https://nuxtjs.org/docs/2.x/internals-glossary/internals-nuxt) are listeners to Nuxt events. We will use the `nuxt.hook()` passing in the value of `listen` followed by an async function. In this function we need to pass in the server, followed by the port.

```js{}[modules/ngrok/index.js]
import ngrok from 'ngrok'
Expand Down Expand Up @@ -292,7 +292,7 @@ Let's run the dev server and now you should see your URL from ngrok printed out

In general we probably won't want to print the URL onto the page. It would be much better if we could add it to the Nuxt CLI so we can see it every time we run the dev command and be able to click and open it from there. We can then share that link with whoever we want without having to expose it in our .vue file or in our console.

We can access the CLI through the `nuxt.options`. You can see this by logging the `nuxt.options`to the console and searching for cli. If you do you will see that we have a [`badgeMessages`](/docs/2.x/configuration-glossary/configuration-cli#badgemessages) property. This is the green box that shows us the messages of Environment, Rendering and Target as well as what port the app is listening on.
We can access the CLI through the `nuxt.options`. You can see this by logging the `nuxt.options`to the console and searching for cli. If you do you will see that we have a [`badgeMessages`](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-cli#badgemessages) property. This is the green box that shows us the messages of Environment, Rendering and Target as well as what port the app is listening on.

We can use the `push()` method to push our URL to the Nuxt CLI.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,13 +128,13 @@ In markdown we create a `<h1>` title by using `#`. Make sure you leave a space b

### Displaying your content

To display our content in our page, we can use a [dynamic page](/docs/2.x/directory-structure/pages#dynamic-pages) by prefixing the page with an underscore(`_`). By creating a page component named `_slug.vue` inside our blog folder, we are able to use the `params.slug` variable provided by vue router to get the name of each article.
To display our content in our page, we can use a [dynamic page](https://nuxtjs.org/docs/2.x/directory-structure/pages#dynamic-pages) by prefixing the page with an underscore(`_`). By creating a page component named `_slug.vue` inside our blog folder, we are able to use the `params.slug` variable provided by vue router to get the name of each article.

```bash
touch pages/blog/_slug.vue
```

Then we can use `asyncData` in our page component to fetch our article content before the page has been rendered. We can have access to our content through the context by using the variable `$content`. As we want to fetch a dynamic page we also need to know which article to fetch with `params.slug` which is available to us through [the context](/docs/2.x/internals-glossary/context).
Then we can use `asyncData` in our page component to fetch our article content before the page has been rendered. We can have access to our content through the context by using the variable `$content`. As we want to fetch a dynamic page we also need to know which article to fetch with `params.slug` which is available to us through [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context).

```html{}[pages/blog/_slug.vue]
<script>
Expand Down

0 comments on commit 05ae645

Please sign in to comment.