vuejs | Bogdan's blog https://blog.bogdancarpean.com Code and anything else. Fri, 23 Dec 2022 00:48:59 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 https://blog.bogdancarpean.com/wp-content/uploads/2022/12/icons8-pencil-drawing-96.png vuejs | Bogdan's blog https://blog.bogdancarpean.com 32 32 Vue 3 is out – what should I do next? https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3-is-out-what-should-i-do-next https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/#respond Thu, 24 Sep 2020 03:00:34 +0000 https://blog.bogdancarpean.com/?p=389 Long-awaited version 3 of the popular Vue framework is finally released (after 6 months in beta and release candidate), packed with interesting new things for Vue developers. Named “One Piece” and hosted in a separate repo, vue-next, for a period of time (to avoid being confused with 2.x and also not to be picked by […]

The post Vue 3 is out – what should I do next? first appeared on Bogdan's blog.]]> Long-awaited version 3 of the popular Vue framework is finally released (after 6 months in beta and release candidate), packed with interesting new things for Vue developers.

Named “One Piece” and hosted in a separate repo, vue-next, for a period of time (to avoid being confused with 2.x and also not to be picked by npm install as @latest), the new version promises increased performance, smaller bundle size, and interesting new features to at least intriguing us for discovering more.

Let’s take a first look at what’s new to decide if we go all-in with the new version or wait for the moment.

Vue 3 introduces the Composition API, which addresses the biggest problem (*personal opinion) of Vue, the use of mixins. Mixins are a good way of abstracting code to make it more reusable, but they have some flaws: they hide the code – at some point, a method defined in the mixin is called into the component, but that method is nowhere to be found inside the component. So you start digging up, losing time tracing the method to debug. In the extreme case of mixins nested in other mixins, this job increases in complexity. Other downsides are possible namespace clash (when you define a method in your component with the same name as one in the mixin) and have side effects hard to trace and the possibility of adding too much code in the mixin that is only partly used in a component at the time, this way incorporating to much bloat in components. The new Composition API in Vue 3 is giving us a new way of defining reusable code in Composables, which are more concise and clear as structure, then import these building blocks to construct our components.

Vue 3 promises to be faster and to have a smaller bundle size. On Vue 2, one way of gaining performance was to transform stateful components in functional ones when you have a lot of them in the DOM, to save lost time on register/unregister when re-rendering. On Vue 3, the functional prop was taken out from components (only render functions from now on), but the difference in performance between functional components and stateful ones became negligible, so we are advised to use only stateful components (for the part of us that does not like to use render functions).

Another point that will increase the performance of a Vue 3 application is compiler-informed Virtual DOM. This means that at compile-time, the resulting render functions that go into the bundle are flagged when they contain runtime dynamically changing elements. This way, at runtime, the Virtual DOM is aware of the elements to look for changes and not waste time on watching static ones.

In Vue 3, tree-shaking of Vue internals has been added at compile time. This is a step further in the “progressive framework” approach, allowing us to transport in the bundle only the Vue internals we are actually using. More than this, we have the possibility to manually flag the compiler for the parts it can’t detect automatically for tree-shake.

The new proxy-based reactivity system will speed even further the runtime of our application (check the MDN docs on proxies to find more on this interesting topic).

Some other interesting new features can be found in Vue 3.

The new <teleport> component allows us to render a part of the component template somewhere else in the DOM than the containing component place. Very useful for triggering a modal or a spinner from inside of a component to a more generic point in the DOM (e.g. <body>). Or, when you have a hamburger button on a mobile collapsed layout header to be able to trigger the navigation list outside that layout component.

<suspense> is another component that acts as a wrapper for our component, allowing it to have an alternate template displayed until async operations are executed. Simply put, it allows us to show a loading template until the actual template is loaded and hydrated.

The new Vue 3 now supports multiple elements in the root of the <template>. This means no more wrapping all the elements in the template in one big <div> to avoid an error. Nice addition!!!

<v-model> has a new API in the form of <component v-model:key=”binding”>. This allows us to pass multiple v-model binding for the same component. Multiple two-way bindings on one component. Nice!!!

Filters have been removed from Vue 3 (these are the pipes for those coming, like myself, from the Angular world). From now on, to avoid confusion, only direct method binding {{ convertToCelsius (degrees) }}.

Some additions have been made to the Single File Components syntax. One is the new <script setup>, which is a shorthand to use instead of returning the setup function for the Composition API. The other interesting one is <style vars>, which allows us to pass CSS variables to the style sheet and this way to control dynamically the style at runtime.

For those of you wanting to tweak the framework or even to use parts of Vue to build their own framework, new modular internals of Vue 3 are here, replacing the monolith core of Vue from former versions.

Lastly, the wide use of TypeScript in Vue 3 allows you to have on the fly type inference in your component when you instantiate a variable. And if you already declare the type of your props, you’re already there.

The last thing to mention is that Vue 3 will stay on @next tag until somewhere the end of 2020 when a coordinated switch of all components to @latest will be made. Also, a minor release of Vue 2.7 is scheduled for Q1/2021, having all the 3.x backward compatible features included and the migration build for 3.x. At that point, 2.7 will enter LTS for 18 months.

