Sharing or Passing Data Between components in Vuejs Vue 3

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Sharing or Passing Data Between components in Vuejs Vue 3.

Guy’s here you can see more Vue 3 Bootstrap 5 working example:

1. Bootstrap 5 Popover working in Vue 3.
2. Bootstrap 5 Tooltip working in Vue 3.
3. Bootstrap5 Popup Modal with Forms in Vue 3.

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

1. Vuejs
2. Bootstrap 5

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have  bootstrap 5.1.0 modules in our Vue 3 application:

npm install -g @vue/cli

vue create vueboot5

cd vueboot5

npm i bootstrap

npm i @popperjs/core

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into src/App.vue file to check the final output on browser:

<template>
  <div class="container mt-5 mb-5">
    <DemoComponent :username="user.username" />
  </div>
</template>

<script>
//importing bootstrap 5
import "bootstrap/dist/css/bootstrap.min.css";

import DemoComponent from "./components/DemoComponent.vue"
 
export default {
 components: {
   DemoComponent
 },
 data() {
   return {
     user: {
       username: 'Ajay'
     }
   }
 }
}
</script>

3. Now friends we need to create components folder inside scr folder and then create new file DemoComponent.vue inside src/components folder and add below code inside it:

<template>
 <div>
   {{username}}
 </div>
</template>
 
<script>
export default {
 props: ['username']
}
</script>

Now we are done friends  also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks