Getting Started with Nuxt.js
Tags: javascript, webdev, vue, programming
Published: 2021-01-19 21:32:36

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Nuxt.js is an app framework that’s based on Vue.js.

We can use it to create server-side rendered apps and static sites.

In this article, we’ll look at how to get started with Nuxt.js.

### Installation

We can create our Nuxt app with the `create-nuxt-app` program.

To do that, we run:

```
npx create-nuxt-app <project-name>
```

or:

```
yarn create nuxt-app <project-name>
```

Then we run:

```
npm run dev
```

to run our app.

### Directory Structure

The directory structure for a Nuxt app follows some conventions.

The `assets` folder as static assets like styles, images, and fonts.

The `layouts` folder has the layout components for laying out contents on pages.

The `middlewares` folder has application middleware.

Middleware lets us define custom functions that can be run before rendering.

The `pages` folder has the views and routes.

It should only contain `.vue` files.

The folder can’t be renamed without changing our app’s configuration.

The `plugins` folder has the JavaScript plugins that we want to run before instantiating the root Vue instance.

The `static` folder serves static files directly to the public.

`nuxt.config.js` has the Nuxt.js custom configuration.

### Routing

Nuxt does routing automatically by following the structure of the `pages` folder.

For instance, we can create the `pages/hello.vue` file:

```
<template>
  <div class="container">hello world</div>
</template>

<script>
export default {};
</script>
```

Then when we go to [http://localhost:3000/hello](http://localhost:3000/hello), we see ‘hello world’ displayed.

If we want to accept URL parameters in our pages, we add a `_` before the name of our file.

For example, we create a `pages/users/_id.vue` file and write:

```
<template>
  <div class="container">{{$route.params.id}}</div>
</template>

<script>
export default {};
</script>
```

We get the URL parameters from the `$route.params` object.

We can validate route params with the `validate` method.

To add it, we write:

```
<template>
  <div class="container">{{$route.params.id}}</div>
</template>

<script>
export default {
  validate({ params }) {
    return /^d+$/.test(params.id);
  },
};
</script>
```

We added the `validate` method with an object with the `params` property as the property.

Then we can return the condition for validation.

Also, we can add a `_.vue` file to handle URLs that don’t match any other URLs.

### Named Views

We can use `<nuxt name="top"/>` or `<nuxt-child name="top"/>` in our layout or page to add the named views.

### Views

The view defines the parts of our pages.

The default template for a Nuxt page is:

```
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>
```

### Default Layout

We can change the default layout by editing the `layouts/default.vue` file.

By default, it has:

```
<template>
  <div>
    <Nuxt />
  </div>
</template>
```

to render the page.

### Custom Layout

Also, we can add custom layouts.

For example, we can create a `layouts/blog.vue` file and write:

```
<template>
  <div>
    <div>My blog</div>
    <Nuxt />
  </div>
</template>
```

to display a heading and the `Nuxt` component for displaying the page content.

Then to use the layout, we can create a file in the `pages` folder called `pages/post.vue` and add:

```
<template>
  <div>hello world</div>
</template>

<script>
export default {
  layout: "blog",
};
</script>
```

We set the `layout` property so that we can select the layout we want to use.

Now we should see the ‘My blog’ heading above ‘hello world’.

### Conclusion

We can use Nuxt.js to create simple server-side rendered apps.

It’s based on Vue.js.