VueJS Tutorial – Vue Crash Course 2023 including Composition API & Pinia

In this VueJS tutorial, we will cover the basics of Vue.js as well as introduce the new Vue 3 Composition API and the Pinia state management library. We will walk through setting up a new Vue project, building a simple application, and using the Composition API to manage our application’s state.

What is VueJS?

Vue.js is a progressive JavaScript framework for building user interfaces. It is focused on the view layer of your application and is designed to be simple, flexible, and performant. Vue allows you to build reactive, component-based applications that are easy to maintain and scale.

Setting up a Vue project

To get started with Vue, you will need to have Node.js and npm (Node Package Manager) installed on your machine. You can install Vue CLI, which is a command-line tool for scaffolding new Vue projects, using the following command:

npm install -g @vue/cli

Once Vue CLI is installed, you can create a new Vue project by running:

vue create my-project

Follow the prompts to set up your project. You can choose to use Vue 3 and the Composition API when setting up your project.

Creating a simple Vue application

Now that we have our Vue project set up, let’s create a simple application that displays a list of items.

In your project directory, create a new component called ItemList.vue and add the following code:

<template>
  <div>
    <h1>Item List</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

Now, import and use the ItemList component in your App.vue file:

<template>
  <div>
    <ItemList />
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';

export default {
  components: {
    ItemList
  }
};
</script>

You should see a list of items displayed in your application.

Using the Composition API

The Composition API is a new way of organizing and reusing code in Vue 3. It allows you to define your component’s logic in a more granular and composable way. Let’s refactor our ItemList.vue component using the Composition API.

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]);

    return {
      items
    };
  }
};
</script>

In the above code, we are using the setup function to define our component’s logic. We are using the ref function from Vue to define a reactive reference to our items array.

Using Pinia for state management

Pinia is a new state management library for Vue 3 that is designed to work seamlessly with the Composition API. It provides a simple and reactive way to manage your application’s state.

To use Pinia, install it using the following command:

npm install pinia

Create a new store called itemStore.js in your store directory and add the following code:

import { defineStore } from 'pinia';

export const useItemStore = defineStore({
  id: 'items',
  state: () => ({
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  })
});

Now, import and use the useItemStore store in your ItemList.vue component:

<script>
import { useItemStore } from '@/store/itemStore';

export default {
  setup() {
    const itemStore = useItemStore();

    return {
      items: itemStore.items
    };
  }
};
</script>

In this code, we are importing and using the useItemStore function to create an instance of our store in the ItemList.vue component.

Conclusion

In this tutorial, we covered the basics of Vue.js, introduced the new Vue 3 Composition API, and used the Pinia state management library to manage our application’s state. By following these steps, you should now have a solid understanding of how to build Vue applications using modern Vue features. Happy coding!