Dec 14, 2020
Set Up a Vue Project with Nuxt JS
Some recent contract work has led me to need to expand my skill set and use Vue JS for a user onboarding process so I wanted to share how I got the project up and running quickly using the NuxtJS framework.
I was nervous that learning a new front end framework would be tough since I’ve been thinking in React since Bootcamp.
I was pleasantly surprised at how natural it came. A lot of the compartmentalization and division of code that happens in React also happens with Vue. Writing components is different syntax but is something that is easy to pick up and well documented.
So let’s set up a project with Nuxt and talk about what it gives you straight out of the box that’s super helpful.
Organized file structure
Nuxt is going to look for certain things in certain places so it creates a clear file-structure and relies on some naming conventions to behave properly.
For example, pages help connect the routes and the router based on file names.
Performant
Nuxt JS applications are optimized out of the box by using Vue best practices and gives you the chance to do some fine-tuning if you so desire.
Great Documentation
I mentioned it already once above, but the docs are so good it’s worth mentioning a second time. There are numerous videos and examples online to practice individual concepts. My favorite thing was the code sandbox example of a Nuxt JS app you could spin up and work on with no installation or local environment setup.
Here’s how easy it is to get started:
What you’ll need:
- node
- A text editor
- a terminal
Spin up the app and get the Demo Page:
To get the application up and running in the browser run:
npx create-nuxt-app <project-name>
// replace <project-name> with whatever were going to call the applicationcd into <project-name> then use the command npm run dev.
Congratulations you can now check out your newly created application in the browser at http://localhost:3000
Happy Hacking!
Resources:
Connect with Me:
