VueJS

Take your App to the Next Level with Vue 3

Published Sep 30, 2020

Updated Feb 16, 2023

9 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.

Vue 3 has now officially launched and you are probably wondering how you are going to start migrating your existing Vue 2 apps to Vue 3.

I will be honest with you: a framework migration is always the most tedious and painstaking task you will ever encounter. The good news is that migrating from Vue 2 to Vue 3 is not that difficult and complicated.

As you may know, Vue 3 source code has been written from scratch. However, the maintainers of the framework made sure not to change the API too much. In other words, we will benefit from all the goodies Vue 3 brings, with minimal change. How awesome is that?!

Vue 3 Official Migration Guide

The Vue documentation website has been refreshed to reflect the latest changes. The Vue community has maintained the best documentation to help us learn and use Vue.

The Vue documentation dedicates a section on Vue 3 Migration making mention of the new features, the breaking changes for Vue 2 apps, the supporting libraries like Vue CLI, Vuex, Vue Router and others. The website explicitly states that the team is still working on a dedicated migration guide from Vue 2 to Vue 3.

Meanwhile, until an official migration guide is released, let’s get a little insight on what could possibly be involved if you were to tackle this for yourself.

What to consider before upgrading to Vue 3?

As Vue 3 is still new, there will be some things to keep in mind. There are thousands of applications and third-party libraries created for Vue 2 and even Vue 1.5. It’s going to be a lengthy and time consuming effort to migrate all those libraries to support Vue 3.

Before you attempt any migration process, make sure all the libraries you use are supported by Vue 3. For instance, Vuetify isn't. You can read more about this here.

In addition, if you use any of the third-party libraries, they need to be checked or you might find they have upgraded already.

Moreover, the Vue 3 reactivity system has been rewritten to utilize the new language features in ES2015. Vue 3 uses proxies for its reactivity system instead of the Object.defineProperty() function.

JavaScript proxies are supported by most modern browsers. Unfortunately, Proxies cannot be polyfilled for older browsers; therefore, Vue 3 offers two implementations of it’s reactivity system. One implementation will use proxies for the most recent and modern browsers. The other one will fall back to the Vue 2 way of implementing reactivity to support the older browsers.

Step by Step Migration - Demo

In this section, we'll go through migrating the This Dot - Vue Meetup website. The existing website is built with Vue 2.

It’s essential to follow the steps below as is. Of course, depending on the features you’ve used, you will adjust this workflow to fit your needs and migrate more features in your apps.

Let's start!

Step 1: Create a new Git branch

It’s important to start off with a brand new branch to play around with the migration. This way your main branches, like master or dev, will remain intact without disrupting any live code.

Let’s assume we are branching from the master branch. Run the following command to create a new branch:

git checkout master && git pull
git checkout -b upgrade-to-vue3

Step 2: Install the latest Vue CLI version

Currently, as of the time of writing this article, the latest version of the Vue CLI is 4.5.6.

To install the latest version, run the following command:

npm install -g @vue/cli

Verify the installation by running the following command and making sure it reads as @vue/cli 4.5.6:

vue --version

Upgrading the Vue CLI not only helps in upgrading the existing application, but it also gives you the chance to scaffold a new Vue 3 app in the future.

Step 3: Upgrade the Vue libraries

The next step is to upgrade the Vue NPM packages and all other packages used inside the package.json file.

To start with, open the package.json file and make sure to amend the Vue libraries with the following versions:

"vue": "^3.0.0",
"vue-router": "^4.0.0-beta.11"
"vuex": "^v4.0.0-beta.4"

Now, let’s upgrade the rest of the libraries using the Vue CLI. Run the following command to start upgrading the libraries:

vue upgrade

The command goes through all the libraries you are using inside the package.json file and tries to upgrade them to the latest compatible version.

For example, when I run this command, the Vue CLI detects the Vue libraries that need to be upgraded and prompts for confirmation:

Type Y to continue with the upgrade.

In summary, the upgrade reported the following packages changes, additions, and removal.

While the CLI is upgrading the @vue/cli-plugin-eslint it will also upgrade the current ESLint version installed on your computer. The latest Vue CLI supports ESLint v6. Once again, the Vue CLI prompts for confirmation before upgrading ESLint.

Type Y to continue with the upgrade.

added 131 packages from 157 contributors, removed 34 packages, updated 90 packages, moved 3 packages and audited 1908 packages in 19.798s

The numbers will definitely be different for you and depending on the app.

It’s now time to run the app and make sure you don’t have missing libraries or other problems. In my case, I ran the app and got a few ESLint issues. Luckily, the Vue CLI comes packaged with a command to auto fix ESLint issues. In this case, you run the npm run lint and the Vue CLI handles the rest for you!

