My Favorite Vue.js & Nuxt.js packages for 2019

Nada Rifki
4 min readNov 26, 2018

Be it a junior developer or an experienced one, we all love open-source packages. Our lives as developers would be so exhausting without them and just fueled by coffee more than it already is.

Lucky for us, Vue.js and Nuxt.js have a growing community that comes up every day with awesome new packages.

As a junior developer, I just can’t imagine my life without a few of them. So I piled up a list of my favorite ones.

Enjoy, use with care, share and let me know if you got something better or just stumbled upon a new package that you think I should add to the list.

Vue.js

Vue.js is an easy-to-use progressive javascript framework for building user interfaces. Check out this article by TechMagic to see how Vue.js compares with React and Angular.

  • Vue Dark Mode: A minimalist dark design system for Vue.js. It includes base components to craft dark interfaces that the insomniac among us will love. I’m one of the authors along with Julien Le Coupanec.
  • Vetur: Vue tooling for VS Code. If you’re a Vue.js power user, you gotta’ try it (if you don’t know about it already!).
  • Vue VS Code Snippets: By Sarah Drasner, these snippets are just awesome and I’ve been using them since I started learning Vue.js.
  • Bootstrap-Vue: Provides the most comprehensive implementations of Bootstrap V4.
  • Vue Native: Are you a fan of React Native? Say no more, Vue Native is a framework you can use like React Native to build cross platform native mobile apps using JavaScript.
  • NativeScript Vue: And if you prefer NativeScript, here is a package you can use to create native mobile applications with both NativeScript and Vue.js.
  • Vue Content Placeholders: How do you lower your bounce rate? Use these composable components for rendering fake, and yes, progressive content while your real content is fetching.
  • Vue Autosuggest: An awesome Vue.js autosuggest component.
  • Vue Clipboard: A simple Vue.js package that allows your users to copy text to clipboard base on clipboard.js
  • Vue Clickaway: A reusable clickaway directive that detects and reacts to clicks outside of an element. Handy when we need to close a modal window or hide a dropdown select.
  • Vue Waypoint: The v-waypoint directive for Vue.js that triggers a function when you scroll, comes in handy when you want to trigger an animation on scroll for instance.
  • Vue Virtual Scroller: Fast and infinite scrolling for Vue.js applications.
  • Vue Slideout: A Vue.js implementation of Slideout.js.
  • Vue Swing: Jealous of Tinder? Don’t worry, this package got your back. It’s a vue.js wrapper for Swing, which is a swipeable cards interface (the swipe-left/right for the yes/no input).
  • Vue Quill Editor: A Quill editor for Vue.js that even supports SPA and SSR.
  • Vue Stripe Checkout: A Vue.js plugin for Stripe checkout.
  • Vue Cleave Component: Vue.js component for Cleave.js that formats your input content as you’re typing (credit card formatting, date, etc.).
  • Vuelidate: Model-based validation for Vue.js, implementing form validation will feel like a breeze now.
  • Vue.js Datepicker: A simple Vue.js datepicker commponent.
  • Vue Moment: Want to use Moment.js in your Vue.js application without scratching your head? This package is what you need.
  • Vue Numeric: A Vue.js input field component to display a formatted currency value.
  • Vue Slider Component: 10 types of slider components all made with and for Vue.js.
  • Vue.Draggable: Vue.js component that allows drag-and-drop sorting in sync with View-Model based on Sortable.js.
  • Vue Draggable Resizable: A Vue.js component for resizable and draggable elements, without external dependencies.
  • Vue Color: Vue.js color pickers from Sketch, Photoshop, Chrom and more.
  • Emoji Mart Vue: Forked from React’s emoji-mart, this package is a Slack-like customizable emoji picker component for Vue.js.
  • Vue YouTube Embed: Based on Angular YouTube Embed, this Vue.js component allows you to use YouTube iframe API.
  • Vuetable-2: Datatable component for Vue.js.
  • Vue Chartist: Simple responsive charts based on Chartist.js
  • Vue Trend: The most elegant trend chart you can find find for Vue.js
  • Epic Spinners: 20 easy to use css spinners collection with Vue.js integration.
  • Vue notification: Success, warning and error notifications for Vue.js applications? Sure! On the right side, left side, bottom, top or center? Anywhere you want baby!
  • Vue Popper: A Vue.js popover component base on popper.js
  • Vue Countup: Based on CountUp.js, this Vue.js allows you to create animations that display numerical data.
  • Vue No SSR: A Vue.js component to wrap non SSR friendly components.

Nuxt.js

Nuxt.js is a higher-level framework that builds on top of Vue.js and which allows you to painlessly build server-rendered applications.

  • Create Nuxt App: The easiest way to create your Nuxt.js project in seconds.
  • Nuxt SAAS resources loader: I love not having to import manually all my SASS styles every single time I create a new file and let SASS resources loader fo all the work. Lucky me, there is this module to avoid having to go through all the configuration work on Nuxt.
  • Vue Dark Mode: 😃 Forgot to tell you that it was also made with and for Nuxt.js.
  • PWA module for Nuxt: The most reliable and stable module to create your Progressive Web Application.
  • Dotenv module: Loads your .env file into your Nuxt.js application context.
  • Senty module for Nuxt.js: Sentry.io is an Open-source error tracking, this pachage allows you to to add Sentry to your Nuxt.js application.
  • Google Analytics module for Nuxt.js: Integrates your Google Analytics account with your Nuxt project.

This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

--

--