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, 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.

Getting Started with Nuxt.js