VueJS

VueJS Updates - October 2021

Published Oct 20, 2021

Updated Feb 16, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

🌱 Introduction

What’s new in Vue?

What new frameworks are available for software developers building futuristic products?

How is Vue catching up to changes in the technological ecosystem, and improving on processes, systems, and experience?

If you are curious to know what’s new in the Vue ecosystem, read on to discover new updates, developments and high-level plans discussed in this edition of Vue Contributor Days, hosted by Tracy Lee, Evan You, and Simone Cuomo. If you would rather watch the full event, you can find it here.

First off, let’s have a quick glance at the cool panellists featured in this edition.

The Panelists Highlight:

Ben Hong - Senior DX Engineer, Netlify & Vue Core Team Member
John Leider - Author & Founder, Vuetify
Rahul Kadyan - Software Engineer & Vue Core Team Member
Kia King Ishii - Director, Global Brain & Vue Core Team Member
Thorsten Lünborg - Product Owner @ MVV Enamic & Vue Core Team Member
Haoqun Jiang - Open Source Developer, Vue Technology LLC & Vue Core Team Member / Vue CLI maintainer
Guillaume Chau - Vue Core Team Member
Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n
Anthony Fu - Core team member, Vue & Vite
Daniel Roe - Framework Architect, Nuxt
Carlos Rodrigues - Consultant
Filip Rakowski - Co-founder/CTO, Vue StoreFront
Liam DeBeasi - Lead Developer, Ionic Framework
Maya Shavin - Senior Software Engineer, Microsoft & Nuxt. js Ambassador
Luke Diebold - Lead developer, Agripath & Quasar Core Team
Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai
Paolo Caleffi - Co-Founder, Dreamonkey & Quasar Core Team
Yaël Guilloux - VueUse & Nuxt Contributor
Fred Schott - Creator of Astro

Now let’s dive in!

🌱 Vue 3.2

3.2 Released in August

(Script setup) is out of experimental
(style) v-bind
Define custom element ()
Reactivity performance ++
Effect scope API
ESM build + improved streaming API for @vue/server - renderer
V-memo for advanced performance optimization

NEW RFCs

Ref Transform Vuejs/rfcs/discussions/369
Props Destructure Transform Vuejs/rcfs/discussions/394 Vuejs/vue-next/pu11/4690

New documentation (WIP)

https://github.com/vuejs/docs/free/next
Staging Deployment is available at https://vue-docs-preview.netlify.app/guide/introduction.html
Dark mode is now available
More User focus
A new introduction: Vue as a framework
Better Learning path
Single-file component and different API preferences

New Default Recommendations

Vue-cli => create-vue (vite based)
Vetur => Velar
State Management: consolidate Vuex-next, Pina, core

SSR Focused

Async Component Hydration Strategies
Other Hydration / Payload Improvements
Suspense Finalization## 👩‍💻

🌱 Comunity updates

👩‍💻 IONIC VUE(Liam DeBeasi - Lead Developer, Ionic Framework)

Updates to Ionic/Vue V6
New Components, example: Accordions, Breadcrumbs, etc
Updated to new IOS designs
Added support for Vite
updates to CapacitorJS
Updates to StencilJS

👩‍💻 Vue i18n (Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n)

Current stable version is 9.1.9
It supports Vue 3
Typescript support

👩‍💻 Astro (Fred Schott - Creator of Astro)

Checkout https://astro.build/. It supports Vue.

👩‍💻 QUASAR (Luke Diebold - Lead developer, Agripath & Quasar Core Team)

Vue 3 Support
Volar Support
Vite Support in progress
Core App Extensions Migration are nearly complete, A Popular example is Qcalendar.
Static Site Generator(SSG) Freddy38510/quasar-app-extension-ssg
Cypress component testing integration, still in Alpha.
Visit Quasarcast.com to learn about version 2. Everything is free.
QuasarNews.com (Podcast) Coming soon.
72+ component series in Quasar Components(QuasarComponents.com).

👩‍💻 VUE Storefront (Filip Rakowski - Co-founder/CTO, Vue StoreFront)

Building high-quality tools to help developers build an amazing e-commerce storefront.
Vue Storefront Middleware and UI.
Vue Storefront Platform to host and analyze on the storefront.

👩‍💻 Nuxt (Daniel Roe - Framework Architect, Nuxt)

