Creating a Nuxt App
Now that you know why to use Nuxt.js to build Vue apps, in this lesson we’ll start building a Nuxt.js app together, understand the folder structure, and start building our example application. By the end we’ll have a working app with a layout and two pages we can navigate between.
Prerequisite Knowledge
From this point forward I’m going to assume that you’re comfortable with HTML, CSS, JavaScript basics, Vue.js, Vue Router, and Vuex. If you’re not familiar with these Vue topics, I recommend you stop here and take our Real World Vue.js course and our Mastering Vuex course.
Creating our Initial Nuxt.js App
To get started creating our application we’ll be using create-nuxt-app. Create Nuxt App is a command line tool that helps you create and scaffold out your Nuxt applications. It helps you set up the default folder structure of your app, you can optionally install your preferred server-side framework like Express or Koa, and you can also install the Nuxt Axios module for easy Axios integration with your app.
To get started, make sure you’re using a version of npm that’s 5.2.0 or higher. This will ensure you have have npx installed, we’ll need this command.
Then let’s run the following in your command in the terminal:
$ npx create-nuxt-app real-world-nuxt
npx is a tool intended to help round out the experience of using packages from the npm registry — the same way npm makes it easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry. In our case, that’s create-nuxt-app.
If Yarn is your package manager of choice you can run yarn create nuxt-app real-world-nuxt. It’ll set you up in the same way.
After running either the npx or yarn command, Create Nuxt App will prompt you with a few questions to get you setup with your app’s default configuration.
