The Vue from Toronto!

Here are 12 takeaways from the Nuxt Workshop I was in with the creators of Nuxt, the Chopin brothers.

November 19, 2018
4 minute read

Nuxt Workshop

If you've never used Nuxt before then you're in for a real treat. Nuxt is a framework built on Vue.js that offers so many things right out of the box, that for every web project from here on out it's going to be tough to convince me to not use Nuxt. If you need some more convincing, just google it or check out this article.

The Chopin brothers gave a nice presentation and walked through every step of an application (I was also able to get my specific questions answered, which was nice). They also showed a few hidden features of Nuxt that aren't quite documented just yet. So here is a run down of interesting and note-worthy features of Nuxt that I suggest you know before building your next project with Nuxt:

  1. Use the Webpack analyzer to show bundle size:
    npx nuxt build —analyze npx nuxt build —profile

  2. Build only for modern browsers:
    nuxt build —modern

  3. Have an error that you can't seem to track down? View the generated files from Nuxt by digging into the .nuxt folder. For example - do you need to see the specific routes that are generated? Look into the .nuxt folder and find the router.js file. You're welcome.

  4. The <nuxt-child> is a great little feature that is probably underutilized and is an easy way to use the same template with content that changes. Maybe a staff page where the header and footer remain the same but just the body content changes? More info here.

  5. Just in case you need to add some shit for IE9, like html head stuff, use the app.html file in the root directory. This is the only way to override the <head> element.

  6. Use process.server to detect if you’re running on the server side or client side. Great for troubleshooting a Universal app that is server side rendered.

  7. In your nuxt.config.js file, you can use "ssr:false" to have a plugin only rendered on the client side. Might be useful for something like Google Maps?

  8. asycData - I knew what this was before the workshop, however they really cleared it up for me when they showed that asyncData is actually merged with the "data" property in Vue. I finally read the docs and now understand: "you can use it to fetch some data and Nuxt.js will merge it with the component data". Knowing this lets you realize that the data you may fetch from an API is treated just like data from the component data.

  9. Modules are incredibly powerful. The brothers went really into depth with modules - it's an incredible way to extend the functionality of Nuxt because it lets you repurpose code across projects or abstract some logic from your app and modularize it.

  10. Within the nuxt.config.js options, you can use Webpack to inline any image that is under a certain KB size. Pretty slick if you really need something like this. More in the docs.

  11. If you use a lot of query string parameters, you can use watchQuery to update components when the query string changes. I know first hand how helpful this little feature is.

  12. Using tailwind.css with your Nuxt.js project? Use nuxt-purge-css to fully optimize the build and trim out all the unused CSS. Your lighthouse scores should be off the charts.

Adam Wathan's Talk

Adam's talk was almost mind-blowing for me. He introduced a way to use Vue components to do two things that are kinda hard otherwise.

First, he created a container query. Not a media query, which adjusts your elements based on the size of the browser, rather a query that adjusts based on the size of the parent container. It's actually pretty epic.

His second example demonstrates the functionality of Waypoints (basically, to trigger an element when you scroll to it's position) but without any external library. This is a super popular thing to do in modern web design, and there's a bunch of libraries out there that can do it for you.

His repo can be found here.