Nuxt 3 Public beta https://v3.nuxtjs.org/
Nuxt Cli
Nuxt ecosystem is now ESM

👩‍💻 VUETIFY (John Leider - Author & Founder, Vuetify)

Updates to the Form component.
New validation system, selection controls, checkboxes, different filtering methods on different types of data.
Update to Autocomplete component.
New component for Nested functionality.
Vite plugin.
SAAS Interfacing: updated from import to modules so it’s more intuitive for modification of the frameworks or utility classes.
It supports the different compile methods for overriding variables.
It works with Vue CLI.
A new vite SSR documentation.

👩‍💻 CHAKRA U.I (Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai)

CHAKRA U.I/ VUE NEXT VI Alpha release is out and in use for production and mostly relies on the theme API

Base style overrides and custom variants.
Partial back-port to @^0.10.2
Mode utility.
V2 early development with UI machines.
State machines to write Vue composition API hooks.
CHAKRA U.I Extract for Zero- runtime styling API.

👩‍💻 Nuxt (Anthony Fu - Core team member, Vue & Vite)

🧠 Have Any Questions

🙋‍♀️ If you have any questions or things to share? Use #VueContributorDays on Twitter and talk with us!

📺 View the replay here for the full update on the Vue Ecosystem! 🤝

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Adesoji Temitope
@temitopedavid_@temitopeadesoji

3 VueJS Component Libraries Perfect for Beginners

For developers checking out VueJS for the first time, the initial steps are overwhelming, particularly when setting up projects from square one. But don’t worry! The VueJS ecosystem offers a plethora of remarkable component libraries, easing this early obstacle. These three libraries are pre-built toolkits, providing beginners with the means to kickstart their VueJS projects effortlessly. Let’s take a look! Quasar Quasar is among the most popular open-source component libraries for Vue.js, offering a comprehensive set of ready-to-use UI components and tools for building responsive web applications and websites. Designed with performance, flexibility, and ease of use in mind, Quasar provides developers with a wide range of customizable components, such as buttons, forms, dialogs, and layouts, along with built-in support for themes, internationalization, and accessibility. With its extensive documentation, active community support, and seamless integration with Vue CLI and Vuex, Quasar empowers developers to rapidly prototype and develop high-quality Vue.js applications for various platforms, including desktop, mobile, and PWA (Progressive Web Apps). PrimeVue PrimeVue is a popular Vue.js component library offering a wide range of customizable UI components designed for modern web applications. Developed by PrimeTek, it follows Material Design guidelines, ensuring responsiveness and accessibility across devices. With features like theming, internationalization, and advanced functionalities such as lazy loading and drag-and-drop, PrimeVue provides developers with the tools to create elegant and high-performing Vue.js applications efficiently. Supported by clear documentation, demos, and an active community, PrimeVue is an excellent choice for developers seeking to streamline their development process and deliver polished user experiences. Vuetify Vuetify is a powerful Vue.js component library that empowers developers to create elegant and responsive user interfaces with ease. Built according to Google's Material Design guidelines, Vuetify offers a vast collection of customizable UI components, ranging from buttons and cards to navigation bars and data tables. Its comprehensive set of features includes themes, typography, layout grids, and advanced components like dialogues and sliders, enabling developers to quickly build modern web applications that look and feel polished. With extensive documentation, active community support, and ongoing development, Vuetify remains a top choice for Vue.js developers seeking to streamline their workflow and deliver visually stunning user experiences. For newcomers venturing into Vue.js, the initial setup might seem daunting. Thankfully, Vue.js offers a variety of component libraries to simplify this process. Quasar, PrimeVue, and Vuetify are standout options, each providing pre-built tools to kickstart projects smoothly. Whether you prefer Quasar's extensive UI components, PrimeVue's Material Design-inspired features, or Vuetify's responsive interfaces, these libraries cater to diverse preferences and project requirements. With their clear documentation and active communities, these libraries empower developers to start Vue.js projects confidently and efficiently, enabling Vue developers to create polished user experiences....

May 1, 2024

2 mins

VuetifyVueQuasar

Awesome 3D experience with VueJS and TresJS: a beginner's guide

