DEV Community: Fotis Adamakis

Prop Naming Conventions for Vue Components

Fotis Adamakis — Sat, 24 Jun 2023 13:11:35 +0000

In Programming, there are two extremely challenging tasks: cache invalidation and naming things. Today, we will dive into the latter as we explore the art of naming props for Vue components.

When it comes to naming props, it is essential to follow established conventions for variable names. For example, utilize lower camel case (isEnabled) and keep the names short (less than 30 characters).

However, Vue has its own set of best practices that we should follow. Let’s talk about some tips based on my experience working with it.

1. Content-Aware Naming

It’s important to maximize the information conveyed by the variable name to minimize confusion and make skimming a component easier.

▹ For arrays, opt for plural nouns as variable names, such as items. This choice immediately suggests that the variable represents a collection or group of related elements.

▹ When dealing with numbers, employ prefixes like num or postfixes like count and index to imply numeric values. For example numItems, itemCount, and itemIndex, provide clear indications of the variable’s numeric nature.

▹ When working with objects, use appropriate singular nouns, such as item.

▹ For booleans, use descriptive prefixes like is, can, and has to convey visual or behavioural variations:

is is ideal for signifying visual or behavioral states, like isVisible, isEnabled, or isActive.
can signifies behavioural variations or conditional visual changes. Consider prop names like canToggle or canExpand to clearly express component capabilities.
has indicates the presence of UI elements. Use prefixes like hasCancelButton or hasHeader to indicate whether specific UI elements are present or visible.

2. Descriptive Naming

▹ Props should describe the component itself, focusing on what it does rather than why it does it. Avoid naming props after the current user or environment.

For example:

▹ Instead of hasSubmitPermission, consider hasSubmitButton.

    <MyForm hasSubmitButton="user.canSubmit" />

▹ Rather than isMobileScreen, opt for isCompactLayout.

    <MyForm isCompactLayout="browser.isMobileScreen" />

▹ Avoid naming props after child components. If the props are meant to be passed down to children, use names that describe the component itself.

▹ Use instead of .

▹ Instead of areCommentsLoading, choose isLoadingComments.

▹ Describing the existence of a child component can be misleading. If the goal is to create more space for an icon rather than toggling its presence, consider using isSpacious instead of hasIcon. Remember, hasIcon answers the question of why, not what.

3. Event Handler Props

▹ Prepend on to the prop names that represent event handlers (e.g. onSelect, onClick).

▹ Utilize the handle prefix for handler functions.

    <MyComp @onClick="handleClick" />

▹ Avoid using built-in event handler prop names for custom events. If the native focus/click event is not relevant, use custom names like onSelect instead of onFocus or onClick.

By following these guidelines, you can establish a consistent and meaningful naming convention for props in your Vue application. Thoughtful prop names contribute to better code readability and maintainability, making it easier for you and your team to collaborate effectively.

[Vue 3] Function Expression Vs Function Declaration inside Script Setup

Fotis Adamakis — Sun, 18 Jun 2023 16:20:03 +0000

JavaScript is weird. If you’ve spent more than 5 minutes with the language, you already know that. One of the hardest topics to explain to a non front-end engineer is a function expression and the whole idea of functions being first-class citizens.

In Vue, until recently, all the functions were declared inside the methods option, which made this debate irrelevant. But with the introduction of the Composition API in Vue 3, declaring a function is now possible in both ways.

Let’s explore the differences and which one should be used.

tl;dr Same thing, Use Function Declarations for Readability

Function Declarations

A Function Declaration is the traditional or “normal” way of declaring a function in non-functional programming languages. It begins with the function keyword, followed by the name of the function, a pair of parentheses, and finally, a pair of curly braces that enclose the function body.

Here's an example:

    function greet(name) {
      console.log(`Hello, ${name}!`);
    }

One important characteristic of Function Declarations is that they are hoisted to the top of their scope. This means that regardless of where the Function Declaration is written in the code, it will be available to be called anywhere within the same scope.

For example:

    greet("stranger"); // prints "Hello, stranger!"

    function greet(name) {
      console.log(`Hello, ${name}!`);
    }

