Nuxt.js — Error Handling and Plugins
Tags: vue, programming, webdev, javascript
Published: 2021-01-19 21:33:08

**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 handle async data errors and plugins with Nuxt.js.

### Handling Errors

We can handle errors in our pages when we get async data.

To do that, we write:

```
<template>
  <div>{{ title }}</div>
</template>

<script>
import axios from "axios";

export default {
  async asyncData({ params, error }) {
    try {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${params.id}`
      );
      return { title: data.title };
    } catch {
      error({ statusCode: 404, message: "Post not found" });
    }
  },
};
</script>
```

We have an `asyncData` method with an object that has the `error` property.

`error` is a function that we can to render the error.

### Assets

Nuxt uses vue-loader, file-loader, and url-loader Webpack loaders for asset serving.

Also, we can use the `static` folder for static assets.

To add assets, we can write:

```
<template>
  <div class="container">
    <img src="~/assets/kitten.jpg" />
  </div>
</template>

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

The `~` is a shorthand for the Nuxt root folder.

### Static

We can also serve assets from the `static` folder.

For example, we can move our file to the `static` folder and write:

```
<template>
  <div class="container">
    <img src="/kitten.jpg" />
  </div>
</template>

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

The `/` is the `static` folder’s shorthand.

### Plugins

We can add plugins into our app.

They may come as external packages like Axios.

Or we can use Vue plugins.

To use Vue plugins, we have to add them manually.

For example, if we want to add a tooltip to our app, we install the `v-tooltip` package by running:

```
npm install --save v-tooltip
```

Then we create the `plugins/vue-tooltip.js` and add:

```
import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)
```

Then in `nuxt.config.js` , we add:

```
plugins: [
  '@/plugins/vue-tooltip.js'
],
```

Then we can use it as usual by writing:

```
<template>
  <div class="container">
    <button v-tooltip="'hello world'">hello</button>
  </div>
</template>

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

### Inject in $root & context

We can also make functions available across all of our app.

To do that, we can call the `inject` function.

We can create our own plugin by adding `plugins/hello.js` :

```
export default (context, inject) => {
  const hello = msg => console.log(`hello ${msg}!`)
  inject('hello', hello)
}
```

Then we can add our plugin in `nuxt.config.js` :

```
plugins: [
  '@/plugins/hello.js'
],
```

Then we can call our `hello` function by writing:

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

<script>
export default {
  mounted() {
    this.$hello("james");
  },
};
</script>
```

We also need:

```
context.$hello = hello
```

in the function we exported if we use Nuxt 2.12 or earlier.

We can also use the `$hello` function with the `asyncData` function by writing:

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

<script>
export default {
  mounted() {
    this.$hello("james");
  },
  asyncData({ $hello }) {
    $hello("asyncData");
  },
};
</script>
```

The `$hello` is part of the context parameter of `asyncData` .

### Conclusion

We can handle errors when we get data.

Also, we can create our own plugins and functions and inject them to our app.