Awesome 3D experience with VueJS and TresJS: a beginner's guide Vue.js developers are renowned for raving about the ease, flexibility, and speed of development their framework offers. Tres.js builds on this love for Vue by becoming the missing piece for seamless 3D integration. As a Vue layer for Three.js, Tres.js allows you to leverage the power of Three.js, a popular 3D library, within the familiar and beloved world of Vue components. This means you can create stunning 3D graphics and animations directly within your Vue applications, all while maintaining the clean and efficient workflow you've come to expect. TresJS is a library specifically designed to make incorporating WebGL (the web's 3D graphics API) into your Vue.js projects a breeze. It boasts several key features that make 3D development with Vue a joy: - Declarative Approach: Build your 3D scenes like you would any other Vue component, leveraging the power and familiarity of Vue's syntax. This makes it intuitive and easy to reason about your 3D elements. - Powered by Vite: Experience blazing-fast development cycles with Vite's Hot Module Replacement (HMR) that keeps your scenes updated in real-time, even as your code changes. - Up-to-date Features: Tres.js stays on top of the latest Three.js releases, ensuring you have immediate access to the newest features and functionality. - Thriving Ecosystem: The Tres.js ecosystem offers many resources to enhance your development experience. This includes: - Cientos: A collection of pre-built components and helpers that extend the capabilities of Tres.js, allowing you to focus on building your scene's functionality rather than reinventing the wheel (https://cientos.tresjs.org/). - TresLeches: A powerful state management solution specifically designed for 3D applications built with Tres.js (https://tresleches.tresjs.org/). You can try TresJS online using their official Playground or on their StackBlitz starter. But now, let's dive into a quick code example to showcase the simplicity of creating a 3D scene with TresJS. Setup First, install the package: npm install @tresjs/core three And then, if you are using Typescript, be sure to install the types: npm install @types/three -D If you are using Vite, now you need to modify your vite.config.ts file in this way to make the template compiler work with the custom renderer: ` Create our Scene Imagine a 3D scene as a virtual stage. To bring this stage to life, we need a few key players working together: 1. Scene: Think of this as the container that holds everything in your 3D world. It acts as the canvas where all the objects, lights, and the camera reside, defining the overall environment. 2. Renderer: This is the magician behind the curtain, responsible for taking all the elements in your scene and translating them into what you see on the screen. It performs the complex calculations needed to transform your 3D scene into 2D pixels displayed on your browser. 3. Camera: Like a real camera, this virtual camera defines the perspective from which you view your scene. You can position and adjust the camera to zoom in, zoom out, or explore different angles within your 3D world. - To make our camera dynamic and allow canvas exploration, we are going to leverage the client's OrbitControls component. Below are our examples. You will see that we just include the component in our canvas, and it just works. 4. Objects: These actors bring your scene to life. They can be anything from simple geometric shapes like spheres and cubes to complex models like characters or buildings. You create the visual elements that tell your story by manipulating and animating these objects. Starting from the beginning: to create our Scene with TresJS we just need to use our component TresCanvas in our Vue component's template: ` The TresCanvas component is going to do some setup work behind the scenes: - It creates a WebGLRenderer that automatically updates every frame. - It sets the render loop to be called on every frame based on the browser refresh rate. Using the window-size property, we force the canvas to take the width and height of our full window. So with TresCanvas component we have created our Renderer and our Scene. Let's move to the Camera: ` We just have to add the TresPerspectiveCamera component to our scene. NOTE: It's important that all scene-related components live between the TresCanvas component. Now, only the main actor is missing, let's add some styles and our object inside the scene. Our Vue component will now look like: ` And our scene will be: A Mesh is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space. As we can see, we can achieve the same with TresJS using the TresMesh component, and between the default slots, we are just passing our object (a Box in our example). One interesting thing to notice is that we don't need to import anything. That's because TresJS automatically generates a Vue Component based on the three objects you want to use in PascalCase with a Tres prefix. Now, if we want to add some color to our object the Three.js Material class comes to help us. We need to add: ` Conclusion Tres.js not only supercharges Vue.js applications with stunning 3D graphics, but it also integrates seamlessly with Nuxt.js, enabling you to harness the performance benefits of server-side rendering (SSR) for your 3D creations. This opens the door to building exceptional web experiences that are both interactive and performant. With Tres.js, Vue.js developers can leverage a declarative approach, cutting-edge features, and a vast ecosystem to bring their immersive web visions to life. If you want to elevate your Vue.js projects with a new dimension, Tres.js is an excellent choice to explore....

Jun 12, 2024

3 mins

Vue3D

Authentication with @this-dot/vue-route-guard

@this-dot/vue-route-guard is a Vue library that wraps around the vue-router and extends it to provide helpful methods to handle page guards via token authorization and permissions. Authentication Over the years, web applications have always had authenticated (available to authorized users) and unauthenticated (available to anyone) pages. The most common authentication method used in web applications is the token based authentication. This involves sending some user details to an API (backend), then receiving a token that is stored on the users computer and associated with the web application. When user tries to access an authenticated page before they are logged in, the user is redirected to page where they can get authenticated. There are different things to consider while building a web authentication system, including the type of storage for persisting tokens, pages that need authentication, user roles, and redirect paths. This process can get more complex depending on the application. To help with this, we can use vue-route-guard. It helps us with: ✅ Adding authentication guards to pages ✅ Supporting different storage options for storing token ✅ Storing and retrieving authentication data (user details and token) in a reactive state ✅ Exposes method for matching user permissions Our example application Let's set up an example application you can play with on Stackblitz here. The example application flow: A user who tries to access the /route-guard or /route-guard/about pages without authentication is redirected to the login page. After login, a user without the 'admin' role cannot access the /route-guard/about page and is redirected to /route-guard/no-permission if they try to navigate to it. How to use @this-dot/vue-route-guard Let’s dive in on how to use @this-dot/vue-route-guard First, we install the package with: npm install @this-dot/vue-route-guard or yarn add @this-dot/vue-route-guard Let’s set up the package as a plugin in our application: ` Next, we need to register the plugin in our main file. ` Now that we have setup the vue-route-guard package in our project, we need to update the router setup by adding requiresAuth and access to the meta object of each route in the web application. requiresAuth to pages that need authentication, it takes a boolean. for eample: ` access to pages that also require a role permission along with the authentication. It takes an array of strings, for example: ` For the set up we have in the example app, we added authentication to the ‘/route-guard’ path, and also added admin permission access to the '/route-guard/about' path. ` Using session storage to persist our token, the routes are authenticated and users can’t access certain pages without the right permissions with the setup above. Lets take an example of how to setup using cookie storage. ` Setting user authentication data We can set the user authentication data by importing useGuardand calling the method setToken with the token. Example: ` Check if user has access hasAuthenticationAccess can be accessed from useGuard, and called to check if user has a specific permission Example: ` Access authentication data We can access authentication data by importing useGuard getting the store state. Example: ` Clear Authentication We can clear authentication data by calling clearAuthentication from useGuard. Example: ` Refresh Authentication Refresh authentication calls fetch authentication and updates the state with the new authentication details. We can refresh authentication data by calling refreshAuthentication from useGuard. Example: ` --- Feel free to reachout if you have questions, feedback or want to contribute. You can reach out to us at opensource@thisdot.co. If you would like to check out the source code, feel free to visit our repository....

Dec 16, 2022

3 mins

VueJavaScript

Svelte 5 is Here!

Svelte 5 was finally released after a long time in development. Fortunately, we've been able to test it for some time, and now it has a stable release. Let's dig into its features and why this is such a significant change, even though Svelte 4 code is almost 100% compatible. Svelte syntax everywhere This is one of my favorite additions. Previously, Svelte syntax was limited to a component element. Refactoring code from a component and moving it to a JavaScript file worked differently. Now you can use the .svelte.js or .svelte.ts extension, which allows you to use the same syntax everywhere. It's important to note that it's a way to express that this is not just JS, and what you write may be compiled to something else, just like .svelte files are not just html even though they look very similar. Runes The introduction of runes is one of the most significant changes in Svelte. Many users felt attracted to variables being instantly reactive in previous versions. ` There was, however, a lot of magic underneath and a considerable amount of work from the compiler to make it behave reactively. $state In Svelte 5, a reactive variable has to be explicitly declared using the $state rune, which brings a clear distinction between what is reactive and what isn’t. ` In the previous code, $state is not an actual function being called; it's a hint for the compiler to do something special with this declaration. Rune names always start with a dollar sign ($) and do not need to be imported. However, there’s much more to the changes than just the way we declare reactive variables. Runes bring a lot of new features that make Svelte 5 a great improvement. In Svelte 5, objects or arrays use Proxies to allow for granular reactivity, meaning that individual properties in an object are reactive, even if they are nested objects or arrays. If you modify a property, it will only update that property and will not trigger an update on the whole object. It also supports triggering updates when methods like array.push are called. In previous versions, an assignment was required to trigger an update: ` To have a similar behavior of svelte 4 (no deep reactivity), use the $state.raw() rune. This syntax of .* is common for related features of a rune: $state.raw() will require an assignment to trigger reactivity. ` Because proxies are used, you may need to extract the underlying state instead of the proxy itself. In that case, $state.snapshot() should be used: ` $derived We will use $derived and $derived.by to declare a derived state. The two runes are essentially the same, except one allows us to use a function instead of an expression, allowing for more complex operations to calculate the derived values. ` $effect Effects are useful for running something triggered by a change in state. One of the things you'll note from the $effect rune is that dependencies don't need to be explicit. Those will be picked from reactive values read synchronously in the body of the effect function. ` Something to bear in mind is that these dependencies are picked each time the effect runs. The values read during the last run become the dependencies of the effect. ` Depending on the result of the random method, foo or bar will stop being a dependency of the effect. You should place them outside the condition so they can trigger reruns of the effect. *Variants* of the effect rune are $effect.pre, which runs before a DOM update, and $effect.tracking(), which checks for the context of the effect (true for an effect inside an effect or in the template). $props This rune replaces the export let keywords used in previous versions to define a component's props. To use the $props syntax, we can consider it to return an object with all the properties a component receives. We can use JavaScript syntax to destructure it or use the rest property if we want to retrieve every property not explicitly destructured.. ` $bindable If you want to mutate a prop so that the change flows back to the parent, you can use the $bindable prop to make it work in both directions. A parent component can pass a value to a child component, and the child component is able to modify it, returning the data back to the parent component. ` $inspect The $inspect rune only works in dev mode and will track dependencies deeply. By default, it will call console.log with the provided argument whenever it detects a change. To change the underlying function, use $inspect.with().with): ` $host The host rune gives access to the host element when compiling as a custom element: ` ` Other changes Another important change is that component events are just props in Svelte 5, so you can destructure them using the $props() rune: ` A special children property can be used to project content into a component instead of using slots. Inside the components, use the [@render[(https://svelte.dev/docs/svelte/@render) tag to place them. ` Optional chaining (?.) prevents from attempting to render it if no children are passed in. If you need to render different components in different places (named slots before Svelte 5, you can pass them as any other prop, and use @render with them. Snippets Snippets allow us to declare markup slices and render them conveniently using the render tag (@render). They can take any number of arguments. ` Snippets can also be passed as props to other components. ` ` Conclusion Some exciting changes to the Svelte syntax were introduced while, at the same time, maximum compatibility efforts were made. This was a massive rewrite with numerous improvements in terms of performance, bundle size, and DX. Besides that, a new CLI has been released, making the whole experience of starting a project or adding features delightful. If you haven't tried Svelte before, it's a great time to try it now....

Nov 27, 2024

4 mins

Svelte

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

VueJS Updates - October 2021

🌱 Introduction

🌱 Vue 3.2

🌱 Comunity updates

👩‍💻 IONIC VUE(Liam DeBeasi - Lead Developer, Ionic Framework)

👩‍💻 Vue i18n (Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n)

👩‍💻 Astro (Fred Schott - Creator of Astro)

👩‍💻 QUASAR (Luke Diebold - Lead developer, Agripath & Quasar Core Team)

👩‍💻 VUE Storefront (Filip Rakowski - Co-founder/CTO, Vue StoreFront)

👩‍💻 Nuxt (Daniel Roe - Framework Architect, Nuxt)

👩‍💻 VUETIFY (John Leider - Author & Founder, Vuetify)

👩‍💻 CHAKRA U.I (Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai)

👩‍💻 Nuxt (Anthony Fu - Core team member, Vue & Vite)

🧠 Have Any Questions

Adesoji Temitope

You might also like

3 VueJS Component Libraries Perfect for Beginners

Awesome 3D experience with VueJS and TresJS: a beginner's guide

Authentication with @this-dot/vue-route-guard

Svelte 5 is Here!

Let's innovate together!

You might also like

3 VueJS Component Libraries Perfect for Beginners

Awesome 3D experience with VueJS and TresJS: a beginner's guide

Authentication with @this-dot/vue-route-guard

Svelte 5 is Here!