Even though the greet() function is called before it is defined in the code, the Function Declaration is hoisted to the top of the scope, so the call is valid, and the greeting is logged to the console.

Function Expressions

On the other hand, a Function Expression is an expression that results in a function. It also uses the function keyword, which is assigned to a variable or a property of an object.

Here's an example:

    const greet = function() {
      console.log("Hello!");
    };

or the same example using an arrow function:

    const greet = () => {
      console.log("Hello!");
    };

One key difference between the two is that Function Expressions are not hoisted. They can only be called after they have been defined.

    greet("stranger"); /* "ReferenceError: 
                           Cannot access 'greet' before 
                           initialization  */

    const greet = function(name) {
      console.log(`Hello, ${name}!`);
    }

Function Expressions are also more flexible than Function Declarations, as they can be used in more contexts, such as being passed as arguments to other functions or used as a method of an object.

    <button id="myButton">Click me!</button>

    <script>
      const myButton = document.querySelector('#myButton');

      myButton.addEventListener('click', function() {
        console.log('Button clicked!');
      });
    </script>

There was a time not long ago that Function Expressions were considered superior because they were not polluting the global scope. But thankfully, ES modules are nowadays widely adopted, and this problem is no longer valid.

So are they the same thing? Actually,** YES**! Nowadays, it is actually down to personal preference on which one to choose. And my strong preference is using Function Declarations. To demonstrate why let's review a Vue component using both approaches.

Function declaration:

    <script setup>
    import { debounce } from "debounce";
    import { ref, watch } from "vue";

    const searchTerm = ref("");
    const products = ref([]);

    watch(searchTerm, debounce(performSearch, 600));

    async function performSearch() {
      if (searchTerm.value === "") {
        products.value = [];
            return;
      }
      if (searchTerm.value.length < 2) {
        return;
      }
      const searchUrl = getSearchUrl();
      const response = await (await fetch(searchUrl)).json();
      products.value = response.products;
    }

    function getSearchUrl() {
      const url = "https://dummyjson.com/products/search";
        const params = {
        q: searchTerm.value,
            limit: "5"
      };
      const searchParams = new URLSearchParams(params);
      return `${url}?${searchParams}`;
    };

    function clearSearch() {
      searchTerm.value = "";
      products.value = [];
    }

    </script>

Function expression:

    <script setup>
    import { debounce } from "debounce";
    import { ref, watch } from "vue";

    const searchTerm = ref("");
    const products = ref([]);

    const performSearch = async () => {
      if (searchTerm.value === "") {
        products.value = [];
            return;
      }
      if (searchTerm.value.length < 2) {
        return;
      }

      const searchUrl = getSearchUrl();
      const response = await (await fetch(searchUrl)).json();

      products.value = response.products;
    }

    watch(searchTerm, debounce(performSearch, 600));

    const getSearchUrl = () => {
      const url = "https://dummyjson.com/products/search";
        const params = {
        q: searchTerm.value,
            limit: "5"
      };

      const searchParams = new URLSearchParams(params);
      return `${url}?${searchParams}`;
    };

    const clearSearch = () => {
      searchTerm.value = "";
      products.value = [];
    }

    </script>

As you already know, everything declared inside the script setup is automatically available in the template. And being able to identify methods from the data or computed variables is much easier when using Function Declarations since they all start with the function keyword. The difference is subtle, but after all, the best code is what other people can easily understand.

What is your preference? Leave a comment below.

8 Tips for Writing Better Unit Tests

Fotis Adamakis — Sun, 18 Jun 2023 16:15:30 +0000

Unit tests are an essential part of every successful software application. They help identify bugs early and ensure that the code is working as expected. Let me list some widely adopted key strategies that can help you write better code and improve the quality of your codebase.

1. Arrange, Act, and Assert

The Arrange, Act, and Assert (AAA) is a widely used technique in unit testing. It involves breaking down a test into three distinct phases:

Arranging the test data.
Performing the Action or method call.
Asserting the results.

