DEV Community 👩‍💻👨‍💻

Cover image for VueJs Beginners part 4 - Component 2

Posted on

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 
Enter fullscreen mode Exit fullscreen mode

2- Create a new project

vue create my-first-project
# OR
vue ui
Enter fullscreen mode Exit fullscreen mode

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.

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

export default {
    title: string,

<style scoped>
h1 {
  color: #00FF00;
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

ali_dot_ali profile image
Ali Ali • Edited on

still option api.
editing - but you mentioned about compostion api at end of article.

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!