VueWeekly.dev - Issue #3 - Writing A Vite Plugin + Using Storybook in your NuxtJS project ✨

Writing A Vite Plugin

Vite has gotten a lot of buzz recently, but what does it mean for developers? No better way to gain an appreciation than by stepping through an example!

With Vue 3 recently reaching release candidate, it’s a great time to dive in and give it a try. To get started right now you’ll need to use vite, the new web dev build tool from the creators of Vue. Vite offers a new plugin system for extending vite’s capabilities. Today we’ll take a look at setting up a simple vite plugin.

@nuxtjs/storybook

Another powerful addition to the Nuxt.js ecosystem. The beauty in this plugin is the ease of integration. A pleasant reminder of the progress in each project over the past few years.

Using Storybook in your NuxtJS project is only one command away ✨

• Zero configuration
• Nuxt webpack configuration
• Nuxt plugins support
• Story discovery from nuxt modules
• Nuxt components support
• Storybook Generate
• Hot reload support

@nuxt/content-theme-docs

It's been a busy week for the Nuxt team!

Writing docs with Nuxt Content is now too easy

Introducing @nuxt/content-theme-docs

BaklavaJS

BaklavaJS is a graph/node editor for the web. It provides an easy-to-use editor together with the ability to create custom nodes. Additionally, it puts a strong emphasis on extensibility, which lead to a versatile plugin system. To guarantee type safety, the entirety of the BaklavaJS ecosystem is written in TypeScript.

Vue Composable reaches beta 🚀

Another nice option (or addition) for a utility library when thinking through the transition to the Composition API.

Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +50 different composables.

This library aim is to be one stop shop for many real-world composable functions, with aggressive tree-shaking to keep it light on your end code.

Nuxt Static Improvements ⚡️

With v2.14,nuxt generate will automagically skip webpack build step when no code has been changed and use the previous build using cache. This will help to drastically improve static deployments time...

// nuxt.config.js

export default {
  target: 'static'
  // ...
}

Skeleton - Golang and Nuxt boilerplate

This project really is a complete boilerplate. It's one of the few that we've seen that uses Go as a backend and checks the boxes on such a long feature list. This project can serve as a great reference for structure and ideas even if you don't use it directly.

A complete Golang and Nuxt boilerplate for your project with backend API, frontend, tests and CI/CD pipelines.

A jam-packed feature list including:

• Backend written in Golang using Beego framework.
• Frontend written in NodeJS using NUXT and Vue.js frameworks.
• Material design using Vuetify.
• JSON REST API based on jsonapi.org standard.
• Fully featured user registration, login, password reminder, profile update, 2FA authentication, SMS based mobile confirmation, audit logs ... etc.
• JSON Web Tokens (JWT) based authentication.
• Social login using Facebook, LinkedIn, Google, Github.
• SEO friendly thanks to the NUXT Static Generated (Pre Rendering).
• Rate limiter for API routes to easily set a rate limit per IP for one or more routes.
• Pagination implementation for API and frontend with caching.
• Multi-factor authentication using One Time Passwords and mobile SMS code.

Plus a lot more 😊 ...

Create Nuxt App v3.2 is out✨

• Upgrade to Nuxt 2.14
• TypeScript improvements
• New UI framework: Chakra UI

Concept Maps and Single-page Explainers

I love creating color-coded diagrams! I create them to capture and document my learning. I’ve found that they can be the quickest way to discover the knowledge gaps, too. They've been an effective tool in my learning journey of Laravel, Vue Js and of course, my absolute favourite, Nuxt Js.