To apply the AAA pattern, you should first arrange the test by setting up the necessary mocks and component instance. Then, you should act by performing the action or method call that you want to test. Finally, you should assert the results by checking that the output of the method call matches the expected output.

For example, given the following simple counter component written in Vue Options API:

    // Counter.vue
    export default {
      data() {
        return {
          counter: 0
        }
      },
      methods: {
        increment() {
          this.counter++
        }
      }
    }

Testing it with the AAA approach is pretty straightforward:

    // Counter.spec.js
    import { shallowMount } from '@vue/test-utils'
    import Counter from '@/components/Counter.vue'

    describe('Counter.vue', () => {
      it('increments the counter when the increment method is called', () => {
        // Arrange
        const wrapper = shallowMount(Counter)

        // Act
        wrapper.vm.increment()

        // Assert
        expect(wrapper.vm.counter).toBe(1)
      })
    })

2. Descriptive Names and Descriptions

Clear and concise test names and descriptions are essential for effectively communicating the purpose and scope of the test and making it easier to understand and maintain them.

To write good test names and descriptions, you should use descriptive and meaningful names that accurately reflect the purpose of the test. You should also include relevant details in the description, such as the input data and expected output.

For example, a lazily written title gives little information about the test case:

    describe('Counter.vue', () => {
      it('increment', () => {
        ...
      })
    })

In contrast, when one of the following fails, the problem will be apparent.

    describe('Counter.vue', () => {
      it('increments the counter when the increase button is pressed', () => {
        ...
      })
      it('prevents the counter value of being negative when the counter is zero and the decrement button is pressed', () => {
        ...
      })
    })

3. Fast

Unit tests should be fast to ensure a seamless development workflow. Quick test execution allows for prompt feedback, making it easier to identify and fix issues. To create speedy tests, avoid external dependencies and minimize I/O operations. Utilize mocks and stubs to simulate dependencies and focus on testing small, isolated pieces of code.

4. Deterministic

Deterministic tests are tests that produce the same output every time they are run. They are important because they help ensure that the tests are reliable and repeatable. To write deterministic tests, avoid using random data and external sources that can change. Use repeatable inputs and keep test environments consistent. Also, avoid using shared global resources that other tests can modify.

5. Comprehensive

A well-rounded unit test assesses both successful execution and potential failures (happy & unhappy paths). It’s vital to test functions using valid inputs to confirm expected results and invalid inputs to identify potential issues. Furthermore, validate error handling by examining proper responses to thrown exceptions during path execution.

6. Test-driven Development

Test-driven development (TDD) is a technique of writing tests before or during the development process. It ensures that the code is testable and that the tests cover all the necessary scenarios.

To implement TDD, start by writing a failing test that covers a specific scenario or requirement. Then, write the minimum amount of code necessary to pass the test. Finally, refactor the code to improve its design and maintainability.

7. Using Mocks

Mocks simulate the behaviour of external dependencies or objects. They are important because they help isolate the code being tested and make it easier to write deterministic tests.

To use mocks efficiently, start by identifying external dependencies that must be mocked. Then, generate a mock/stub object that mimics the behaviour of the dependency. This provides full control of returned values and the ability to track invocations and their associated parameters.

8. Run on CI/CD

By integrating unit tests into your development pipeline and ensuring their successful execution, you can prevent potential issues from slipping into production environments.

Conclusion

Treating unit tests as first-class citizens means giving them the same level of importance as production code. This mindset ensures that tests are consistently written, well-maintained, and updated as necessary.

Taking the time to invest in proper unit testing techniques will save you time and effort in the long run and result in more robust and efficient applications.

Advanced Data Fetching with Vue Query

Fotis Adamakis — Sun, 18 Jun 2023 16:11:36 +0000

One of the most challenging aspects of building a modern, large-scale application is data fetching. Features such as loading and error states, pagination, filtering, sorting, caching and many more can increase complexity and often bloat the application with a lot of boilerplate code.

That’s where the Vue Query library comes in. It handles and simplifies data fetching with a declarative syntax and treats all of those repetitive tasks for us, behind the scenes.

Understanding Vue Query

Vue query is not a replacement for Axios or fetch. It is an abstraction layer on top of them.

