Photo by Drew Saurus on Unsplash

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 application

cd 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:

--

--

--

Full- Stack Software Engineer with a former life in high-end restaurant management. Currently working in React JS and Ruby on Rails.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Video landing page with Flexbox

How to have Better NPM Scripts with Scripty

Designing API Methods in JavaScript

Basic React App — Pt.II

Props in Styled-Component with React-JS

What is Lazy Loading & How To Apply It?🚀

How to add SASS to your HUGO project.

5 Lesser-Known NPM Packages I Didn’t Know I Needed as a Web Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robert K.

Robert K.

Full- Stack Software Engineer with a former life in high-end restaurant management. Currently working in React JS and Ruby on Rails.

More from Medium

An Ode To VueJS

The VueJS logo set against the sunset, looking through a person’s hand.

Vuetify Textareas

JavaScript: Multi-tool program or unfitting for large-scale software development?

Disable inspect element — DevTools in your Website