VueWeekly.dev - Issue #4 -9 Vue Techniques to Master + FullStack Templates & Boilerplates using Vue 🏗️

Have You Mastered These 9 Vue Techniques?

A nice refresher on some of the lesser-known features. One of our favorites, functional components 😄:

<template functional>
  <div class="book">
     
  </div>
</template>

Now Vue.js has become a hot framework for front end development. There are a lot of engineers utilizing the convenience and powerful features of Vue.js. Yet, some of the solutions we've done might not follow the best practice. Well, let's take a look at those must-know Vue techniques.

1. Functional Component
2. Deep Selectors
3. Advanced "watcher"
4. Event argument: $event
5. Router Parameter Decoupling
6. Two-way Binding for Custom Components
7. Component Lifecycle Hook
8. Event Listener APIs
9. Mount Components Programmatically

Vue-Django CI/CD template using GitLab, Cypress and Django Unit Tests and Docker

This template is coupled with a very in-depth README covering all of the configuration and design decisions. We are also fans of the architectural diagrams that show the interactions between all of the stacks when running in Docker Compose. This can be used as a helpful resource for larger-scale projects that have more than a few developers involved.

A - Webpack 4 - Vue - Django - Gitlab CI/CD - Docker/Docker-Compose - nginx - postgresql - boilerplate, which allows you to setup your own gitlab CI pipeline with just a few variables which need to be set, and you are ready to develop a webapp!

Using Vue at Scale at L’Oreal with Tim Benniks 🎙

It's always good to hear how enterprises are using (and adopting) the latest and greatest and how it fits into their development lifecycle.

Building websites at an enterprise scale presents many challengers. In this episode the panel talks with Tim Benniks about how the global cosmetics brand L’Oreal uses VueJS in conjunction with Sitecor and other tools to develop websites for its many brands around the world. Tim also discusses his experience in building cross-cultural development teams, and the challenges presented by teams comprised of developers from multiple countries.

A Vue plug-in for rigging Tauri [WIP]

This plugin will help to get started quickly with Tauri. A nice feature of the plugin is being able to configure both the desktop app and web-based version to be running at the same time without the headache of setting it up yourself.

Turn your Vue SPA into a tiny cross platform desktop app that is fast and secure.

Tight Coupling vs. Loose Coupling in Vue.js

When talking about loose coupling and tight coupling, often, the impression arises that tight coupling is something we always have to avoid. But this is almost impossible. What’s essential is that we use loose coupling when bridging the gap between layers of our application. Within a layer, though, it is often no problem if there is tight coupling. In this article, we will look at when tight coupling is unproblematic, and when it is better to use loose coupling.

vue-cli-plugin-electron-builder

Want to use Electron for your desktop app instead? Then give this a try. The documentation site outlines all of the steps to deploy a well-rounded app complete with icons and updating.

Easily Build Your Vue.js App For Desktop With Electron

Full Stack FastAPI and PostgreSQL - Base Project Generator

Data science folks - get started here. This is an all-encompassing Cookiecutter generator that uses Vue to power the frontend.

Full stack, modern web application generator. Using FastAPI, PostgreSQL as database, Docker, automatic HTTPS and more.

Vue frontend:

• Generated with Vue CLI.
• JWT Authentication handling.
• Login view.
• After login, main dashboard view.
• Main dashboard with user creation and edition.
• Self user edition.
• Vuex.
• Vue-router.
• Vuetify for beautiful material design components.
• TypeScript.
• Docker server based on Nginx (configured to play nicely with Vue-router).

Comparing reactivity models - React vs Vue vs Svelte vs MobX vs Solid

A nice overview of how each language deals with reactivity. A hat tip to the author for using the Vue 3 Composition API.

This article will compare some of the more popular reactivity models in the JS ecosystem - especially the ones found in the UI frameworks and libraries. After all, UI is just a function of state, meaning that UI has to react to changes in state.

In order to compare the different approaches to solving this problem, I'll demonstrate how to create a simple To-do app using different frameworks and libraries. We'll keep the UI as minimal as possible. After all, we are comparing reactivity models, and not UI libraries.

Vue Microsite for the Netlify 1 Million Developers announcement

A feel-good site (created in Vue) to celebrate Netlify's recent achievement 🎉.