The challenges when managing server state is different and more complicated than managing client state. We need to solve:

Caching… (possibly the hardest thing to do in programming)
Deduping multiple requests for the same data into a single request
Updating out-of-date data in the background
Knowing when data is out of date
Reflecting updates to data as quickly as possible
Performance optimizations like pagination and lazy loading
Managing memory and garbage collection of server state
Memoizing query results with structural sharing

Vue Query is awesome because it hides all of this complexity from us. It is configured by default based on best practices but also provides a way to change this configuration if needed.

Basic Example Usage

Let me showcase the library by building the following simple application with you.

On a page level, we need to fetch all the products, display them in a table and have some simple additional logic to select one of them.

    <!-- Page component without Vue-Query -->
    <script setup>
    import { ref } from "vue";
    import BoringTable from "@/components/BoringTable.vue";
    import ProductModal from "@/components/ProductModal.vue";

    const data = ref();
    const loading = ref(false);

    async function fetchData() {
      loading.value = true;
      const response = await fetch(
        `https://dummyjson.com/products?limit=10`
      ).then((res) => res.json());
      data.value = response.products;
      loading.value = false;
    }

    fetchData();

    const selectedProduct = ref();

    function onSelect(item) {
      selectedProduct.value = item;
    }
    </script>

    <template>
      <div class="container">
        <ProductModal
          v-if="selectedProduct"
          :product-id="selectedProduct.id"
          @close="selectedProduct = null"
        />
        <BoringTable :items="data" v-if="!loading" @select="onSelect" />
      </div>
    </template>

In case of a product selection, we will show a modal and fetch the additional product information while a loading state is shown.

    <!-- Modal component without Vue-Query -->
    <script setup>
    import { ref } from "vue";
    import GridLoader from 'vue-spinner/src/GridLoader.vue'

    const props = defineProps({
      productId: {
        type: String,
        required: true,
      },
    });

    const emit = defineEmits(["close"]);

    const product = ref();
    const loading = ref(false);

    async function fetchProduct() {
      loading.value = true;
      const response = await fetch(
        `https://dummyjson.com/products/${props.productId}`
      ).then((res) => res.json());
      product.value = response;
      loading.value = false;
    }

    fetchProduct();
    </script>

    <template>
      <div class="modal">
        <div class="modal__content" v-if="loading">
          <GridLoader />
        </div>
        <div class="modal__content" v-else-if="product">
          // modal content omitted
        </div>
      </div>
      <div class="modal-overlay" @click="emit('close')"></div>
    </template>

Adding Vue Query

The library comes preconfigured with aggressive but sane defaults. This means that for basic usage we don’t have to do much.

    <script setup>
    import { useQuery } from "vue-query";

    function fetchData() {
      // Make api call here
    }

    const { isLoading, data } = useQuery(
      "uniqueKey",
      fetchData
    );
    </script>

    <template>
      {{ isLoading }}
      {{ data }}
    </template>

In the example above:

uniqueKey is a unique identifier used for caching
fetchData is a function that returns a promise with the API call
isLoading indicates if the API call has been fulfilled yet
data is the response to the API call

Let's incorporate this into our example:

    <!-- Page component with Vue-Query -->
    <script setup>
    import { ref } from "vue";
    import { useQuery } from "vue-query";

    import BoringTable from "@/components/BoringTable.vue";
    import OptimisedProductModal from "@/components/OptimisedProductModal.vue";

    async function fetchData() {
      return await fetch(`https://dummyjson.com/products?limit=10`).then((res) => res.json());
    }

    const { isLoading, data } = useQuery(
      "products",
      fetchData
    );

    const selectedProduct = ref();

    function onSelect(item) {
      selectedProduct.value = item;
    }
    </script>

    <template>
      <div class="container">
        <OptimisedProductModal
          v-if="selectedProduct"
          :product-id="selectedProduct.id"
          @close="selectedProduct = null"
        />
        <BoringTable :items="data.products" v-if="!isLoading" @select="onSelect" />
      </div>
    </template>

The fetch function is now simplified since the loading state is handled by the library.