Step 4: Add the @vue/compiler-sfc NPM package

The @vue/compiler-sfc package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue single file components into JavaScript. It is used in the vue-loader.

This is an essential component if you are using Single File Components which is the case in most of the Vue apps.

Let’s install this package by running the following command:

npm i @vue/compiler-sfc

Let’s move on and start upgrading the source code to use the latest APIs offered by Vue 3.

Step 5: Upgrade the `main.js` file

Vue 3 changes the way an application is created by introducing the createApp() function. Back in Vue 2 and earlier versions, we used to create a global Vue instance. This approach had several disadvantages. The main one had third-party libraries to making changes to our Vue single App instance.

By introducing createApp(), you can instantiate multiple Vue apps side by side. It creates a context or boundary for your app instance where you do all the registration as you will see shortly.

Typically, a Vue app is started inside the main.js file. Let’s visit this file and make the necessary changes to upgrade to Vue 3.

import Vue from "vue";

import App from "./App.vue";
import GlobalVarMixin from "./mixins/global-variables-mixin";
import router from "./router";

import VueAnalytics from "vue-analytics";

//layouts
import Default from "./1.layouts/l-default.vue";
import Form from "./1.layouts/l-form.vue";
import Content from "./1.layouts/l-content.vue";

Vue.component("l-default", Default);
Vue.component("l-form", Form);
Vue.component("l-content", Content);

Vue.mixin(GlobalVarMixin);

if (process.env.VUE_APP_GOOGLE_ANALYTICS_ID) {
  Vue.use(VueAnalytics, {
    id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID,
    router
  });
} else {
  console.log("Google Analytics not loaded");
}

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

This is a slimmed down version of the original main.js file in the app. Let’s dissect the file one line at a time and upgrade accordingly.

import Vue from "vue";

Replace the line above with:

import { createApp } from "vue";

Let’s replace the code that’s creating the app using the Vue 3 createApp() function.

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

Replace with:

const app = createApp(App);

The app variable now holds a new Vue app instance for us. The router instance will be registered separately.

Let’s update the Vue component registration.

Vue.component("l-default", Default);
Vue.component("l-form", Form);
Vue.component("l-content", Content);

Replace with:

app.component("l-default", Default);
app.component("l-form", Form);
app.component("l-content", Content);

With Vue 3, you register components at the app instance level and not globally.

Let’s update the Vue mixin registration.

Vue.mixin(GlobalVarMixin);

Replace with:

app.mixin(GlobalVarMixin);

Now register the router on the app instance as follows:

app.use(router);

Now let’s register the vue-analytics plugin on the app instance.

if (process.env.VUE_APP_GOOGLE_ANALYTICS_ID) {
  Vue.use(VueAnalytics, {
    id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID,
    router
  });
} else {
  console.log("Google Analytics not loaded");
}

Replace with:

if (process.env.VUE_APP_GOOGLE_ANALYTICS_ID) {
  app.use(VueAnalytics, {
    id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID,
    router
  });
} else {
  console.log("Google Analytics not loaded");
}

The plugin is now installed on the app instance rather than the global Vue instance. This is also valid for any other plugin out there.

Make sure to remove the line below as it’s not needed anymore in Vue 3 apps:

Vue.config.productionTip = false;

Finally, let’s mount the app instance by using the following:

app.mount("#app");

The final version of the upgrade main.js file looks like this:

import { createApp } from "vue";

import App from "./App.vue";
import router from "./router";
import GlobalVarMixin from "./mixins/global-variables-mixin";
import VueAnalytics from "vue-analytics";

//layouts
import Default from "./1.layouts/l-default.vue";
import Form from "./1.layouts/l-form.vue";
import Content from "./1.layouts/l-content.vue";

const app = createApp(App);

app.component("l-default", Default);
app.component("l-form", Form);
app.component("l-content", Content);
app.mixin(GlobalVarMixin);

app.use(router);

if (process.env.VUE_APP_GOOGLE_ANALYTICS_ID) {
  app.use(VueAnalytics, {
    id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID,
    router
  });
} else {
  console.log("Google Analytics not loaded");
}

app.mount("#app");

That’s it!

Step 6: Upgrade the `router.js` file

The Vue Router has undergone changes and it’s now under v4.0.

Let’s review what the current router.js file looks like:

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    ...
  ],
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { selector: to.hash };
    } else if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

Replace the import statements with the following line:

import { createRouter, createWebHashHistory } from "vue-router";

Instead of creating a new instance of the Router object, we will be using the new function provided by Vue Router which is createRouter().

export default createRouter({
  history: createWebHashHistory(),
  routes: [...]
})

The router.js file now exports an instance of the Router object using the createRoute() function. This function expects an input parameter of type object. The routes and history properties are the minimum accepted to pass into this object.

