VueJs Beginners part 4 - Component 2

I started learning VueJs and tend to share it with you step by step. Slowly, but steadily.

In this episode, we are going to continue Component topic in a different way.

Actually we want to create a new project with Vue CLI and add a component afterwards.

What you need to it so
1- Install vue cli

npm install -g @vue/cli 
# OR
yarn global add @vue/cli 

2- Create a new project

vue create my-first-project
# OR
vue ui

Here we go, now let see to the layout of a component

Basic layout of a component

Components include a template for markup, logic including any state/data/methods as well as the style for that component.

<template>
  <h1> {{title}}</h1>
</template>

<script>
export default {
  props:{
    title: string,
  },
}
</script>

<style scoped>
h1 {
  color: #00FF00;
}
</style>

that's it, we defined a component and we can save and import it in other components.
we can also pass "props" into a component

<Header title="First component" />

as we saw in part 3, a component can have state to determine how specific it behaves and what data is displayed.

Some state may be either local or global

• Vuex is a state manager for global state in larger applications ( if you come from react it's like Redux)

let's create a real example and define a component. this example aims to load a random user (name and avatar) and it's going to be defined as a separate component.

let's play with it and check the code.

If you check the codes you will notice how it looks simple and readable, let me know if you have any questions in the comments.

Vue 3 has the composition API, which amis to resolve code reusability and readability, mostly in larger applications.

I will writing a separate post to demonstrate the composition API.

right now we are working the traditional options API (Vue 2 & Vue 3) that may you see more.

hope you find this post useful
all the best till next part
HASH