The same applies to the modal component:

    <!-- Modal component with Vue-Query -->
    <script setup>
    import GridLoader from 'vue-spinner/src/GridLoader.vue'
    import { useQuery } from "vue-query";

    const props = defineProps({
      productId: {
        type: String,
        required: true,
      },
    });

    const emit = defineEmits(["close"]);

    async function fetchProduct() {
      return await fetch(
        `https://dummyjson.com/products/${props.productId}`
      ).then((res) => res.json());
    }

    const { isLoading, data: product } = useQuery(
      ["product", props.productId],
      fetchProduct
    );

    </script>

    <template>
      <div class="modal">
        <div class="modal__content" v-if="isLoading">
          <GridLoader />
        </div>
        <div class="modal__content" v-else-if="product">
          // modal content omitted
        </div>
      </div>
      <div class="modal-overlay" @click="emit('close')"></div>
    </template>

Two things to notice above:

useQuery returns the response with the name data and in order to rename it we can use es6 destructure like this const { data: product } = useQuery(...) This is also useful when multiple queries are performed on the same page.
A simple string for identifier will not work since the same function will be used for all the products. We need to provide the product id as well ["product", props.productId]

We didn't do much but we got a lot out of the box. First of all, the performance improvement from caching when re-visiting a product is evident even without network throttling.

Try this out yourself

By default, cached data are considered stale. They are re-fetched automatically in the background when:

New instances of the query mount
The window is refocused
The network is reconnected.
The query is optionally configured with a re-fetch interval.

Additionally, queries that fail are silently retried 3 times, with exponential backoff delay before capturing and displaying an error to the UI.

Adding Error Handling

So far our code has good faith that the API call will not fail. But in a real-world application, this is not always the case. Error handling should be implemented within a try-catch block and some additional variables would be needed to handle the error state. Thankfully vue-query provides a more intuitive way of this by providing an isError and error variables.

    <script setup>
    import { useQuery } from "vue-query";

    function fetchData() {
      // Make api call here
    }

    const { data, isError, error } = useQuery(
      "uniqueKey",
      fetchData
    );
    </script>

    <template>
      {{ data }}
      <template v-if="isError">
        An error has occurred: {{ error }}
      </template>
    </template>

Conclusion

In conclusion, Vue Query simplifies data fetching by replacing complex boilerplate code with a few lines of intuitive Vue Query logic. This improves maintainability and allows for seamlessly wiring up new server data sources.

The direct impact is faster and more responsive applications, potentially saving on bandwidth and increasing memory performance. Additionally, some advanced features we didn't mention such as prefetching, paginated queries, dependent queries offer further flexibility and should cover all of your needs.

If you are working on a medium to large-scale application you should definitely consider adding Vue Query to your codebase.

Book Recommendations for Software Engineers

Fotis Adamakis — Mon, 15 Aug 2022 14:20:37 +0000

Reading is a great way to spend your time. You expand your knowledge while stimulating your creativity. This can improve both your personal and professional life. Medium and dev.to are great sources of quality articles. Additionally, books and audiobooks can offer you tons of information about technical or soft skills.

So here are the 7 most interesting books that I can genuinely recommend to make you a better Software Engineer.

Algorithms to Live By

Algorithms to Live By explains computer science algorithms in plain language and points out how relevant they are to our lives by solving problems we all encounter every day. It explains why their relevancy isn’t limited to the digital world and how you can make better decisions by strategically using the right algorithm at the right time, for example in dating, at home or in the office. You can feel getting smarter with every page of this book.

Goodreads

Digital Minimalism

Digital Minimalism shows us where to draw the line with technology and how taking time off our digital devices is the key to living a focused life in a noisy world. The book is all about how we use technology in our lives and how society has been transformed as a result of the latest technological development. It questions the benefits social media bring into your life and if these benefits outweigh the costs.

Goodreads

Deep Work

Another one from the same author and similar vibes. Deep work is the ability to focus without distraction on a cognitively demanding task. It’s a skill that allows you to quickly master complicated information and produce better results in less time. This book will make you better at what you do and provide the sense of true fulfilment that comes from craftsmanship.

