<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: CertosinoLab</title>
    <description>The latest articles on DEV Community by CertosinoLab (@certosinolab).</description>
    <link>https://dev.to/certosinolab</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1078424%2F1c21f990-fd64-41bf-998b-356eca974d80.png</url>
      <title>DEV Community: CertosinoLab</title>
      <link>https://dev.to/certosinolab</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/certosinolab"/>
    <language>en</language>
    <item>
      <title>Exploring Database-First Approach with Entity Framework in .NET Core 6</title>
      <dc:creator>CertosinoLab</dc:creator>
      <pubDate>Fri, 16 Jun 2023 09:52:19 +0000</pubDate>
      <link>https://dev.to/certosinolab/exploring-database-first-approach-with-entity-framework-in-net-core-6-4ibe</link>
      <guid>https://dev.to/certosinolab/exploring-database-first-approach-with-entity-framework-in-net-core-6-4ibe</guid>
      <description>&lt;h2&gt;
  
  
  Exploring Database-First Approach with Entity Framework in .NET Core 6
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Introduction:&lt;/strong&gt; In the world of software development, the efficient management of databases is crucial for the success of any application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dotnet Core 6&lt;/strong&gt; provides powerful tools and features for working with databases. One popular approach is the &lt;strong&gt;database-first approach&lt;/strong&gt;, which allows developers to design their database schema first and then generate the corresponding models and context using the Entity Framework. In this article, we will explore how to utilize the Entity Framework in a database-first manner using .NET Core 6.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1: Generating the Database Script for Microsoft SQL Server&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To demonstrate the database-first approach, let’s consider the example of an ecommerce application. The database for this application consists of the following tables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Products&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Customers&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Orders&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Order_Details&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Product_Categories&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Categories&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

-- Create Products table
    CREATE TABLE Products (
        ProductId INT PRIMARY KEY,
        Name NVARCHAR(100) NOT NULL,
        Price DECIMAL(10, 2) NOT NULL,
        Description NVARCHAR(MAX)
    );

    -- Create Customers table
    CREATE TABLE Customers (
        CustomerId INT PRIMARY KEY,
        FirstName NVARCHAR(50) NOT NULL,
        LastName NVARCHAR(50) NOT NULL,
        Email NVARCHAR(100) NOT NULL
    );

    -- Create Orders table
    CREATE TABLE Orders (
        OrderId INT PRIMARY KEY,
        CustomerId INT NOT NULL,
        OrderDate DATETIME NOT NULL,
        TotalAmount DECIMAL(10, 2) NOT NULL,
        FOREIGN KEY (CustomerId) REFERENCES Customers(CustomerId)
    );

    -- Create Order_Details table
    CREATE TABLE Order_Details (
        OrderId INT NOT NULL,
        ProductId INT NOT NULL,
        Quantity INT NOT NULL,
        Price DECIMAL(10, 2) NOT NULL,
        PRIMARY KEY (OrderId, ProductId),
        FOREIGN KEY (OrderId) REFERENCES Orders(OrderId),
        FOREIGN KEY (ProductId) REFERENCES Products(ProductId)
    );

    -- Create Categories table
    CREATE TABLE Categories (
        CategoryId INT PRIMARY KEY,
        Name NVARCHAR(50) NOT NULL
    );

    -- Create Product_Categories table
    CREATE TABLE Product_Categories (
        ProductId INT NOT NULL,
        CategoryId INT NOT NULL,
        PRIMARY KEY (ProductId, CategoryId),
        FOREIGN KEY (ProductId) REFERENCES Products(ProductId),
        FOREIGN KEY (CategoryId) REFERENCES Categories(CategoryId)
    );


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Step 2: Create a new Visual Studio Project and install necessary packages&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In &lt;strong&gt;Visual Studio Community 2022&lt;/strong&gt; create for example a Console Application, select .NET 6.0. Now install &lt;strong&gt;Entity Framework Packages&lt;/strong&gt;, we need to install several packages using &lt;strong&gt;NuGet&lt;/strong&gt;. Follow these steps to install the required packages in Visual Studio Community 2022:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Open your project in Visual Studio Community 2022.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Right-click on the project in the Solution Explorer and select “Manage NuGet Packages.”&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the NuGet Package Manager window, search for the following packages one by one:&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Microsoft.EntityFrameworkCore&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Microsoft.EntityFrameworkCore.Design&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Microsoft.EntityFrameworkCore.SqlServer&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Microsoft.EntityFrameworkCore.Tools&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;Select each package and click on the “Install” button to install them into your project.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Step 3: Generating Models and Context Using Scaffold-DbContext&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Once the necessary packages are installed, we can generate the models and the database context using the &lt;strong&gt;Scaffold-DbContext command&lt;/strong&gt;. This command helps in automatically scaffolding the entity types for the existing database schema.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Create the Models directory, you can choose any name of course&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Open the Package Manager Console by navigating to “Tools” -&amp;gt; “NuGet Package Manager” -&amp;gt; “Package Manager Console.”&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;In the Package Manager Console, run the following command:&lt;/p&gt;

