How Cool is Nuxt?

I recently updated my personal resume website, and I thought it would be a good opportunity to refresh on Vue and learn NuxtJs. So, I thought I'd give a run through of my experience.

The general setup of Nuxt is pretty self explanatory with in its stepper. They've got setup docs for yarn, npx, and npm. I went through the npx choose your own adventure setup.

Choose Your own adventure: npx style

npx create-nuxt-app <project-name>

As you journey through the npx create-nuxt-app route, you will be asked many questions.

• What Package manager?
  • yarn
  • npm
• What programming language?
  • JavaScript
  • TypeScript
• Do you want a UI Framework?
  • Ant Design Vue
  • BalmUI
  • Bootstrap
  • Buefy
  • Chakra UI
  • Element
  • Framevuerk
  • Oruga
  • Tachyons
  • Tailwind CSS
  • Windi CSS
  • Vant
  • View UI
  • Vuetify
• Nuxt.js modules:
  • Axios - Promise based HTTP client
  • Progressive Web App (PWA)
  • Content - Git-based headless CMS
• Linting tools:
  • ESLint
  • Prettier
  • Lint staged files
  • StyleLint
  • Commitlint
• Testing framework:
  • None
  • Jest
  • AVA
  • WebdriverIO
  • Nightwatch
• Rendering mode
  • Universal (SSR / Static)
  • SPA
• Deployment target
  • Server (Node.js hosting)
  • Static (Static/JAMStack hosting)
• Development tools
  • jsconfig.json
  • Semantic PR
  • Dependabot (for GitHub only)
• Continuous Integration
  • GitHub Actions
  • Travis CI
  • CircleCI

My route:

• npm
• JavaScript
• No UI framework
• Axios
• ESLint, Prettier, Stylelint, Lint staged files
• Like a horrible person I didn't add a testing library
• SPA
• Static (I deploy to github pages)
• jsConfig, Dependabot
• No CI

I wanted a really clean slate to work with, but you can obviously manipulate or add in some of these options later if you find you need them.

Once you are all built, you can head into your directory!

cd <project-name>
npm run dev

Me though, I chose a more dangerous and tedious route:

My previous code base was a create-react-app. I created a new branch and carefully removed that information making sure not to delete items that would remove my connection to git then copied over my new Nuxt project into the directory. Once everything was correctly manipulated then I could npm run dev.
There was probably an easier way to do this, but I sometimes just impulsively start things without thinking, when trying to learn new things... oops

Up until this point, I had been using react based frameworks. Most recently, I had been using NextJS, which has a lot in common functionally as NuxtJS. Both have an opinionated routing system, meaning it's built in, which made setup go much faster. It was kind of auto-magical! But because of my experience with Next it made working in Nuxt a bit easier.

Project Setup, Time to build

After getting my project setup and my new branch pushed to Github, I felt it was safe to start adding and adjusting content as I saw fit.
...

Cool things about Nuxt

Nuxt has a present directory structure that helps in the dynamic and auto importing.

My Fave Things

• Components
  • The auto imports is available v2.13+
  • Easy to use Lazy loading, by just prefixing Lazy to the front of you component.
  • <LazyTheFooter />
  • Using the lazy prefix you can also dynamically import a component when an event is triggered.
• Layouts
  • This may be more in line with liking the templating feature in Vue, but I dig the reusable layouts. On my personal resume site I really only extended the default layout, but the fact that I can create different layouts for specific templates is just cool.
• Pages
  • I mentioned before that Nuxt like Next has an opinionated routing system. The router is built-in, cool right? Well not half as cool as the router configurations being automatically created for me just by adding my files to the Pages Directory!!!!

I'm using Dependabot, for the first time, I'm like it so far also. It's kind of like how My cats tell me if they need fed, but plants don't... as in the Dependabot tells me about when my Dependencies need updating and if I relied on my own watchful eyes, the dependencies would probably die like any plants I've tried to keep.

Coolest thing about Nuxt, It has great Documentation! It's pretty understandable and followable.

The things I needed to add or change

I needed to update a few things. I needed to add a .stylelintignore, to ignore the .nuxt directory, it was not thrilled with how some of the css was being built out and was refusing to commit because of it. I could have updated the rules to include it, but I actually like the rule it was breaking, in the end I guess that is a linting preference. That being said, I'm thrilled that they included stylelint in the Nuxt template creation. It's my go to for style linting now-a-days.

The site is built! Time to Deploy!

Well I mean the site has content. That means it's time to generate the static build and publish.

Generate for static.

The first step in deploying is generating the build the static web app. And you do that by running the generate script:

npm run generate

This creates a dist directory. It contains everything I needed to deploy to my Github pages site.

After running this script you will need to commit your changes at the very least, because if you try to deploy with the changes not committed, you will receive a error in deployment.

Deploy to gh-pages

The deploying documentation is stellar! It's also not limited to GitHub and that's pretty darn cool!
But for GitHub you want use push-dir

npm install push-dir --save-dev

Then you add the deploy script:

"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},

Then like magic my site would be deployed and be live pretty quickly!

Last Impressions

Nuxt is cool and handy for getting a quick start! I would recommend this more for refreshing on VueJS rather than trying to learn both how to work in Nuxt and writing VueJS templates.