Goodreads

Remote — Office not Required

This book published in 2013, years before the new remote work reality happened, but it’s now more relevant than ever. It’s a great resource from a company that has been working fully remotely since day one and can give you great insights on what to expect and how to handle remotely working efficiently.

Goodreads, Basecamp page

The 10x Rule

The 10x Rule is based on the idea that people underestimate their abilities in the long term and that we should make our goals and dreams 10 times bigger. This, combined with massive action towards completing them, will make you stand out and do extraordinary things in your life.

Goodreads

Extreme Programming Explained

Extreme Programming (XP) is successful because it stresses customer satisfaction. Instead of delivering everything you could possibly want on some date far in the future, this process delivers the software you need as you need it. Extreme Programming empowers software engineers to confidently respond to changing customer requirements, even late in the life cycle.

Goodreads, Full review about XP methodology

The Phoenix Project

The Phoenix Project is different. It’s a novel about IT and DevOps, but it's full will valuable stories and lessons. The book’s characters reveal through their actions why it’s so important for organizations to put security first and tear down the silos that have traditionally existed between development and operations teams.

Goodreads

I hope you enjoyed this list, and apologies if I missed your favourite one. I will really appreciate any recommendations in the comments below.

VueUse - The library that makes Vue 3 worth the upgrade

Fotis Adamakis — Mon, 15 Aug 2022 13:24:00 +0000

Composition API promotes a much better paradigm of sharing code between components. Explicit dependencies and namespacing by design enable us to share code even between different projects. This is the main idea behind VueUse.

VueUse is a collection of 200+ essential utility functions for interacting with various APIs like browser, state, network, animation, time and more.

A small sample of these utilities enables you to:

use the clipboard API (demo below)
reactive time ago (demo below)
watch debounced or throttled
create virtual lists with ease
create fancy favicons or page titles
track window size and focus
track the visibility of an element within the viewport
create a zone where files can be dropped (demo below)
make elements draggable
create reactive LocalStorage/SessionStorage

and so many more!

Extensible with add-ons

The core package aims to be lightweight and dependence free. Integration with popular packages is supported using add-ons. This ensures a consistent API style.

Some existing add-ons currently are:

More information about VueUse addons here.

Examples

Let’s explore some examples from the official VueUse docs.

Dropzone

Creates a zone where files can be dropped.

<script setup lang="ts">
import { useDropZone } from '@vueuse/core'

const dropZoneRef = ref<HTMLDivElement>()

function onDrop(files: File[] | null) {
  // called when files are dropped on zone
}

const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</script>

<template>
  <div ref="dropZoneRef">
    Drop files here
  </div>
</template>

Dropzone interactive demo

Clipboard

Reactive Clipboard API.

import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { 
    text, 
    copy, 
    copied, 
    isSupported 
} = useClipboard({ source })

<button @click='copy()'>
  <!-- by default, `copied` will be reset in 1.5s -->
  <span v-if='!copied'>Copy</span>
  <span v-else>Copied!</span>
</button>

Clipboard interactive demo

Click outside utility

Listen for clicks outside of an element.

<template>
  <div ref="target">
    Hello world
  </div>
  <div>
    Outside element
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
export default {
  setup() {
    const target = ref(null)
    onClickOutside(target, (event) => console.log(event))
    return { target }
  }
}
</script>

Click outside interactive demo

Parallax

_Create a parallax effect. It uses useDeviceOrientation and fallback to useMouse if orientation is not supported.

Parallax interactive demo

WatchDebounced

Something that you definitely have implemented in the past. A debounced watch.

import { watchDebounced } from '@vueuse/core'

watchDebounced(
  source,
  () => { console.log('changed!') },
  { debounce: 500, maxWait: 1000 },
)

WatchDebounced interactive demo

TimeAgo

import { useTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2021, 0, 1))

useTimeAgo interactive demo

Conclusion

We only touched the surface, but hopefully, you got the idea of how awesome this library is. There are hundreds of utilities to explore (currently 274!), and the number is constantly rising. Of course, you can contribute your own If you find something’s missing.