&lt;p&gt;PM&amp;gt; Scaffold-DbContext "Data Source=localhost\SQLEXPRESS;Initial Catalog=ecommerce;Integrated Security=True;TrustServerCertificate=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The Scaffold-DbContext command will examine the database schema and generate the corresponding model classes and the database context. These generated classes will be placed in the specified output directory (Models in this case).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2000%2F0%2AanpMBrnAQXqUGVQL.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2000%2F0%2AanpMBrnAQXqUGVQL.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;By following the above steps, we have explored the database-first approach using Entity Framework in .NET Core 6. We started by creating a database script for an ecommerce application and defined the necessary relationships. Then, we installed the required Entity Framework packages using NuGet in Visual Studio Community 2022. Finally, we utilized the Scaffold-DbContext command to automatically generate the model classes and the database context based on the existing database schema.&lt;/p&gt;

&lt;p&gt;Utilizing the Entity Framework in a database-first manner allows developers to seamlessly integrate their existing databases with their .NET Core applications. This approach simplifies the development process by eliminating the need for manual creation of models and context classes, saving time and effort. With .NET Core 6 and Entity Framework, developers can build robust and scalable applications with ease.&lt;/p&gt;

&lt;p&gt;Thank you!&lt;/p&gt;

</description>
      <category>csharp</category>
      <category>sql</category>
      <category>dotnetcore</category>
      <category>dotnet</category>
    </item>
    <item>
      <title>Basic Text Analysis with Python and MongoDB</title>
      <dc:creator>CertosinoLab</dc:creator>
      <pubDate>Sun, 07 May 2023 23:50:41 +0000</pubDate>
      <link>https://dev.to/certosinolab/basic-text-analysis-with-python-and-mongodb-26n2</link>
      <guid>https://dev.to/certosinolab/basic-text-analysis-with-python-and-mongodb-26n2</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Have you ever needed to analyze unstructured text data? Python can help you do just that. In this article, we’ll look at a basic example of parsing unstructured text data located in MongoDB using Python.&lt;/p&gt;

&lt;h2&gt;
  
  
  Let’s Write the Code
&lt;/h2&gt;

&lt;p&gt;First, let’s connect to a MongoDB client and retrieve all the documents from a collection in our database:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import pymongo
import re
from matplotlib import pyplot as plt

# Connect to a MongoDB client
client = pymongo.MongoClient("mongodb://localhost:27017/")
db = client["your_db"]
col = db["your_collection"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Next, we’ll create an empty string that will contain all the offer details from each document:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Create an empty string that contains all texts
all_details_string = ''

# Iterate over all documents in your MongoDB instance
for doc in col.find():
    all_details_string = all_details_string + doc.get('offer_details').upper()

# Create a list containing all words
doc_general = re.split(" |/|\n", all_details_string)

# Get all words count
all_words_count = len(doc_general)
print('Total Occurrences:', all_words_count)

# Set technologies to analise
tec_list = ['Java', 'C#', 'Angular', 'React']
count_list = []
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;On the list of the technologies we want to analyze, iterate through each one, counting the number of occurrences in the concatenated string and adding the count to our list:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;for tec in tec_list:
    count_list.append(doc_general.count(tec.upper()))
    print(tec, 'Total Occurrences:', doc_general.count(tec.upper()))
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;In my environment, i got the following result:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ccNOcam---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/2000/1%2AimBHk1c_EDVfeuzHs8JOdw.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ccNOcam---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/2000/1%2AimBHk1c_EDVfeuzHs8JOdw.jpeg" width="252" height="112"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Finally, we’ll create a bar chart using the Matplotlib library, with the technologies on the x-axis and their respective counts on the y-axis:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Create a bar chart
labels = tec_list
values = count_list
fig, ax = plt.subplots()
ax.bar(labels, values)

# Add labels and title
ax.set_ylabel('Occurrence')
ax.set_xlabel('Technology')
ax.set_title('Occurrences of the chosen technologies')

# Show the chart
plt.show()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MBiYOhGS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/2000/1%2ADKh9wdGI1t__l2foGZl_Rw.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MBiYOhGS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/2000/1%2ADKh9wdGI1t__l2foGZl_Rw.jpeg" width="546" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Complete code and final thoughts
&lt;/h2&gt;

&lt;p&gt;By analyzing unstructured text data, we can gain insights into the most common words and topics. This can be useful for a wide range of applications, such as sentiment analysis, topic modeling, and more.&lt;/p&gt;

&lt;p&gt;Here the full code:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import pymongo
import re
from matplotlib import pyplot as plt

# Connect to a MongoDB client
client = pymongo.MongoClient(“mongodb://localhost:27017/”)
db = client[“your_db”]
col = db[“your_collection”]

# Create an empty string that contains all texts
all_details_string = ‘’
list_detail_offer = []

# Iterate over all documents in your MongoDB instance
for doc in col.find():
 all_details_string = all_details_string + doc.get(‘offer_details’).upper()

# Create a list containing all words
doc_general = re.split(“ |/|\n”, all_details_string)

# Get all words count
all_words_count = len(doc_general)
print(‘Total Occurrences:’, all_words_count)

# Set technologies to analise
tec_list = [‘Java’, ‘C#’, ‘Angular’, ‘React’]
count_list = []
for tec in tec_list:
 count_list.append(doc_general.count(tec.upper()))
 print(tec, ‘Total Occurrences:’, doc_general.count(tec.upper()))

# Create a bar chart
labels = tec_list
values = count_list
fig, ax = plt.subplots()
ax.bar(labels, values)

# Add labels and title
ax.set_ylabel(‘Occurrence’)
ax.set_xlabel(‘Technology’)
ax.set_title(‘Occurrences of the chosen technologies’)

# Show the chart
plt.show()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Thank you!&lt;/p&gt;

</description>
      <category>python</category>
      <category>mongodb</category>
      <category>analysis</category>
      <category>matplotlib</category>
    </item>
    <item>
      <title>Find occurrences of a word in a Pdf file with c# and PdfPig</title>
      <dc:creator>CertosinoLab</dc:creator>
      <pubDate>Sun, 07 May 2023 17:11:59 +0000</pubDate>
      <link>https://dev.to/certosinolab/find-occurrences-of-a-word-in-a-pdf-file-with-c-and-pdfpig-4l0b</link>
      <guid>https://dev.to/certosinolab/find-occurrences-of-a-word-in-a-pdf-file-with-c-and-pdfpig-4l0b</guid>
      <description>&lt;h2&gt;
  
  
  Introducing PdfPig
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;PdfPig&lt;/strong&gt; is an &lt;strong&gt;open source C # library&lt;/strong&gt; that allows us to &lt;strong&gt;extract text&lt;/strong&gt; and other content from &lt;strong&gt;pdfs&lt;/strong&gt;. Its a port of the java pdfbox library. You can find more here: &lt;a href="https://github.com/UglyToad/PdfPig" rel="noopener noreferrer"&gt;https://github.com/UglyToad/PdfPig&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Word Counter
&lt;/h2&gt;

&lt;p&gt;The project will be a simple console application and will have the following structure:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--982H_Wld--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/2000/1%2AQ0XI5ZdQaFMc3gUALdP9bw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--982H_Wld--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/2000/1%2AQ0XI5ZdQaFMc3gUALdP9bw.png" width="369" height="152"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating The Project
&lt;/h2&gt;

&lt;p&gt;With Visual Studio 2022, follow the steps below:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Open Visual Studio 2022&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Create New Project&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Select Console Application in C#&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Set Name and Path&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Choose .NET 5.0 Framework&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now you have the basic structure of a console application. Create a folder and call it pdf. Add a pdf inside this folder. In this tutorial i used a pdf created from this page: &lt;a href="https://en.wikipedia.org/wiki/Cr%C3%AApe" rel="noopener noreferrer"&gt;https://en.wikipedia.org/wiki/Cr%C3%AApe&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To get PdfPig:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;On the search bar print Manage NuGet Packages&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Click on Browse&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Search PdfPig&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Install It&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  The Code
&lt;/h2&gt;

&lt;p&gt;Thanks to PdfPig extracting text from the pdf and calculating the occurrences of a word is trivial, here the full code:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;using System;
using UglyToad.PdfPig;
using UglyToad.PdfPig.Content;

namespace pdf_pig_word_counter
{
    internal class Program
    {
        static void Main(string[] args)
        {
            string wordToFind = "pancake";
            int numberOfOccurrences = 0;

using (PdfDocument document = PdfDocument.Open(@"YOUR PATH\pdf\test.pdf"))
            {
                foreach (Page page in document.GetPages())
                {
                    string pageText = page.Text;

foreach (Word word in page.GetWords())
                    {
                        if (word.Text.ToLower().Contains(wordToFind.ToLower()))
                            numberOfOccurrences++;
                    }
                }
                Console.WriteLine("Total Occurrences: " + numberOfOccurrences);
            }
        }

}
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This program will tell us how many times the word pancake is present in the pdf.&lt;/p&gt;

&lt;p&gt;You can find the project here: &lt;a href="https://github.com/CertosinoLab/mediumarticles/tree/pdf_pig_word_counter" rel="noopener noreferrer"&gt;https://github.com/CertosinoLab/mediumarticles/tree/pdf_pig_word_counter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you!&lt;/p&gt;

</description>
      <category>csharp</category>
      <category>dotnet</category>
      <category>pdf</category>
      <category>backend</category>
    </item>
    <item>
      <title>Using Event Bus in Vue.js 3</title>
      <dc:creator>CertosinoLab</dc:creator>
      <pubDate>Sun, 07 May 2023 16:02:31 +0000</pubDate>
      <link>https://dev.to/certosinolab/using-event-bus-in-vuejs-3-1lg6</link>
      <guid>https://dev.to/certosinolab/using-event-bus-in-vuejs-3-1lg6</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In vue js we have essentially three ways of making unrelated components communicate with each other:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Vuex&lt;/li&gt;
&lt;li&gt;Pinia&lt;/li&gt;
&lt;li&gt;Event Bus&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;On the &lt;a href="https://v3.vuejs.org/guide/migration/events-api.html#event-bus" rel="noopener noreferrer"&gt;official documentation&lt;/a&gt; we can read:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;So generally in the long run it is better to use vuex.&lt;/p&gt;

&lt;p&gt;Also in the &lt;a href="https://v3.vuejs.org/guide/migration/events-api.html#_2-x-syntax" rel="noopener noreferrer"&gt;official documentation&lt;/a&gt; you can see how the Event Bus implementation has changed from Vue 2 to Vue 3&lt;/p&gt;

&lt;h2&gt;
  
  
  Scaffolding the project
&lt;/h2&gt;

&lt;p&gt;In this tutorial we will use Vite build tool to scaffold the project&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# npm 6.x
npm init vite@latest vue-event-bus-1 --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest vue-event-bus-1 -- --template vue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;then we need to install an external library implementing the event emitter interface, in this case &lt;a href="https://github.com/developit/mitt" rel="noopener noreferrer"&gt;mitt&lt;/a&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install --save mitt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  The Project
&lt;/h2&gt;

&lt;p&gt;The project consists of two simple components, &lt;strong&gt;FirstComponent.vue&lt;/strong&gt; and &lt;strong&gt;SecondComponent.vue&lt;/strong&gt;, when we click on the emit event button in &lt;strong&gt;SecondComponent.vue&lt;/strong&gt; String to change in **FirstComponent.vue **becomes String changed thanks to the Event Bus&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4x3gc7azp96llstisf65.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4x3gc7azp96llstisf65.png"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  The Code
&lt;/h2&gt;

&lt;p&gt;In **main.js **we create an instance of mitt which is used globally&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { ***createApp ***} from 'vue'
import mitt from 'mitt'
import App from './App.vue'


const emitter = mitt()
const app = ***createApp***(App)

app.config.globalProperties.emitter = emitter
app.mount('#app')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Now we can access emitter globally, so in &lt;strong&gt;FirstComponent.vue&lt;/strong&gt; we subscribe to the event emitted by &lt;strong&gt;SecondComponent.vue.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let’s take a look to &lt;strong&gt;FirstComponent.vue&lt;/strong&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
export default {
  data: function () {
    return {
      testEvent: 'String to change'
    }
  },
  created (){
    this.emitter.on('my-event', (evt) =&amp;gt; {
      this.testEvent = evt.eventContent;
    })
  }
}
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Now in **SecondComponent.vue **let’s emit the event&lt;/p&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;template&amp;gt;&lt;br&gt;
    &amp;lt;div style="border: 1px solid black;"&amp;gt;&lt;br&gt;
        &amp;lt;h1&amp;gt;Second Component&amp;lt;/h1&amp;gt;&lt;br&gt;
        &amp;lt;button v-on:click="emitMyEvent"&amp;gt;Emit Event&amp;lt;/button&amp;gt;&lt;br&gt;
    &amp;lt;/div&amp;gt;&lt;br&gt;
&amp;lt;/template&amp;gt;

&lt;p&gt;&amp;lt;script&amp;gt;&lt;br&gt;
    export default {&lt;br&gt;
        methods: {&lt;br&gt;
          emitMyEvent() {&lt;br&gt;
              this.emitter.emit('my-event', {'eventContent': 'String changed'})&lt;br&gt;
          }&lt;br&gt;
        }&lt;br&gt;
    }&lt;br&gt;
&amp;lt;/script&amp;gt;&lt;br&gt;
&lt;/p&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
&lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  Github&lt;br&gt;
&lt;/h2&gt;

&lt;p&gt;You can find the code of this tutorial on github: &lt;a href="https://github.com/CertosinoLab/mediumarticles/tree/vue-event-bus-1" rel="noopener noreferrer"&gt;CertosinoLab/mediumarticles at vue-event-bus-1 (github.com)&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you for reading!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>vue</category>
      <category>vite</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
