Creating a front-end using NuxtJS and TailwindCSS
Tags: nuxt, vue, tutorial, tailwindcss
Published: 2020-09-15 23:44:19

> In this multi-part tutorial, we'll create and deploy a multi-server architecture web application using Adonis for the back-end API, Nuxt for the front-end, and PostgreSQL for the database. 

> Part 1: Creating a front-end using NuxtJS and TailwindCSS
> Part 2: [Setting up Adonis v5 with PostgreSQL](https://dev.to/armiedema/setting-up-adonis-v5-with-postgresql-adl)
> Part 3: [Creating a REST API using Adonis v5](https://dev.to/armiedema/creating-a-rest-api-using-adonis-v5-4n1p)
> Part 4: [Connecting Nuxt front-end to Adonis 5 API](https://dev.to/armiedema/connecting-nuxt-front-end-to-adonis-5-api-using-axios-1ego)
> Part 5: [Deploying a multi-server app with Cleavr](https://dev.to/armiedema/deploying-a-multi-server-app-with-cleavr-3jh3)

#### Frameworks and tools
* Front-end: [NuxtJS](https://nuxtjs.org/) and [TailwindCSS/UI](https://tailwindcss.com/)
* Back-end: [AdonisJS](https://adonisjs.com/) 
* Database: [PostgreSQL](https://www.postgresql.org/)
* Server provision and deployment: [Cleavr](https://cleavr.io)

# Part 1 - Creating a front-end using NuxtJS and TailwindCSS 

### Install NuxtJS on your local machine

{% youtube 4vTE5iTkAcA %}

Installing NuxtJS is very straightforward. You can check out their installation instructions at https://nuxtjs.org/guides/get-started/installation. 

For this exercise, let's run the following command in our terminal to install Nuxt. 

```
yarn create nuxt-app themovies
```

Swap out 'themovies' if you want to name your project something else.

This will take you through a setup wizard that will install all of the dependencies you select. Super helpful and time-saving! The main configs we'll make sure to enable are **TailwindCSS** for the UI and **NodeJS** for server. 

After installation is complete, cd into the project, `cd themovies`, and then run `yarn dev` to run the app on your local. 
```
cd themovies
yarn dev
```

### Make the front-end pretty with TailwindCSS/UI

{% youtube jW6PCEWYhy8 %}

Open up the project with your favorite editor. I'll be using [IntelliJ](https://www.jetbrains.com/idea/). 

Looking at the folder structure, we can see that there is a layout directory and a pages directory. 

* In `layouts/default.vue`, let's update this page with a nice layout container. If you have a [TailwindUI](https://tailwindui.com/) account, I'd recommend using a component from their Application UI section. This is what I'll do for my movie review app. 

* Within the template tags in the `default.vue` file, replace the existing content with content from TailwindUI. 

* Next, I'll just go through and update some of the logos, text, and remove some things we don't need. 

The main thing to remember, is we need to designate where the body area is for the layout. In other words, the area that we'll dump content into. 

With Nuxt, all you have to do is simply add the `<nuxt />` tag to where you want the content to be placed. 

Let's now take a look at `pages/index.vue`. This is the content that will be placed in the `<nuxt />` placeholder on the `default.vue` layout. 

* I'll grab one of the list components from TailwindUI and replace the existing content between the `<template>` tags with it. 

* Now, let's just replace the table row content with Movie info. I'll add-in info from 3 of the best movies ever made - [Children of Men](https://www.imdb.com/title/tt0206634/?ref_=fn_al_tt_1), [The Terminator](https://www.imdb.com/title/tt0088247/?ref_=fn_al_tt_1), and [The Sisterhood of the Traveling Pants](https://www.imdb.com/title/tt0403508/?ref_=fn_al_tt_1).

### Add a dynamic movie details page
{% youtube O3vwb89DunI %}
One of the great things about Nuxt, is you don't need to worry so much about maintaining routes yourself. Nuxt dynamically creates routes for you based on what's in the `pages` directory - all you need to do is add `.vue` files. 

So, let's go ahead and add a new page for movie details. We'll, of course, want it to be dynamic. To make a dynamic page, just simply add an underscore at the beginning of the file name. 

Let's add `_title.vue` to the `pages` directory and then add in another TailwindUI component for movie details. 

For our movie details, we'll have the following data that we'll take note of for our database table structure: 
* Movie title
* Movie poster graphic
* Release year
* Top-billed actors
* Genres
* Description
* Review 

One last thing. Let's go back to `index.vue` and find the `<a href>` tag for Children of Men. In Nuxt, we use `<nuxt-link to="">` instead of `<a href>` for links. Update the tag to:

```
<nuxt-link to="/children-of-men" class="...">
``` 

Alright! Let's go back to our browser and check our work. (make sure you're still running `yarn dev` in your terminal)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/01n82edwz8si5cpds511.gif)

Voila! It works! 

In [part 2](https://dev.to/armiedema/setting-up-adonis-v5-with-postgresql-adl), we'll install Adonis v5 on our local machine, spin up a PostgreSQL server, and link the two together. 

---
Following along? View Part 1 progress on GitHub at https://github.com/armgitaar/themovies/tree/part-1. 

You've probably noticed we mainly just created static content so far. We'll come back and make it dynamic later. Next, we'll work on the back-end API now that we know what data is needed for the front-end. 

[Watch the full tutorial series uninterrupted on Youtube.](https://www.youtube.com/playlist?list=PLApnZzwJN4G5gHKMr4owbFKUdAtdwPB-X)