Libraries like VueUse are leading the way to make Vue awesome again. They promote code reusability and improve the overall developer experience.

Dive into the awesome documentation, spread the word and maybe give the author a credit (or buy him a coffee ☕️).

Vue 3 -New features, Breaking changes & a Migration path

Fotis Adamakis — Fri, 25 Sep 2020 18:18:35 +0000

Vue 3 is here and everyone is looking for a way to migrate and start using it as soon as possible. There are several new features but also a lot of work done to improve performance and bundle size under the hood that makes this version a real candidate for the best client-side framework out there. The catch? New syntax, deprecations, and some breaking changes might make your migration plan slightly harder than expected. Let’s dive in and see what you should expect.

Mounting

The first thing that you will encounter is the difference in initializing your app. In Vue 2 you have to use Vue constructor with a render function and the $mount method like this

    import Vue from 'vue'

    import App from './app.vue'

    const app = new Vue({
      render: (h) => h(App),
    }).$mount('#app')

In Vue 3 this is simplified with a more elegant syntax

    import { createApp } from "vue";

    import App from "./App.vue";

    createApp(App).mount("#app");

Fragments

In Vue 2, multi-root components were not supported. The solution was to enclose your code in a wrapper element.

    <!-- Layout.vue -->
    <template>
      <div>
        <header>...</header>
        <main>...</main>
        <footer>...</footer>
      </div>
    </template>

In Vue 3, components now can have multiple root nodes. This enables eliminating wrapper elements and writing cleaner markup.

    <!-- Layout.vue -->
    <template>
      <header>...</header>
      <main>...</main>
      <footer>...</footer>
    </template>

Teleport

A not so common problem but very difficult to solve is having part of your component mounted in a different position in DOM than the Vue component hierarchy.

A common scenario for this is creating a component that includes a full-screen modal. In most cases, you’d want the modal’s logic to live within the component, but the positioning of the modal quickly becomes difficult to solve through CSS, or requires a change in component composition.

This can now easily achieved with the use of the teleport feature like this

    app.component('app-modal', {
      template: `
        <button @click="isOpen = true">
            Open modal
        </button>

        <teleport to="body">
          <div v-if="isOpen" class="modal">
              I'm a teleported modal
          </div>
        </teleport>
      `,
      data() {
        return { 
          isOpen: false
        }
      }
    })

You can still interact and pass props to it like being inside the component!

Emits

How you emit events hasn’t changed but you can declare the emits in your component like this

    export default {
      name: 'componentName',
      emits: ['eventName']
    }

This is not mandatory but should be considered a best practice because it enables self-documenting code

Composition API

A very controversial topic when first introduced back in June 2019 was the new Function-based Component API. This is a lot different than the existing Options API and caused a lot of confusion on the first sight. The good thing is that the existing Options API is not deprecated and everything is purely additive for handling advanced use cases and mainly replace mixins usage that admittedly has caused a lot of problems in large scale applications.

The new Composition API was designed for logic organization, encapsulations, and reuse which makes it extremely flexible, performant (no component instances involved) and makes easier tracking the source of every component property.

A simple example of how a component is structured by using the new API is the following

    <template>
      <button @click="increment">
        Count is: {{ state.count }}, double is: {{ state.double }}
      </button>
    </template>

    <script>
    import { reactive, computed } from 'vue'

    export default {
      setup() {
        const state = reactive({
          count: 0,
          double: computed(() => state.count * 2)
        })

        function increment() {
          state.count++
        }

        return {
          state,
          increment
        }
      }
    }
    </script>

The main drawback is that it will require some extra time to get familiar with it which doesn’t really align with the easy learning curve that Vue 2 is known. The good thing is that you don’t need to rewrite your existing components using the new API and you don’t need to use it everywhere as well.
Read more about the new Composition API RFC

Functional Components

Functional components are deprecated. The main reason to use a functional component was performance which is now no longer relevant since the changes done under the hood in component instantiation and compilation make this difference insignificant. This change unfortunately will require some manual migration.

Scoped slots