The routes array is still the same as in Vue 2. It’s an array of routes, nothing has changed here.

The createWebHashHistory() function is now used to specify a Hash History mode in the Vue Router. As a side note, depending on what you are using in your app, there is also the createWebHistory() function that sets the mode to HTML 5.

You can read more about History Modes.

Next, we will update the scrollBehavior() function as it has undergone some major changes.

Replace the existing function with the following:

scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: "smooth"
      };
    } else if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }

You can read more about Scroll Behavior in the Vue Router 4.0.

Now, let’s run the app and see if everything works as expected.

When I run the app, I get the following warning in the Dev Tools:

<router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

This warning has to do with Vue Router and the Transition component. You can read more about the Transitions in Vue Router.

Let’s navigate to the App.vue component and check what the current source code is:

 <div>
    <transition :name="transitionName">
      <router-view :key="$route.params.slug || 'default'" />
    </transition>
  </div>

In Vue Router v4.0, you can no longer nest a <router-view> component inside a <transition> component. The fix is simple and provided to you in the documentation.

Replace the above with the following:

<div>
    <router-view :key="$route.params.slug || 'default'" v-slot="{ Component }">
      <transition :name="transitionName">
          <component :is="Component" />
      </transition>
    </router-view>
  </div>

These were all the steps needed to upgrade the Vue Meetup app.

Others

I’d like to draw your attention to a few more things when upgrading your apps to Vue 3.

One of the components in the app had a single slot; that is, the default slot. The way it was used in the Vue 2 app was:

...
<template>
 …
</template>
...

When I ran the app, the component was showing nothing, an empty screen! It seems Vue 2 was more tolerant by not forcing me to specify the name of the slot, even though this is the default slot.

The quick fix in Vue 3 is as follows:

...
<template #default>
 ...
</template>

Something else I didn’t mention is the Vuex v4.0. The same steps that we followed to upgrade the Vue Router can be followed here. The approach is similar.

You can read more about the Vuex v4.0 Breaking Changes.

Conclusion

I am pretty sure we will all face more issues and encounter different hiccups while upgrading our apps. It will all depend on the features of your Vue 2. Remember, everything has a solution! While we wait for the Vue team to share an official migration guide, start trying to upgrade and see how you go.

If you get stuck, feel free to drop me a message on twitter using my Twitter handle @bhaidar.

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)

Bilal Haidar
Author, Developer, and Mentor: Professional ASP.NET 3.5 Security, Membership, and Role Management with C# and VB | A Complete Guide to VueJS
@bhaidar @bhaidar

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

Async Components in Vue 3

Async Components have had their roots in the Vue JS framework since the second version release. However, in Vue 3, they've had a revamped facelift and their API is a well defined and clear API interface. Async components are best used in medium to large apps. When an app is formed out of several hundred components, it's wise not to load all the components at once in a single chunk. Rather, the recommendation is to split the components' packing into a set of smaller packages that get loaded whenever needed asynchronously. While developing, nothing will change in terms of using and placing components inside the section. However, only importing those components will change slightly. Vue 3 offers an intuitive and clear API to help you define the async components. In this article, we'll explore the new Async Components API, delve into the details and show it in action. Async Components In Action Before we go further, here's a link to the Async Components RFC to keep as a reference for later. The new API offers the defineAsyncComponent() method that you use to define the Async Components. This method accepts a callback function. In return, this callback function should return an instance of a Promise. Async Load Inline Defined Component In the simplest form, defining a local async component can be done as follows: ` > You can play with this example at codesandbox.io. Let's focus on the local variable named LocalComponent. This variable is assigned the result of calling the defineAsyncComponent() function. The result is a component named AsyncComponentWrapper that wraps around the loaded component. The callback passed to defineAsyncComponent() function accepts zero parameters and returns a new Promise. The Promise in this case, resolves an inline Vue Component using the Object Literal method that defines the template of the component returned. Figure 1 shows the app running. Async Load Standalone Defined Component The other way to load components async is to have a component defined in its own file and loaded asynchronously when needed. ` The StandaloneComponent is assigned the result of calling the defineAsyncComponent() function. The result is a component named AsyncComponentWrapper that wraps around the loaded component. The callback passed to defineAsyncComponent() function returns the Promise result returned by calling the import() function. The import() function in this context refers to the Dynamic Import feature in JavaScript. If you are running a Vue 3 app using the Vue CLI then the import() function refers to the Webpack Import function. Instead of defining the component-to-be-async-loaded inline, the code imports an existing standalone component: ` Figure 2 shows the app running. > You can play with this example at codesandbox.io Where to define Async Components? There are two main forms of defining async components in a Vue app. You've already seen one form, where the async component is defined locally inside the component. The other option is to define the async component globally at the app level: ` Figure 3 shows the app running. > You can play with this example at codesandbox.io Async Components API Defining an async component can take two forms: the simple usage and the options usage. Simple Usage So far you've seen how to define an async component the simple way. The defineAsyncComponent() method accepts a callback that returns a Promise. ` Options Usage The Async Component API offers a rich API to better control loading components asynchronously. ` > You can play with this example at codesandbox.io. The defineAsyncComponent() method now accepts an object with several options. Let's dissect this object! * loader: It's the bread and butter behind the API. The loader returns a Promise to load the component. Now you can clearly see that the simple usage of the API specifies only a loader! * loadingComponent: Is one you define to show to the user while the API loads the component asynchronously. * errorComponent: You define to show to the user when there is an error loading the component. * delay: It's the time elapse before showing the loadingComponent to the user. * timeout: It's the time elapsed between requesting the component and having it ready to render to the user. * suspensible: By default this property is set to false. This is useful when a component is wrapping a component that makes use of Async Component API to load components asynchronously. If the value of suspensible is set to true, then the component takes precedence in showing a fallback content. The loadingComponent, delay, and other properties of the API will be ignored in this case. If the value was kept false, then the API will take precedence over the component. > You can read more about Suspense in Vue 3. * onErorr: This function has been newly added to the Async Component API in Vue 3. It accepts a few parameters: error, retry, fail, and attempts. When the component fails to load, this function is called. error parameter gives details about the error that occurred. retry is a function callback that you can call to try loading the component again. fail is a function callback that you can call to stop any further trials of loading the component. Finally, the attempts are the number of attempts that were carried out in order to load the component. In brief, that is an introduction to the Async Components API in Vue 3....

Sep 4, 2020

5 mins

Vue

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

In this episode of the Modern Web Podcast, Danny Thompson sits down with Ferdinand Como and Baptiste Leproux from Nuxt Labs to uncover the story behind Nuxt Studio, a tool that's transforming how developers and non-technical users interact with Nuxt applications. Ferdinand and Baptiste share how Nuxt Studio bridges the gap between developer customization and user-friendly content management. Built to empower agencies, freelancers, and their clients, Nuxt Studio combines powerful features like live previews, Vue component integration, and schema-driven forms to make managing content seamless. The conversation also explores the broader mission of Nuxt Labs—building sustainable open-source tools that enhance developer experience and meet real-world needs. With insights into the future of Nuxt Studio and its potential to scale for larger organizations, this episode is a must-listen for anyone passionate about innovation in web development. Chapters 1. Introduction and Setting the Stage (00:00:00) 2. The Vision Behind Nuxt Studio (00:03:10) 3. Nuxt Studio’s Core Features (00:08:45) 4. Challenges in Building Nuxt Studio (00:16:20) 5. Target Audience and Use Cases (00:22:35) 6. Sustainability in Open Source (00:29:00) 7. The Future of Nuxt Studio (00:35:10) 8. Nuxt Studio’s Role in the Nuxt Ecosystem (00:42:30) 9. Closing Thoughts and What’s Next (00:48:00) 10. Sponsor Shoutout and Wrap-Up (00:53:20) Follow Baptiste Leproux and Ferdinand Coumau Baptiste Twitter: https://x.com/_larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/ Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot: thisdot.co...

Nov 20, 2024

2 mins

VueNuxtJS

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.

Take your App to the Next Level with Vue 3

Vue 3 Official Migration Guide

What to consider before upgrading to Vue 3?

Step by Step Migration - Demo

Step 1: Create a new Git branch

Step 2: Install the latest Vue CLI version

Step 3: Upgrade the Vue libraries

Step 4: Add the @vue/compiler-sfc NPM package

Step 5: Upgrade the `main.js` file

Step 6: Upgrade the `router.js` file

Others

Conclusion

Bilal Haidar

You might also like

3 VueJS Component Libraries Perfect for Beginners

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

Async Components in Vue 3

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

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

Async Components in Vue 3

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Vue 3 Official Migration Guide

What to consider before upgrading to Vue 3?

Step by Step Migration - Demo

Step 1: Create a new Git branch

Step 2: Install the latest Vue CLI version

Step 3: Upgrade the Vue libraries

Step 4: Add the @vue/compiler-sfc NPM package

Step 5: Upgrade the main.js file

Step 6: Upgrade the router.js file

Others

Conclusion

Bilal Haidar

3 VueJS Component Libraries Perfect for Beginners

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

Async Components in Vue 3

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Let's innovate together!

3 VueJS Component Libraries Perfect for Beginners

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

Async Components in Vue 3

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Step 5: Upgrade the `main.js` file

Step 6: Upgrade the `router.js` file