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.
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.
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:
- 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 application
<project-name> then use the command
npm run dev.
Congratulations you can now check out your newly created application in the browser at
Nuxt.js - The Intuitive Vue Framework
NuxtJS is an MIT licensed open source project and completely free to use. However, the amount of effort needed to…
Binge our exclusive collection of global Vue Conference talks. You may recognize Gregg from his early days teaching…
Connect with Me:
Built as a part of a Udemy course on React best practices complete with a NoSQL database powered by Google Firebase…
Robert Keller - Volunteer - Software Engineer - FightPandemics | LinkedIn
I love to build things, usually with code, some times with wood, always with a high level of detail. I used to solve…