JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Tickets

Webpack + Vue Loader : Recipe for supercharged Vue

Submitted by Hemant Rai (@hemantisme) on Sunday, 4 August 2019

Section: Full talk (40 mins) Technical level: Intermediate

View proposal in schedule

Abstract

When building ambitious single page applications, it is apt to leverage Vue’s official CLI for quick scaffolding and other useful tools. Vue calls it a “batteries-included build setups for a modern frontend workflow”.

This talk will focus on what this modern frontend workflow has to offer and the ways to configure it.

Outline

In this talk, we’ll be taking a closer look at webpack and vue-loader, 2 tools from the Vue CLI’s tooling ecosystem.

Some of the key points to be covered in this talk:

  • The need for Vue CLI
  • Trade-offs
  • Tweaking webpack config
  • Vue Loader
  • Handling assets and pre-processors
  • Scoped CSS
  • CSS Modules
  • Functional Components
  • Hot reload
  • Linting
  • More features

Requirements

  • Vue.js basics
  • Interest in building large Vue.js apps
  • Familiarity with build tools and loaders is a plus

Speaker bio

I am Hemant Rai, full stack JS developer and front end lead at Cloudnaut Technologies. During my 8 years as a developer I’ve worked across the dev stack and have been focusing on the front-end for more than 4 years. I started as a PHP developer working mostly on the back-end but switched to the JS stack around 4 years ago. On the front-end, I started with AngularJS and have been building Vue.js apps for more than 3 years.

Links

Slides

https://docs.google.com/presentation/d/1B2ZgStEd5tsHc8d86jmxle-c2F-RmDRVbxx2Gbri1rs/edit?usp=sharing

Comments

  • Abhishek Balaji (@booleanbalaji) Reviewer a month ago

    Hi Hemant,

    Thanks for taking the time out to do the reherasal. Here’s the feedback from the call:

    • Time taken: 37 mins
    • Add more context around the slides, and not just GIFs/titles
    • Talk was really good and had a lot of insightful content.
    • The flow of the talk could use more story telling elements.
    • Assume that the audience already has some background knowledge of Vue. You can skip explaining these parts, like hot reloading.
    • Explain why should someone use Vue loader and the exact problem it would solve for someone listening in the audience.
    • Try incorporating a case study in the presentation
    • There are other solutions to adding to webpack. Why should someone pick your suggestions and why should someone not?
    • Add graphics to help context better
    • Try to use fewer jargon and keyphrases, and instead focus on simplifying the content for the audience
    • Add small snippets of code when you’re explaining concepts. This helps audience learn about the concept by looking at sample code.

    As discussed, please send in your revised slides by Monday, so we can do a final round of evaluation.

Login with Twitter or Google to leave a comment