Now that we have a clearer picture of what Vue 3 brings to the table, we ask ourselves what to do next? And as usual, there are few different answers to this question, depending on the current state of your application.

If you have a small application(s) that work fine and have no benefit from using the above-mentioned changes, just keep them on 2.x.

If you start a new application with Vue, start it directly on Vue 3, this way you have all the new benefits of the framework and your application is future proof for what’s to come for a longer period of time. The only drawback in this situation is that some of the submodules are not yet on stable releases, but I think most are stable enough (beta or RC) to be usable and soon stable.

If your application is a complex one and you were already thinking of some refactoring, could be the time to start architecting for the transition to Vue 3 and by the time you figure it out, hopefully, all the pieces will be in place for a fast migration and the benefits brought by Vue 3.

Else, if you have a complex application that is working fine now, you will want to wait a bit for the migration build to be in place and do a two-step migration to Vue 3 using this build as an intermediary step.

Either way, hope you will enjoy the new iteration of the framework and happy coding!

 

The post Vue 3 is out – what should I do next? first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/feed/ 0 Fetch data needed on component’s template in Vue before render https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/?utm_source=rss&utm_medium=rss&utm_campaign=fetch-data-needed-on-components-template-in-vue-before-render https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/#respond Thu, 01 Aug 2019 06:00:10 +0000 http://blog.bogdancarpean.com/?p=311 Let’s say in your Vue app you have a component that needs to fetch some data in order to display it on the template. This component needs this data on creation in order to be able to bind it on the template. Let’s take the following example: <template> <div class="container"> <p>Name: {{name}}</p> <p>Age: {{age}}</p> </div> […]

The post Fetch data needed on component’s template in Vue before render first appeared on Bogdan's blog.]]> Let’s say in your Vue app you have a component that needs to fetch some data in order to display it on the template. This component needs this data on creation in order to be able to bind it on the template.

Let’s take the following example:

<template>
  <div class="container">
    <p>Name: {{name}}</p>
    <p>Age: {{age}}</p>
  </div>
</template>
<script>
data():{
  return{
    name: null
    age: null
  }
}

created():{
  fetchUser().
    then(res => {
     this.name = res.data.name
     this.age = res.data.age 
    }
    )
}
</script>

In this example, we have a Vue Component that needs to fetch the user name and age before being able to create the template and display them. We use the lifecycle hook created() to fetch the data in the component. This will finally work, because of the reactive nature of Vue, but we are going to have an error in the console telling us that name is undefined. This happens because when we navigate to the component and this one gets rendered, the value of the variables is not yet fetched, the component rendering first the template, then executing the script. So we get the error on the console, then the script is run, data is fetched and displayed.

Let’s see how to do that without having the error on the console:

<template>
 <div class="container" v-if="dataFetched">
   <p>Name: {{name}}</p>
   <p>Age: {{age}}</p>
 </div>
</template>
<script>
data: {
  return {
    name: null
    age: null
    dataFetched: false
  }
},

beforeRouteEnter(to, from, next) {
  fetchUser().
    then(res => {
      next(vm => vm.setUser(res.data)
    })
},

methods: {
  setUser(user){
    this.name = user.name
    this.age = user.age
    this.dataFetched = true
  }
}
</script>

To achieve this, we first use the beforeRouteEnter() guard of the Vue Router that is called before the Router navigates to our component route. This guard has three parameters: to, from and next. From is an object containing the information about the route we are navigating from, also the parameters passed by route, to is the information about the route we are navigating to, next() is the function we call after we executed all we need on the guard to pursue the navigation.

But moving the fetch logic from the lifecycle hook to the guard alone won’t solve our problem because fetch is an asynchronous operation that will start on the guard, then next is called, leading to template rendering before data being fetched and virtually the same error on console.

To achieve this, we use a trick. We declare a boolean in the component, let’s say dataFetched, that we instantiate to false and we use it to trigger with v-if the render of the container div only when the data is fetched. We set the variable to true in the setUser method in the component after data is fetched, this way preventing the render of the template and the error on the console.

Happy coding!!!

The post Fetch data needed on component’s template in Vue before render first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/feed/ 0 How to @extend sass classes or use sass global variables in Vue components https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/#respond Wed, 20 Mar 2019 04:16:21 +0000 http://blog.bogdancarpean.com/?p=274 Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage. Let’s […]

The post How to @extend sass classes or use sass global variables in Vue components first appeared on Bogdan's blog.]]>
Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage.

Let’s assume that you have a class that you want to extend

src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}

Assuming you generated your project with @vue/cli, you have to add the following statement to vue.config.js in order to have file visibility throughout your application

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/style.scss";`
      }
    }
  }
}

Then, you can use @extend on which component you want

<style lang="scss" scoped>
.my_extended_class {
  @extend .my_class_to_extend;
}
</style>

Remember that you have to use sass in both extended and extender sheets for this to work.

The post How to @extend sass classes or use sass global variables in Vue components first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/feed/ 0