Home
Jamstack Explorers
Menu

Get Started with Nuxt with Debbie O'Brien

Nuxt Project Setup

It's time to create our first Nuxt application. To get started quickly we can use the create-nuxt-app. I'm going to use yarn, but you could use NPM or NPX. In our terminal, type yarn create nuxt-app. followed by the name of your application.

Let's call it the Nuxt mission. When we press enter, the CLI is going to ask us a few questions to help us correctly set up or app just the way we want.

Do we want our project name to be Nuxt mission? Sounds good to me.

What about the programming language? JavaScript is the one I'm going to use.

Package manager - I like to use yarn.

UI framework. We could choose anything from TailwindCSS to Vuetify and it will install and set it up for you. I'm not going to choose any for this course.

Nuxt modules. We can add the Axios library for data fetching, however, in this course, we will use the Browser fetch API so we don't need to install this. We could add a progressive web app for better performance and the content module, a git-based headless CMS using markdown. Although I highly recommend installing and working with these we won't be using them in this course.

Linting tools, now, I love linting. I love ESLint and prettier and I always use these tools so I'm going to choose them all and you'll see, how it will make my code a little bit prettier. But if you're new to coding or you've never used linting before or don't feel comfortable with linting tools, it might slow you down and you might not want to select these right now.

Testing framework. Yes. Testing is really important, but we're not going to do testing in this course.

Now really important. The rendering mode. Do we want universal, which is for both server-side rendering and static site generation? Yes, that's exactly what we want as we want our content to be pre-generated and not generated in the browser.

Even more important, where are we going to deploy our application? What is the deployment target? Are we going to deploy it on a node.js server and pay for node.js hosting? No, we're not. We're going to deploy to Netlify for free. So we want to choose static, JAMstack Hosting.

js.config is recommended for a vs code if as we are not using TypeScript so let's add that.

We don't need to worry about pull requests or dependable bot, for auto-updating dependencies. So we can leave them out, but you can select them if you want.

Same for continuous integration, I'm going to use none for now as to deploy to Netlify I don't need to add any Github actions.

And are we using git? Yes, we are.

And we are done with all the questions I know that was a lot but believe me it will be worth it. It is now going to install all the packages we need and give us an application complete with everything we want to get started on our Nuxt Mission.

Let's see it in action. Once everything's finished installing, we'll get a lovely message successfully created project - Nuxt mission. Now to get started, we can use CD to change directory or enter the nuxt mission directory.

We can use yarn dev which will run our dev script so we can see our application in development mode which will be available on localhost 3000. We can literally just command and click the link in vs code which will open up our application in our browser. And there we have it. When our Nuxt mission has launched, our first application up and running.

Now let's have a look at, what's been created for us in our project folder. You'll see the first thing we have is a .nuxt directory. This was created when we used the Dev command and that's, what Nuxt uses to build our application so we can use it in dev mode. This directory is generated each time we make changes to our application.

The assets directory contains our un-compiled assets such as CSS or Sass files, images, or fonts. We will be using this later in the course.

The components directory contains our Vue.js components. Components are what makes up the different parts of your page and can be reused and imported into your pages, layouts and even other components. We will be adding some components in here later.

The layouts directory is for your layouts. Layouts are a great help when you want to change the look and feel of your Nuxt.js app. Whether you want to include a sidebar or have distinct layouts for mobile and desktop. We already have a default layout created for us. We'll look at how layouts work later in the course.

The middleware directory lets you define custom functions that can be run before rendering the page. We won't be dealing with middleware in this course.

The Node modules directory are all the npm packages that we have installed and that are needed to make our application work such as Nuxt and Vue.

The pages directory contains your application views and routes. Nuxt reads all the .vue files inside this directory and automatically creates the router configuration for you. We will take a deeper look at this throughout the course.

The Plugins directory is for our plugins that we want to run before instantiating the root Vue.js Application. We won't be using plugins in this course.

The static directory is directly mapped to the server root and contains files that likely won't be changed such as the favicon.

The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt out of the box but is disabled by default. Creating an index.js file in this directory enables the store. We won't be covering the store in this course.

At the root level we have some config files which are used for configuring eslint, prettier, etc as well as a git .ignore file so we don't add things like the .nuxt folder to version control.

Our package.json file already contains all our scripts needed so that we can launch our application. Later we will look at the scripts for deploying our application to Netlify.

The most important file is the nuxt config file. This is where we can configure our application to add global CSS, SEO meta tags and so much more. We will be using this file during the course. But let's take a look at one thing. When we created our application we chose static as our target so we can create a Jamstack application. You will see here our target is set to static which is what we need to deploy to Netlify. If you didn't select static when creating your application then don't worry. You can simply add this line of code and your app is ready for the Jamstack.

OK mission completed it's time to start coding.

Explorers

your progress

210