Getting started with Nuxt.js
A beginners guide
How to install Nuxt.js
In this tutorial, we will be getting started on the front-end development for a brand new Progressive Web App or (PWA) as they are more commonly known.
We will be developing our Web App using Nuxt.js, Nuxt.js is a framework for Vue.js, but why a framework for a framework I hear you ask? Well, that is because Nuxt.js add some really cool functions to the already awesome Vue.js that makes it so much better for developing Progressive Web Apps, in particular pre-rendering.
Pre-rendering along with a few other funky tricks makes your app fully accessible to the search engines, so now is it not only super fast but it is also fully indexable thus giving you web app a head start on the competition.
OK so first things first, let’s open up the dreaded command prompt, you can do this in Windows by searching “CMD” the use the command prompt below to navigate to your desired project folder.
cd c:\xampp\htdocs
Now let’s create the APP with the following command.
npx create-nuxt-app project-name
Now command prompt will ask you some questions, see what to select below.
- Project name = Your project name or default
- Project description = Your project description or default
- Choose features to install ignore esLint, for now, and select the options for PWA, Axios, Prettifier
- Custom server frameworks = None
- UI framework = None
- Testing framework = None
- Nuxt Mode = Universal
Now NPM (Node Package Manager) will install Nuxt.js into the project folder.
Once installed CD into the new project folder.
cd project-name
How to use Git Version control with Nuxt.js
Version control is a way of tracking changes made to your project files and folders over time, this is particularly useful when working with a large team of developers who are all working on the same project at the same time
To add version control in our “Git” to our project we will first need to create a fresh empty remote repository, in my case I will be using Bitbucket for this example but there are plenty of other to try out such as Github, SubVersion, Tortoise, etc.
Once the repository is created copy the git clone link, in my case. https://danielwakefield83@bitbucket.org/danielwakefield83/nuxt-tute.git
git init
git pull remote branch
Literal code
git pull https://danielwakefield83@bitbucket.org/danielwakefield83/nuxt-tute.git master
To see the status of our git we can run the following command.
git status
Now let’s connect our local repository to our remote repository
git remote add origin https://danielwakefield83@bitbucket.org/danielwakefield83/nuxt-tute.git
git add -A
Now let’s commit our changes
git commit -m “my first commit”
Then finally we can push our commit and changes, this will add all our files to the remote repo.
git push origin master
Now if we visit the remote repository we will see our files are all there minus the node_modules folder.
If you are cloning this repository you will need to manually install the node modules into the folder first by running the following command in the root folder of your local repository.
npm install
How to start the NPM development server
npm run dev
Once the development server has compiled you can go to http://localhost:3000/” to view your freshly installed Nuxt app.