A change that might be painful for you to refactor if you use them is the removal of scoped slots. They are now merged with slots.

    // Vue 2 Syntax
    this.$scopedSlots.header

    // Vue 3 Syntax
    this.$slots.header()

Event Bus

$on, $once, and $off methods are removed from the Vue instance, so in Vue 3 it can’t be used to create an event bus. Vue docs recommend using mitt library. It’s tiny and has the same API as Vue 2.

Filters

In Vue 3 filters are removed! You can actually implement the same functionality in a small plugin but the fact that the pipe of the filter conflicts with the Javascript bitwise operator means that expressions with filters are not valid. That's why the recommendation is using a method instead.

    // Vue 2 Syntax
    {{ msg | format }}

    // Vue 3 Alternative
    {{ format(msg) }}

The drawback of this is that chaining multiple methods is not that elegant as chaining multiple filters but that’s a small price to pay.

    // Vue 2 Syntax
    msg | uppercase | reverse | pluralize
    // Vue 3 Alternative
    pluralize(reverse(uppercase(msg)))

IE11 support

IE11 is not supported from the main bundle. If you are unlucky enough to have to support it, you will have to include some additional files with your bundle to polyfill things like proxies that are used from Vue 3.

Vuex

Vuex 4 has also released to accompany Vue 3. The API remains the same and the code will be compatible with the previous version. Disappointed? You shouldn’t be! That’s one less thing to migrate and with Vuex 5 just around the corner be sure that changes are coming. Removal of Mutations and nested modules only to name a few.
Read more about the proposal for Vuex 5

Migration plan to Vue 3

Read the official migration guide
Replace Event bus usages with mitt library
Update scoped slots to be regular slots
Replace filter with methods
Upgrade to Vue 2.7 — This version will have deprecation warnings for every feature that is not compatible with Vue 3 and will guide you with documentation links on how to handle every case.
Upgrade to Vue 3

Just have in mind that this will probably be a long process and might take up to one year, depending on your project size and the deprecated features you are currently using. It might not be your first priority but given the massive performance improvement and the elegant new Composition API, this is definitely worth it!

Hacktoberfest 2020 — Contribute to Open Source & get an awesome T-shirt

Fotis Adamakis — Fri, 25 Sep 2020 18:05:45 +0000

You might be new to programming or you might have several years of experience under your belt but when it comes to open source contribution everyone is equally intimidated and scared at the beginning. There is a combination of impostor syndrome and the lack of organization and guidance in open source projects that drives many people away. This is why Hacktoberfest was created.

What is Hacktoberfest

Hacktoberfest is an initiative from the open source community that aims to enable people to contribute while also making open source projects discoverable and more friendly to newcomers.

All you have to do is 4 pull requests to open source projects during the month of October.

Signing up

I’m in! How to get started?

Sign up for a github account (Or use your existing one)
Sign up for the Hacktoberfest using your github account
Make 4 pull requests to open source projects. You can track your progress here
Receive swag including an awesome T-shirt

The hard part is making 4 pull requests. You can optionally create or contribute to a project that will change the world but there are also many easier ways to get it done.

Ways to contribute

Discover issues using github hacktoberfest and good-first-issue labels
Create documentation for software you use
Translate existing documentation to your language
Report and fix bugs
Refactor code following clean code best practices
Increase test coverage
Create your own repo

Pull request to your own repo count but making quality contributions to a third party is highly encouraged.

Your first pull request

You are probably already familiar with git and the only change in the workflow is that the final merge is done by the maintainer through a pull request

Clone repository
Create a branch
🧙‍♂️️️️ Make changes 🧙‍♂️
Commit and push changes
Create a pull request

Conclusion

Contributing to open source is scary but retrospectively not that hard. In addition, the feeling of accomplishment is extremely rewarding. Hacktoberfest initiative is a great opportunity to get you started and get an awesome T-shirt to proudly wear throughout the year. I have seen that it’s always an excuse to open a discussion with someone in meetups and conferences.

Let’s get the hacking started!

Additional resources:

Hacktoberfest beginners guide
First Timers Only
Get Started Contributing to Open Source Projects
An Introduction to Open Source