Before diving into the tutorial below, I want to mention that the documentation for Vue is really good. The page on composables explains the basics really well and will get you 90 percent of the way there. I am writing this article because I think the examples in the docs could go a little deeper in explaining how things can work inside of a composable. I will be reiterating some of the information from the docs, but I will also provide an example of a more complex composable.

Here’s what we’ll cover:

• Why Use Composables?

• Simple Composable Example

• Complex Composable Example

  • Util function for fetch

  • useAsyncState Composable

  • Usage in a component

• Conclusion

Why Use Composables?

Composables let you reuse stateful logic across your apps. Whenever there is logic that is used in more than two places, we typically want to pull that logic into its own function. Most of the time, that logic is considered “stateless”, meaning that it takes an input and returns an output. The docs mention date formatting, but this could also include something like currency calculations or string validation.

In modern web applications, there are often pieces of logic that require managing state over time. Inside a typical component, we have the ability to adapt the application depending on the “state” of different variables within the component. Sometimes that logic, or at least pieces of that logic, are reused throughout the app.

For example, in an e-commerce application, you might have logic to increase and decrease the quantity of a product a person is adding to their cart. This logic could be used both on the product page, and inside the cart itself.

The look and feel of both those places will be different, so re-using a full component wouldn’t make sense – but we still want to centralize the logic to make the code easier to maintain. That is where Composables come in.

(It is worth noting that not everything needs to be a composable. Logic that is only used in a single component shouldn’t be refactored into a composable until necessary.)

Simple Composable Example

Let’s take a look at a simple counter example. Here is some code for a very simple Counter component.

<script setup lang="ts">
  import { ref } from 'vue'
  import type { Ref } from 'vue'

  const count: Ref<number> = ref(0)
  const increment = () => {
    count.value++
  }
  const decrement = () => {
    count.value--
  }
</script>

<template>
  <div class="bg-teal-100 border-2 border-gray-800 rounded-xl p-4 w-64">
    <div class="text-center mb-4">
      <span class="text-lg font-medium text-gray-800">Count: {{ count }}</span>
    </div>

    <div class="flex gap-2 justify-center">
      <button
        @click="decrement"
        class="bg-red-100 border-2 border-gray-800 rounded px-4 py-0 text-gray-800 font-medium hover:bg-red-500 transition-colors"
      >
        -
      </button>

      <button
        @click="count = 0"
        class="bg-gray-100 border-2 border-gray-800 rounded px-4 py-0 text-gray-800 font-medium hover:bg-gray-300 transition-colors"
      >
        Reset
      </button>

      <button
        @click="increment"
        class="bg-green-100 border-2 border-gray-800 rounded px-4 py-0 text-gray-800 font-medium hover:bg-green-500 transition-colors"
      >
        +
      </button>
    </div>
  </div>
</template>

The output of that component would look like this:

This works great, but if we end up needing this same counter logic in another component with a completely different look and feel, then we would end up repeating the logic. We can extract the logic into a composable and access the same stateful logic anywhere we need to.

// counter.ts
import { ref } from 'vue'
import type { Ref } from 'vue'

export default function useCounter(): Readonly<{
  count: Ref<number>
  increment: () => void
  decrement: () => void
}> {
  const count: Ref<number> = ref(0)
  const increment = () => {
    count.value++
  }
  const decrement = () => {
    count.value--
  }
  return { count, increment, decrement }
}

Then we update the script tag in the component to use the composable:

<script setup>
import { useCounter } from '@/counter.ts'

const { count, increment, decrement } = useCounter()
</script>

<template>
  ...
</template>

Now we can use this logic in multiple components throughout the app.

You will notice that only the logic is copied and each component still has its own copy of the count state. Using a composable does not mean the state is shared across components, only the stateful logic.

Complex Composable Example

In the Vue docs, they give an example of using a composable to handle async data fetching. There are a couple of issues I have with the example they give. The main one is that the error handling is not robust for real world applications. Given that they just want to showcase a straightforward use of composables, this is understandable. But I wanted to showcase a more realistic implementation.

Util function for fetch

Before getting into the composable, we need to set up a util function for the fetch API. This is because we want to make sure every request throws an error if it fails. The fetch API doesn’t throw an error if the request responds with an error status. We have to check the response.ok in order to verify the status, and then throw an error if necessary.

// utils.ts
export async function handleFetch(url: string, options: RequestInit = {}): Promise<Response> {
  const res = await fetch(url, options)
  if (!res.ok) {
    const err = await res.text()
    throw new Error(err)
  }
  return res
}

useAsyncState Composable

When working with async state, the requests can be in a few different states:

• Pending

• Resolved

• Rejected

In addition to these states, we want to track the data or the error that comes back from the request.

// useAsyncState.ts
import { shallowRef } from 'vue'
import type { Ref } from 'vue'

// Specify a type for the response
export type AsyncState<T> = {
  data: Ref<T | null>
  error: Ref<Error | null>
  isPending: Ref<boolean>
  isResolved: Ref<boolean>
  isRejected: Ref<boolean>
}

export default function useAsyncState<T>(promise: Promise<T>): AsyncState<T> {
  // I used shallowRef instead of ref to avoid deep reactivity
  // I only care about the top-level properties being reactive
  const data = shallowRef<T | null>(null)
  const error = shallowRef<Error | null>(null)
  const isPending = shallowRef(false)
  const isResolved = shallowRef(false)
  const isRejected = shallowRef(false)

  data.value = null
  error.value = null
  isPending.value = true
  isRejected.value = false
  isResolved.value = false

  promise.then((result) => {
    data.value = result
    isPending.value = false
    isResolved.value = true
  }).catch(err => {
    error.value = err
    isPending.value = false
    isRejected.value = true
  })

  return { data, error, isPending, isResolved, isRejected }
}

This gives a few more explicit properties for the different states, rather than relying on the values in data and error. You’ll also notice that this composable takes in a promise rather than a URL string like the docs show. Different endpoints will have different response types and I wanted to be able to handle those outside of this composable.

Usage in a component

I have set up an endpoint that will wait a random number of seconds before responding either successfully or with an error. My component is calling this endpoint using the composable and using the data from the composable to update the template.

With the error state showing like this:

You can see a working example at https://understanding-composables.pages.dev/.

To make this a bit easier to explain and understand, I am breaking up the <script> tag and the <template> sections of the component.

Script

<script lang="ts" setup>
import { ref, unref } from 'vue'
import type { Ref } from 'vue'
import { useAsyncState } from '@/composables'
import type { AsyncState } from '@/composables'
import { handleFetch } from '@/utils'

interface RandomResponse {
  msg: string
}

async function getRandomResponse(): Promise<RandomResponse> {
  const response = await handleFetch('https://briancbarrow.com/api/random')
  const text = await response.text()
  return { msg: text }
}

const randomResponseData: Ref<AsyncState<RandomResponse> | null> = ref(null)

const handleMakeRequest = async () => {
    const data = getRandomResponse()
    randomResponseData.value = useAsyncState(data)
}
</script>

Here we have a method, getRandomResponse that calls an endpoint and returns a promise. That promise is then passed into the useAsyncState when handleMakeRequest is called. That puts the full return value into the randomResponseData ref which we can then use inside the template.

Rather than show the full template, I will just show a few portions of it.

Here you can see two different buttons being used depending on the state. I am using a separate button element to indicate the “loading” state, but in practice you can use the composable properties to set the disabled property of the button and change the text.

        <button
          v-if="
            !randomResponseData?.isPending &&
            !randomResponseData?.error &&
            !randomResponseData?.data
          "
          class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          @click="handleMakeRequest"
        >
          Make Request
        </button>

        <!-- Loading State Button -->
        <button
          v-if="randomResponseData?.isPending"
          disabled
          class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg opacity-75 cursor-not-allowed flex items-center mx-auto"
        >
          <svg
            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              class="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              stroke-width="4"
            ></circle>
            <path
              class="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
          </svg>
          Loading...
        </button>

Here are a couple of the rows from the table:

<tr class="divide-x divide-gray-200">
  <td class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0">
    isPending
  </td>
  <td
    class="p-4 text-sm whitespace-nowrap text-gray-500"
    :class="randomResponseData?.isPending ? 'bg-blue-500' : 'bg-gray-300'"
  ></td>
  <td class="p-4 text-sm whitespace-nowrap text-gray-500">
    {{ randomResponseData?.isPending }}
  </td>
</tr>

<tr class="divide-x divide-gray-200">
  <td class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0">
    data
  </td>
  <td
    class="p-4 text-sm whitespace-nowrap text-gray-500"
    :class="randomResponseData?.data ? 'bg-green-500' : 'bg-gray-300'"
  ></td>
  <td class="p-4 text-sm whitespace-nowrap text-gray-500">
    {{ unref(randomResponseData?.data)?.msg }}
  </td>
</tr>

In those tr tags, you can see the template rendering different things depending on the state coming from the composable.

For a more complete look at the code, you can visit the GitHub repo. You can also look at how VueUse, a collection of composables, handles similar functionality: https://vueuse.org/core/useAsyncState/

In a future article, I’ll dive into their implementation.

Conclusion

Composables are an incredibly useful tool in Vue 3. As projects grow in size and scope, knowing how and when to use composables can improve the maintainability of the project over the long term.

The key is identifying when you have stateful logic that needs to be reused across components, then extracting it into a well-structured composable that handles edge cases properly.

For more real world examples you can check out the VueUse library and repo.

Whether you're a seasoned developer or just starting out, this step-by-step tutorial will help you understand the fundamentals of integrating MSW into your Vue project, enabling you to build and test your application more effectively without relying on a real backend.

Let's dive in and bring your e-commerce vision to life!

Table of Contents

• What is a Mock Server?
• How to Set Up a Vue E-commerce App
• Getting Started With Vue E-commerce App
• How to Build an E-commerce App Using Vue 3
• How to Build the User Interface
• Conclusion

In this article, we'll walk through the process of building an e-commerce app from scratch using Vue.js and the power of MSW for mocking API calls.

Before we start with the project, let’s take an overview of the e-commerce pages that we are going to build for the app. It'll have mainly two pages:

• Shop page.
• Product details page.

Shop page: This page will display all the products of the store.

Mock-up created using Pika Style

Product details page: This page displays all the details regarding the product.

Before building an e-commerce app, let’s clarify some basics about the mock server.

What is a Mock Server?

A mock server simply mimics a real server by providing predefined responses for an API request. A mock server is useful for testing and development as it can generate different test cases without risking the integrity of real data. You can configure a mock server to return specific responses, error messages and timeouts.

There are various tools/libraries out there that you can use to set up a mock server. In this article, we will use MSW (Mock Service Worker) to set up a mock server. You can learn more about MSW from its official documentation.

Now, let’s set up a mock server (using MSW) for our Vue e-commerce app.

How to Set Up a Vue E-commerce App

For our e-commerce app, we'll need two API endpoints. Below is a brief description of API endpoints.

1. /api/apps/ecommerce/products: This will fetch the data of all products we have in store.
2. /api/apps/ecommerce/product/:id: This will fetch the product details of a specific product by its ID.

We'll use a free Vue admin dashboard that offers essential features such as:

• Beautifully crafted components
• Auto import capabilities
• Premade layout, and so on.

These features will make it easier and faster to develop the Vue e-commerce app.

Getting Started With Vue E-commerce App

There are plenty of Vue.js themes available that you can consider for creating an e-commerce app.

Here, we'll use the Materio Vue.js admin free template. First, go to the GitHub repo.

To clone it, simply open your terminal. Navigate to the directory where you would like to clone the project and run the following command:

git clone <https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free.git>

Open the project in your favorite IDE and run the command below in the terminal to install all the dependencies.

We'll use the pnpm package manager as recommended by the dashboard we're using. However, you are free to use your preferred package manager like npm or yarn.

pnpm install
# npm install
# yarn

Next, install MSW in your project directory:

pnpm add -D msw@latest
# npm install msw@latest --save-dev
# yarn install -D msw@latest

Run the theme using the following command:

pnpm run dev
# npm run dev
# yarn run dev

Next, initialize MSW using the command below. Running this command will create a mockServiceWorker.js file in a public directory.

npx msw init public

To manage all API endpoints and fake data, create a new folder called fake-server inside the plugins directory. We’ll set up our mock server in this fake-server directory. Create an index.ts file and paste the below code to register MSW.

// file: src/plugins/fake-server/index.ts

import { setupWorker } from 'msw/browser'

const worker = setupWorker()

export default function () {
  const workerUrl = `${import.meta.env.BASE_URL ?? '/'}mockServiceWorker.js`

  worker.start({
    serviceWorker: {
      url: workerUrl,
    },
    onUnhandledRequest: 'bypass',
  })
}

Congratulations, you have now successfully set up MSW in the project. Now, we can start building an e-commerce app.

How to Build an E-commerce App Using Vue 3

In the fake-server directory, create a handlers directory for maintaining handlers. Inside the handlers directory, create an ecommerce directory for the e-commerce app’s handlers. Then, create a db.ts file inside ecommerce to store the fake data.

Your folder structure should look like this:

.
└── fake-server/
    └── handlers/
        └── ecommerce/
            └── db.ts

I have generated some fake data for displaying products. Let’s place this fake data in db.ts:

// file: src/plugins/fake-server/handlers/ecommerce/db.ts

import product5 from '@images/eCommerce/1.png'
import product3 from '@images/eCommerce/11.png'
import product6 from '@images/eCommerce/18.png'
import product1 from '@images/eCommerce/27.png'
import product4 from '@images/eCommerce/5.png'
import product2 from '@images/eCommerce/7.png'

export const db = {
  products: [
    {
      id: 1,
      productName: 'Gaming Mouse',
      category: 'Electronics',
      price: '$999',
      image: product1,
      rating: 5,
      productDescription: 'A mouse specifically designed for gamers.',
    },
    {
      id: 2,
      productName: 'Google Home',
      category: 'Electronics',
      price: '$25.50',
      image: product2,
      rating: 4,
      productDescription: 'A Smart speaker with Google Assistant.',
    },
    {
      id: 3,
      productName: 'INZCOU Running Shoes',
      category: 'Shoes',
      price: '$36.98',
      image: product3,
      rating: 5,
      productDescription: 'Lightweight Tennis Shoes Non Slip Gym Workout Shoes',
    },
    {
      id: 4,
      productName: 'MacBook Pro 16',
      category: 'Electronics',
      price: '$2648.95',
      image: product4,
      rating: 5,
      productDescription: 'Laptop M2 Pro chip with 12‑core CPU and 19‑core GPU',
    },
    {
      id: 5,
      productName: 'Apple Watch Series 7',
      category: 'Office',
      price: '$799',
      image: product5,
      rating: 5,
      productDescription: 'Starlight Aluminum Case with Starlight Sport Band.',
    },
    {
      id: 6,
      productName: 'Meta Quest 2',
      category: 'Office',
      price: '$299',
      image: product6,
      rating: 5,
      productDescription: 'Advanced All-In-One Virtual Reality Headset',
    },
  ],
}

As discussed in this app structure, we need to define two endpoints. Create an index.ts file in your e-commerce handler and define your endpoints in it:

// file: src/plugins/fake-server/handlers/ecommerce/index.ts

import { HttpResponse, http } from 'msw'
import { db } from './db'

export const handlerEcommerce = [
  http.get('/api/ecommerce/products', () => {
    const products = db.products

    return HttpResponse.json(products, { status: 200 })
  }),

  http.get('/api/ecommerce/products/:id', ({ params }) => {
    const id = Number(params.id)

    const product = db.products.find(item => item.id === id)

    if (!product)
      return HttpResponse.error()

    return HttpResponse.json(product, { status: 200 })
  }),
]

Register the handler in the index.ts file in the fake-server direrctory. The updated index.ts file should look like this:

// file: src/plugins/fake-server/index.ts

import { setupWorker } from 'msw/browser'

import { handlerEcommerce } from './handlers/ecommerce'

const worker = setupWorker(...handlerEcommerce)

export default function () {
  const workerUrl = `${import.meta.env.BASE_URL ?? '/'}mockServiceWorker.js`

  worker.start({
    serviceWorker: {
      url: workerUrl,
    },
    onUnhandledRequest: 'bypass',
  })
}

The setup of the mock server has been completed. Whenever you make an API call to your endpoint, MSW will intercept the HTTP request using the service worker and will provide a predefined response from the handlers.

Congratulations, you have successfully set up the mock server👍.🏻

How to Build the User Interface

Let's move on to the UI part of the e-commerce app. Create an apps directory in the pages directory. Inside apps, create a new directory called ecommerce. We'll place the e-commerce app in this directory.

The folder structure should look like this:

.
└── pages/
    └── apps/
        └── ecommerce

The first page is a product listing page. Create a new directory of products inside ecommerce. Create an index.vue file in the products directory and paste the following code snippet:

// file: src/pages/apps/ecommerce/products/index.vue

<script setup lang="ts">
const router = useRouter()
const { data: products } = await useFetch('/api/ecommerce/products').json()
</script>

<template>
  <div>
    <div class="d-flex flex-wrap gap-6 justify-center">
      <template
        v-for="(product, index) in products"
        :key="index"
      >
        <VCard width="300">
          <VImg
            :src="product.image"
            cover
          />
          <VCardItem>
            <VCardTitle>{{ product.productName }}</VCardTitle>
            <VCardSubtitle>Price: {{ product.price }}</VCardSubtitle>
          </VCardItem>
          <VCardText>
            <p class="mb-0">
              {{ product.productDescription }}
            </p>
            <VRating
              :model-value="product.rating"
              readonly
              density="compact"
              class="my-3"
            />
            <VBtn
              block
              @click="() => router.push({ path: `/apps/ecommerce/products/${product.id}` })"
            >
              Buy Now
            </VBtn>
          </VCardText>
        </VCard>
      </template>
    </div>
  </div>
</template>

In this product listing page, we made an API call to the '/api/ecommerce/products' endpoint. This endpoint returns the array of all products. We'll use this data to display products on the page.

The second page in this app is the product display page. On this page, we'll display all the details of the product. To do so, create a new file [id].vue inside the products directory. Below is the code for the product details page.

Note that I have used Lorem ipsum to keep it generic. You can replace it with your desired description.

// file: src/pages/apps/ecommerce/products/[id].vue

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

const { data: product } = await useFetch(`/api/ecommerce/products/${route.params.id}`).json()
const quantity = ref(0)
</script>

<template>
  <VCard class="pa-10">
    <VRow>
      <VCol
        md="4"
        cols="12"
      >
        <div class="py-10 bg-background d-flex justify-center">
          <VImg
            :src="product.image"
            width="auto"
            max-height="40vh"
          />
        </div>
      </VCol>

      <VCol
        md="8"
        cols="12"
      >
        <div>
          <div class="text-h3 mb-4">
            {{ product.productName }}
          </div>

          <div class="text-h4 mb-4">
            {{ product.price }}
          </div>

          <div>
            <p>
              {{ product.productDescription }}
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor eum quam dolore ratione aspernatur nobis. Assumenda dicta voluptatibus reiciendis repudiandae?
            </p>
            <VRating
              :model-value="product.rating"
              readonly
              density="compact"
              class="mb-2 d-block"
            />

            <VList>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
            </VList>

            <VBtn
              prepend-icon="ri-shopping-cart-line"
              class="text-center"
              size="large"
              @click="quantity += 1"
            >
              Add to Cart
            </VBtn>
          </div>
        </div>
      </VCol>
    </VRow>
  </VCard>
  <div class="text-center">
    <VBtn
      class="my-6 text-center"
      @click="() => router.push({ path: '/apps/ecommerce/products' })"
    >
      Continue Shopping
    </VBtn>
  </div>
</template>

On this page, we made an API request to our second API endpoint: /api/ecommerce/products/:id. This endpoint returns product details related to a given product ID. We will use this data on our page to display product details.

Let’s add routes for the e-commerce app. All the routes are located in the src/plugins/router/routes.ts file. In the file, add the e-commerce app’s routes.

// file: src/plugins/router/routes.ts
{
  path: '/apps/ecommerce/products',
  component: () => import('@/pages/apps/ecommerce/products/index.vue'),
},
{
  name: 'apps-ecommerce-products-id',
  path: '/apps/ecommerce/products/:id',
  component: () => import('@/pages/apps/ecommerce/products/[id].vue'),
},

Now, let’s add an e-commerce app to our navigation menu. We'll list all our menu items and groups in NavItems.vue components. We'll use a VerticalNavGroup component for adding a nav group and a VerticleNavLink component for adding a nav item. For adding an e-commerce app in the navigation menu, add the code below in the Apps & Pages section.

//file: src/layouts/components/NavItems.vue

<VerticalNavGroup
    :item="{
      title: 'e-commerce',
      icon: 'ri-shopping-cart-line',
    }"
  >
    <VerticalNavLink
      :item="{
        title: 'Shop',
        to: '/apps/ecommerce/products',
      }"
    />
    <VerticalNavLink
      :item="{
        title: 'Product',
        to: { name: 'apps-ecommerce-products-id', params: { id: 1 } },
      }"
    />
</VerticalNavGroup>

Congrats, you’ve built a Vue e-commerce app using Vue.js and MSW. You can visit the dev server to see the e-commerce app we just crafted.

Conclusion

In this article, you built an e-commerce app using Vue.js and MSW to mock API calls. We created two main pages: the shop page to display products and the product details page to show product information.

The mock server setup helped us to create a realistic development environment without building an actual backend. At the end of this guide, you had a working e-commerce app prototype. This setup provides a strong foundation for further customization and development.

For the complete implementation of the e-commerce app built in this article, please refer to this GitHub repository: https://github.com/themeselection/e-commerce-app.

I hope you all find this article helpful. In case you want to develop a full-fledged e-commerce app, you can use the pre-built Vuejs admin template as it offers many components and features that can be helpful in creating a professional e-commerce app.

I have prepared this article with help of Jayendrasinh Solanki. He is an expert in VueJS with over 7 years of experience. BTW, he is followed by Vue creator Evan You! Isn't it great?

Some helpful guides for e-commerce product development:

• How to Develop a Reusable eCommerce Platform (freecodecamp.org).
• How to Create an eCommerce Website Using WooCommerce (freecodecamp.org).

These tools can also help boost productivity by offering reusable components and abstracting complex tasks like DOM manipulation and state management. This allows developers to focus on application logic rather than writing repetitive code.

Frameworks promote code maintainability through modular development, making it easier to modify or replace individual components. They also make collaboration easier as multiple developers can work simultaneously on different parts of an application.

Benefits of Using Libraries and Frameworks

With vibrant developer communities, these frameworks offer extensive support, tutorials, and documentation. Leveraging frontend frameworks empowers developers to create beautiful and highly functional web applications that meet modern user expectations.

Frontend frameworks provide numerous benefits for beginners in web development as well. They offer a structured approach and pre-built components, simplifying the development process and saving time.

Beginners can leverage the power of these frameworks to create visually appealing and interactive user interfaces without needing to start from scratch.

The extensive community support and resources available for popular tools like React, Angular, and Vue make it easier for beginners to learn and grow their skills. By embracing frontend frameworks, beginners can accelerate their learning curve, and build impressive web applications.

Learn Vanilla JavaScript First

Before delving into JavaScript frameworks, it is crucial for you to grasp the basics of plain JavaScript. Understanding the fundamentals of JavaScript, such as variables, functions, and control structures lays a strong foundation for learning and utilizing frameworks effectively.

By learning the core concepts of JavaScript, you also gain insights into how the language works and can solve problems without relying solely on the abstractions provided by frameworks. This knowledge empowers you to write cleaner, more efficient code and arms you with the ability to customize and extend frameworks to suit their specific needs.

Understanding JavaScript also enables you to troubleshoot issues, comprehend error messages, and make informed decisions when working with frameworks. By mastering the basics, you can unlock the full potential of JavaScript frameworks and leverage their power to create dynamic, interactive web applications.

Table of Contents

• What is React?

• What is Angular?

• What is Vue.js?

• Comparing JavaScript Frameworks

• How to Choose the Right Framework for Your Project

• Resources for Learning JS Frameworks and Getting Started

• Conclusion

What is React?

React Logo

React is a popular JavaScript library used for building user interfaces. It follows a component-based architecture, where UI elements are divided into reusable components.

React utilizes a Virtual DOM, which is a lightweight representation of the actual DOM, to efficiently update and render components. This approach allows for fast and responsive user interfaces.

React promotes a one-way data flow, making it easier to manage application state and update UI components efficiently. It provides lifecycle methods that allow developers to perform actions at different stages of a component's lifecycle, such as fetching data, handling events, and updating the UI accordingly.

It has a robust ecosystem with various libraries and tools that extend its capabilities. These include React Router for routing, Redux for state management, and React Native for building native mobile applications. This ecosystem offers solutions to common development challenges and facilitates rapid development.

React's component-based architecture, Virtual DOM, JSX syntax, and extensive ecosystem make it a powerful choice for building dynamic and reusable user interfaces. Understanding the basics of React sets the foundation for exploring its features and capabilities in more depth.

React Setup: Installation, Project Creation, and Server Start

To get started with React, you need to set up your development environment by installing React, creating a new project, and starting the development server.

Below outlines the steps to install React, create a new React project, and start the development server:

Step 1: Install Node.js and npm (if not already installed)

Step 2: Open your terminal or command prompt.

Step 3: Install the Create React App CLI globally by running the following command:

Install React App

npm install -g create-react-app

Step 4: Create a new React project by running the following command:

Create React app project

npx create-react-app my-react-app

Note: Replace my-react-app with the desired name of your project.

Step 5: Once the project is created, navigate to the project directory by running the following command:

Change Directory

cd my-react-app

Step 6: Start the development server by running the following command:

Starting React Development Server

npm start

This will start the development server, and you can view your React app by visiting http://localhost:3000 in your browser.

These steps will install React, create a new React project with Create React App, and start the development server. You can then begin building your React application.

React and its Key Features

React's many features make it one of the most popular choices among developers. Its range of powerful features empowers developers to build dynamic and interactive user interfaces in a flexible and efficient way.

Component-Based Architecture

React follows a component-based approach, where UI elements are broken down into reusable and self-contained components. This modularity promotes code reusability, maintainability, and scalability.

In React, the component-based architecture is a fundamental concept that promotes code reusability and modular development. Components are the building blocks of a React application, and they can be thought of as self-contained, reusable pieces of code that encapsulate both the UI (User Interface) and the logic.

Check out this snippet of code that exemplifies the creation of a simple functional component in React:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

In the code snippet above, we define a functional component called Greeting. This component takes in a prop called name and renders a greeting message with the value of the name prop.

The component-based architecture allows you to break down your application into smaller, reusable components. Each component can have its own state, props, and lifecycle methods, making it easier to manage and maintain your codebase. Components can be composed and nested together to create complex user interfaces.

By separating your application into components, you can achieve better organization, code reusability, and maintainability. You can easily reuse components across different parts of your application or even in different projects. This approach also enables a more efficient development workflow, as components can be developed and tested independently.

With the component-based architecture in React, you have the flexibility to build modular, scalable, and maintainable applications, making React a powerful tool for front-end development.

Virtual DOM

React utilizes a Virtual DOM, which is a lightweight representation of the actual DOM. By using the Virtual DOM, React efficiently updates and renders components, resulting in faster and smoother user interfaces.

One of the key features of React is its use of a Virtual DOM (Document Object Model). The Virtual DOM is a lightweight representation of the actual DOM, a tree-like structure that represents the HTML elements of a web page. It acts as an intermediary layer between the application's logic and the browser's rendering engine.

Dive into this code example to understand how the Virtual DOM works in React:

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}

export default Counter;

In the code snippet above, we have a Counter component that displays a count value and a button to increment the count. Whenever the button is clicked, the handleClick function updates the component's state using setState, triggering a re-render of the component.

Behind the scenes, React creates a Virtual DOM representation of the component's UI structure. When a state change occurs, React efficiently calculates the difference between the previous Virtual DOM and the updated Virtual DOM. This process is known as reconciliation.

React then applies the necessary changes to the actual DOM, updating only the specific parts that have changed. This approach helps optimize performance by minimizing DOM manipulations and updates.

By using the Virtual DOM, React provides a more efficient way of updating the user interface. It reduces the number of direct manipulations on the actual DOM, resulting in faster rendering and improved application performance.

The Virtual DOM also enables a declarative programming model, where developers specify how the UI should look based on the application's state, and React takes care of updating the actual DOM accordingly.

JSX Syntax

React introduced JSX, a syntax extension that combines JavaScript and XML-like syntax. It allows developers to write HTML-like code within JavaScript, making component templates more intuitive and readable.

JSX (JavaScript XML) is an important feature of React that allows developers to write HTML-like syntax directly within JavaScript code. It provides a concise and expressive way to define the structure and appearance of React components.

Let's explore a practical code snippet that demonstrates the usage of JSX in React:

import React from 'react';

class Greeting extends React.Component {
  render() {
    const name = 'John Doe';

    return <h1>Hello, {name}!</h1>;
  }
}

export default Greeting;

In the code snippet above, we have a Greeting component that renders a heading element with a dynamic name value. Within the JSX syntax, we can embed JavaScript expressions using curly braces {}. In this case, the name variable is dynamically inserted into the rendered output.

JSX provides several advantages:

1. Readability: JSX resembles HTML syntax, making it easy to read and understand the structure of the component's UI.

2. Expressiveness: JSX allows you to express complex UI structures and logic in a concise and declarative manner.

3. Component composition: JSX enables the composition of multiple components, allowing you to build reusable and modular UI elements.

4. Full power of JavaScript: Since JSX is essentially JavaScript, you can utilize the full power of the JavaScript language, including variables, functions, and control flow statements, within the JSX code.

Under the hood, React's JSX code is transpiled into regular JavaScript code that creates and manipulates React elements. This transpilation process is typically handled by build tools like Babel.

By leveraging JSX, developers can build dynamic and interactive user interfaces with ease, combining the power of JavaScript with the familiar syntax of HTML. It simplifies the process of creating and maintaining complex UI structures, making React development more efficient and enjoyable.

One-Way Data Flow

React implements a one-way data flow, ensuring that data flows in a single direction. This makes it easier to manage application state and predict how changes will affect the UI. It promotes better control and maintainability of the application's data flow.

Another one of the key features of React is its one-way data flow, which ensures a predictable and efficient approach to managing data within components. In React, data flows in a unidirectional manner, from parent components to child components.

Here's a code snippet that illustrates the one-way data flow in React:

import React from 'react';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello from Parent',
    };
  }

  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}

In the code snippet above, we have a ParentComponent that holds a state variable called message. This state is then passed down to the ChildComponent as a prop. The child component simply renders the value of the message prop.

The one-way data flow ensures that changes in the parent component's state propagate down to child components, triggering re-rendering only in the affected components. This approach helps to maintain the integrity and predictability of the application's data.

By enforcing one-way data flow, React promotes better code organization and makes it easier to reason about how data changes affect the UI. It also simplifies debugging and ensures better performance by minimizing unnecessary re-renders.

React's one-way data flow ensures a clear and predictable flow of data from parent to child components. This feature helps in maintaining the application's state consistency, improving code readability, and optimizing rendering performance.

Component Lifecycle Methods

React provides lifecycle methods that allow developers to hook into different stages of a component's lifecycle. These methods enable actions like fetching data, handling events, and updating the UI based on specific triggers.

By leveraging these key features, React empowers developers to build interactive and scalable user interfaces. Its component-based architecture, efficient rendering with the Virtual DOM, JSX syntax, one-way data flow, and lifecycle methods make React a versatile and powerful tool for creating modern web applications.

To fully understand and harness the power of React, it's essential to grasp the concept of component lifecycle methods. These methods provide opportunities to perform specific actions at different stages of a component's life cycle.

Let's take a look at an example code snippet that demonstrates the usage of lifecycle methods in React:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log('Component has mounted!');
  }

  componentDidUpdate() {
    console.log('Component has updated!');
  }

  componentWillUnmount() {
    console.log('Component will unmount!');
  }

  handleClick = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

In the code snippet above, we have a MyComponent class-based component that showcases three essential lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount.

componentDidMount is invoked immediately after the component is mounted in the DOM. It is an ideal place to fetch data from an API, set up event listeners, or perform other initialization tasks.

componentDidUpdate is called after the component's state or props have been updated. It enables you to respond to changes and perform additional actions based on the updated data.

componentWillUnmount is invoked just before the component is unmounted and destroyed. It allows you to clean up any resources, event listeners, or subscriptions to prevent memory leaks.

These lifecycle methods provide hooks into the various stages of a component's existence, enabling you to manage side effects, handle state updates, and maintain proper resource management.

By utilizing lifecycle methods effectively, you can enhance the behavior and functionality of your React components, ensuring optimal performance and seamless user experiences.

Virtual DOM and Component-Based Architecture

React's Virtual DOM and component-based architecture are foundational concepts that contribute to its efficiency and flexibility.

Virtual DOM

React introduces the concept of the Virtual DOM, which is a lightweight representation of the actual Document Object Model (DOM). The Virtual DOM serves as a virtual copy of the real DOM, allowing React to efficiently update and render components.

When there are changes in the application's state, React compares the Virtual DOM with the real DOM and applies only the necessary updates, minimizing the number of actual DOM manipulations. This approach significantly improves performance and makes React applications highly responsive.

Imagine you have a toy block tower. Instead of disassembling and reassembling each block to make changes, you take a picture of the tower. Then, you make the necessary modifications and refer to the picture to recreate the tower with the updated changes.

The toy block tower represents the web page or user interface of your application. The original tower is the initial state, and the picture is the Virtual DOM. When you make changes, the framework (like React) creates a new Virtual DOM, a lightweight copy of the actual DOM.

Component-Based Architecture

React follows a component-based architecture, where UI elements are divided into reusable and independent components. Components are the building blocks of a React application, encapsulating their own state and behavior. This modular approach promotes reusability and maintainability.

Components can be composed together to create complex user interfaces. Changes made to one component do not affect other components unless explicitly specified. This separation of concerns simplifies development, testing, and code organization, making it easier to build and maintain large-scale applications.

Imagine you are building a LEGO house. Instead of building the entire house as one big piece, you break it down into smaller LEGO blocks, like walls, windows, and doors. Each block has its own unique features and functions.

Similarly, in component-based architecture, your web application is divided into smaller, self-contained building blocks called components. Each component represents a specific part of the user interface, such as a header, a navigation menu, or a button. These components are like the LEGO blocks that can be assembled and combined together to form the complete web application.

Just like LEGO blocks can be used in different structures, components can be reused across multiple pages or applications. This reusability saves time and effort as you don't need to recreate the same functionality or design from scratch. You can simply use the existing components and customize them as per your needs.

The combination of the Virtual DOM and component-based architecture makes React a powerful tool for building interactive and scalable user interfaces. The Virtual DOM enables efficient updates, while the component-based architecture promotes code reusability and modularity. Together, these concepts lay the foundation for creating robust and performant applications with React.

JSX Syntax and its Advantages

JSX is a syntax extension used in React that allows developers to write HTML-like code within JavaScript. JSX plays a significant role in creating React components and has several advantages.

1. Readability and Familiarity: JSX combines the power of JavaScript with the familiarity of HTML-like syntax. It allows developers to write component templates in a declarative manner, making the code more readable and understandable. Developers can easily visualize the structure of the UI and the interactions between components, leading to more maintainable code.

2. Component Composition: JSX facilitates the composition of components. Developers can nest components within each other, similar to how HTML tags are nested. This enables the creation of complex UI structures by assembling smaller, reusable components together. Component composition improves code organization, encourages reusability, and simplifies the management of application state.

3. Inline JavaScript Expressions: JSX seamlessly integrates JavaScript expressions within curly braces {}. This enables dynamic content rendering and the execution of JavaScript code directly within the component template. Developers can embed variables, perform calculations, and handle conditional rendering, allowing for flexible and dynamic UI creation.

4. Type Safety and Tooling: JSX enhances the development experience by providing improved tooling and type safety. Editors and IDEs can provide intelligent autocompletion and error checking for JSX syntax, helping to catch mistakes and improve productivity. Additionally, JSX can be statically analyzed for type checking, ensuring that the components receive the correct props and reducing runtime errors.

JSX is a powerful feature that enables developers to build intuitive and dynamic user interfaces with React. By leveraging JSX syntax, React simplifies the creation of component templates, improves code readability, promotes component composition, and provides enhanced tooling support.

What is Angular?

Angular Logo

The Angular framework has revolutionized web development by providing a comprehensive set of tools and features for building robust and scalable applications. Developed and maintained by Google, Angular has its roots in the original framework, AngularJS.

With a focus on modern web development practices, Angular has evolved into a versatile and widely adopted framework. In this section, we will explore Angular, its origins, and the key features that make it a popular choice among developers.

Whether you are new to Angular or seeking to deepen your understanding, this overview will serve as a solid foundation to navigate the world of Angular development.

Angular Framework and its Origins

The Angular framework, often referred to as Angular or Angular 2+, is a powerful front-end development platform created and maintained by Google.

It is the successor of AngularJS, which was the first version of Angular released in 2010. AngularJS introduced the concept of two-way data binding and gained popularity for its ability to build dynamic and interactive web applications.

However, AngularJS had limitations in terms of performance, scalability, and maintainability. This led the Angular team to re-envision the framework. Angular was introduced as a complete rewrite of AngularJS, incorporating modern web development practices and addressing the shortcomings of its predecessor.

Angular was built from the ground up to be more efficient, modular, and developer-friendly. It embraced a component-based architecture, where UI elements are divided into reusable components. This modular approach promotes code reusability, maintainability, and scalability, allowing developers to build complex applications with ease.

The release of Angular introduced significant changes and improvements, resulting in a more streamlined and performant framework. It incorporated features like a more efficient change detection mechanism, a powerful template syntax known as Angular Template Syntax (based on HTML with additional features), enhanced dependency injection, and a revamped command-line interface (CLI) for scaffolding and managing projects.

Over time, Angular has evolved into a comprehensive platform with a wide range of capabilities, including advanced routing, form handling, internationalization, and powerful testing tools. It has gained popularity among developers for its robustness, scalability, and the extensive ecosystem of libraries and tools that support Angular development.

Understanding the origins of Angular helps developers appreciate the design principles, improvements, and rationale behind the framework. It sets the stage for exploring Angular's key features and best practices, and leveraging its full potential to build modern web applications.

Understanding Angular's Modular Structure

One of the core strengths of Angular is its modular structure, which promotes code organization, reusability, and maintainability.

Angular applications are composed of modules, components, services, and other building blocks that work together to create a cohesive application.

Modules

In Angular, modules act as containers that group related components, services, directives, and other features. Each Angular application typically has a root module, known as the AppModule, which serves as the entry point of the application.

Modules help in organizing the application's functionality into manageable units, making it easier to maintain and understand the codebase. They also provide a way to encapsulate dependencies and provide a clean separation of concerns.

Modules in Angular can be likened to different rooms in a house. Imagine you have a big house with multiple rooms, each serving a specific purpose. The living room is for relaxing, the kitchen is for cooking, and the bedroom is for sleeping. Each room has its own unique function and contains the necessary furniture and equipment.

In Angular, modules are used to organize and encapsulate different parts of your application. If we continue with the house analogy, think of each module as a separate room in the house.

For example, you may have a living room module that handles all the components, services, and resources related to displaying and interacting with the living room features. Similarly, you can have a kitchen module that manages all the functionality related to cooking and food preparation.

Now, let's bring in the AppModule, which is the root module of an Angular application. In our house analogy, the AppModule can be compared to the main entrance or foyer of the house. Just as the main entrance connects all the rooms in a house, the AppModule serves as the entry point to your Angular application, connecting all the modules together.

The AppModule plays a crucial role in Angular applications. It imports and aggregates all the other modules, making them accessible to the application. It also bootstraps the application by specifying the root component that will be loaded initially.

Essentially, the AppModule sets the foundation for your Angular application, ensuring that all the necessary modules and components are properly connected and initialized.

By utilizing modules in Angular, including the AppModule, you can achieve better organization, separation of concerns, and maintainability in your application. Each module focuses on a specific area or functionality, making it easier to manage and extend your application as it grows.

Here's a short code snippet in Angular to demonstrate the usage of modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this example, we have an AppModule class decorated with the NgModule decorator. Inside the decorator, we define the metadata for our module.

The declarations array lists all the components, directives, and pipes that belong to this module. Here, we have a single component AppComponent declared.

The imports array specifies other modules that this module depends on. In this case, we're importing the BrowserModule, which provides essential features for running Angular applications in a web browser.

The providers array is used to provide any services or dependencies required by the components in this module.

The bootstrap array indicates the root component of the application, which will be instantiated when the application starts. Here, we have AppComponent specified as the bootstrap component.

Components

Components are the building blocks of Angular applications. They represent specific sections of the user interface and encapsulate their own styles, templates, and logic.

Components can be composed together to create complex UI structures. By breaking the UI into smaller, reusable components, the application becomes more modular and easier to develop and maintain.

Components in Angular are like building blocks that make up the different parts of a house, just like the React components I talked about earlier.

Imagine you are building a house using Lego bricks. Each Lego brick represents a component, and when you put them together, they form different parts of the house, such as walls, doors, and windows.

Similarly, in Angular, components are the basic building blocks of an application's user interface. They encapsulate a specific functionality or part of the user interface, just like the Lego bricks forming specific parts of a house.

For example, you can have a component for displaying a navigation menu, another component for showing a list of products, and yet another component for handling user registration.

Components consist of three main parts: the template, the class, and the styles. The template defines the structure and layout of the component, similar to how the Lego bricks come together to form a specific shape. The class contains the logic and data that the component needs to function, like the instructions that guide you on how to assemble the Lego bricks. The styles define the appearance and design of the component, just like the colors and patterns you choose for your Lego house.

When you put all the components together, just like assembling Lego bricks, you create a complete and interactive user interface for your Angular application. Each component works independently, but they can also communicate and interact with each other, allowing you to build complex and dynamic applications.

Components in Angular are the basic building blocks of an application's user interface, encapsulating specific functionalities. By combining and arranging components, you can create a complete and interactive user interface for your Angular application, just like assembling Lego bricks to build a house.

A short code snippet in Angular to demonstrate the usage of components:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <h1>Welcome to the Example Component!</h1>
    <p>This is the content of the component.</p>
  `
})
export class ExampleComponent {
  // Component logic goes here
}

In this example, we have an ExampleComponent class decorated with the @Component decorator. Inside the decorator, we define the metadata for our component.

The selector property specifies the HTML selector used to render the component. In this case, the selector is app-example, which means the component will be rendered as <app-example></app-example> in the HTML.

The template property defines the component's view or template. It contains the HTML markup that will be rendered when the component is used. In this example, we have a simple heading and paragraph.

The ExampleComponent class represents the logic and behavior of the component. Here, you can define properties and methods, and handle events related to the component.

Components are the building blocks of Angular applications. They encapsulate HTML, CSS, and JavaScript functionality into reusable and self-contained units. This makes it easier to develop and maintain complex user interfaces.

Services

Services are used for sharing data, logic, and functionality across multiple components. They encapsulate reusable business logic, data access, and communication with external APIs. Services can be injected into components or other services, enabling a clear separation of concerns and promoting code reusability.

Services in Angular can be likened to the helpers or assistants that make a house function smoothly. Imagine you are living in a house and you have different people helping you with specific tasks. For example, you might have a cleaning service to keep your house tidy, a plumber to fix any water-related issues, and an electrician to take care of electrical matters.

Same thing in Angular – services are like professionals that handle specific tasks and provide the functionality to different parts of your application. They are designed to perform common tasks or provide shared functionality that multiple components may need. Just like the helpers in a house, services can be called upon when needed and provide specialized assistance.

For example, you can have a data service that retrieves and stores data from an external source, such as a server or a database. This data service can be used by multiple components to fetch and update data, ensuring consistency across your application.

Another example is an authentication service that manages user authentication and authorization. This allows different components to verify user credentials and control access to certain features.

Services act as a central hub of functionality that can be shared and reused throughout your application. They help to organize your code and promote a modular structure, making it easier to maintain and update your application over time.

They act as centralized helpers, allowing different parts of your application to access and utilize their specialized capabilities. By using services, you can create a modular and efficient application structure, just like having dedicated helpers in a house to ensure everything runs smoothly.

Here's a short code snippet in Angular to demonstrate the usage of services:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  getData(): string {
    return 'This is data retrieved from the DataService!';
  }
}

In this example, we have a DataService class decorated with the @Injectable decorator. This decorator marks the class as an injectable service, allowing it to be injected into other components or services.

Inside the DataService class, we define a getData method that returns a string. This method can be used to fetch data from an API, perform calculations, or any other logic related to data retrieval.

Services in Angular are responsible for handling data, business logic, and other shared functionality across components. They promote code reusability, separation of concerns, and provide a way to centralize common operations and data access within your application.

Directives

Directives are used to extend the behavior of HTML elements or create reusable custom elements. They allow developers to manipulate the DOM, add event listeners, apply dynamic styling, and perform other tasks to enhance the functionality and appearance of the application.

They can be compared to instructions or rules that you give to objects in your house. Imagine you have a set of toys or objects, and you want to assign certain behaviors or actions to them. You might use stickers or labels to indicate what each object should do.

Likewise, in Angular, directives are used to give instructions or behaviors to elements in your application's user interface. They are like special stickers that you can attach to HTML elements to define how they should behave or appear. Directives can control the visibility, style, and behavior of elements, allowing you to customize their functionality.

For example, you can have a highlight directive that adds a special effect to a specific HTML element, making it stand out with a different color or animation. This directive can be used to highlight important information or interactive elements on a web page.

Another example is the if directive, which conditionally shows or hides an element based on certain conditions. This can be used to dynamically display content based on user input or application state.

Directives help you create interactive and dynamic user interfaces by providing instructions to HTML elements. They are like labels that tell the elements how to behave and what to look like. By using directives, you can customize and control the behavior of elements in your application, making it more engaging and user-friendly.

In simple terms, directives in Angular are like special stickers that you can attach to objects in your house (HTML elements) to tell them how to behave or look. They allow you to add interactive features and customize the appearance of elements, making your application more engaging and enjoyable for users.

Here's a short code snippet in Angular to demonstrate the usage of a custom directive:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.elementRef.nativeElement.style.backgroundColor = color;
  }
}

In this example, we're creating a custom directive called appHighlight. This directive is applied to an HTML element using the selector [appHighlight].

When the user hovers over the element, the onMouseEnter event listener is triggered, and it calls the highlight method to set the background color of the element to yellow.

Similarly, when the user moves the mouse away from the element, the onMouseLeave event listener is triggered, and it removes the highlight effect by setting the background color back to the default.

By attaching the appHighlight directive to an HTML element, we can dynamically control its appearance and behavior. This demonstrates the concept of directives in Angular, where you can define custom behaviors or instructions that can be applied to HTML elements to enhance their functionality and visual representation.

Here's an example of how you can apply the appHighlight directive to an HTML element in your template:

<div appHighlight>
  This is a highlighted element. Move your mouse over it to see the effect!
</div>

In this case, we have a <div> element to which we apply the appHighlight directive using the directive selector [appHighlight]. When the user hovers over this <div> element, the directive's behavior is triggered, and the background color of the element will be set to yellow, as defined in the directive's code.

Understanding Angular's modular structure is crucial for building scalable and maintainable applications. By organizing functionality into modules, and leveraging reusable components, services, and directives, developers can create applications that are easier to develop, test, and extend.

This modular approach also facilitates collaboration among team members and enables better code organization. This leads to more efficient development workflows and better overall application architecture.

Angular CLI and TypeScript Integration

Angular CLI (Command Line Interface) is a powerful tool that simplifies the development process of Angular applications. It provides a command-line interface for creating, building, testing, and deploying Angular projects.

Additionally, Angular CLI seamlessly integrates with TypeScript, a statically typed superset of JavaScript, to enhance the development experience and enable advanced features.

Creating Projects

With Angular CLI, creating a new Angular project is as simple as running a single command. The CLI generates a basic project structure, including configuration files, boilerplate code, and a development server. This saves time and eliminates the need for manual project setup, ensuring that developers can start coding right away.

To create a new project in Angular, you can use the Angular CLI (Command Line Interface). Follow these steps:

• Open your terminal or command prompt.

• Navigate to the directory where you want to create your Angular project.

• Run the following command:

ng new project-name

Replace project-name with the desired name for your project (I choose frontend-frameworks). Make sure to avoid spaces or special characters.

Selecting options for Angular project

Creating Project

The Angular CLI will prompt you to choose additional options for your project, such as the stylesheet format (CSS, SCSS, Sass etc.) and whether you want to enable routing. Make your selections and press Enter.

Wait for the CLI to create the project. It will install the necessary dependencies and set up the basic structure.

Once the process is complete, navigate into the project directory:

cd project-name

You can now start working on your Angular project. Use the ng serve command to run the development server and view your application in the browser:

ng serve

ng serve

Your Angular project will be accessible at http://localhost:4200.

The ng new command is used to generate a new Angular project with the specified name. It sets up the initial project structure, installs the necessary dependencies, and configures the project files.

Using the Angular CLI simplifies the process of creating and managing Angular projects, allowing you to focus on development rather than boilerplate setup.

Code Generation

Angular CLI offers a variety of powerful code generation commands that help streamline the development process.

Developers can easily generate components, services, modules, and other Angular elements using the CLI, reducing the amount of manual coding required. This accelerates development speed and ensures consistent code patterns throughout the project.

Here are the commands for generating different Angular elements using the Angular CLI:

Generating a component

• Generating a Component:

ng generate component component-name

This command creates a new component with the specified name. It generates the component files, including the HTML template, CSS styles, TypeScript code, and the necessary component tests.

Generating a service

• Generating a Service:

ng generate service service-name

This command generates a new service with the specified name. Services are used for handling data, implementing business logic, and sharing functionality across components.

Generating a module

• Generating a Module:

ng generate module module-name

Use this command to create a new module with the specified name. Modules help organize and structure your Angular application by grouping related components, services, and other Angular elements.

Generating a directive

• Generating a Directive:

ng generate directive directive-name

This command generates a new directive with the specified name. Directives allow you to modify the behavior or appearance of HTML elements in your Angular application.

Generating a pipe

• Generating a Pipe:

ng generate pipe pipe-name

Use this command to create a new pipe with the specified name. Pipes are used for transforming data in your Angular templates, such as formatting dates, applying custom filters, or truncating or shortening an input text to a specified length.

These commands are executed in the terminal or command prompt, and Angular CLI will automatically generate the corresponding files and folder structure based on the specified name. Make sure to replace component-name, service-name, module-name, directive-name, or pipe-name with your desired names when using these commands.

Development Server

Angular CLI includes a built-in development server that allows developers to run and test their applications locally.

The server automatically reloads the application whenever changes are made, providing a smooth development experience. It also offers features like hot module replacement, allowing developers to see the immediate effect of their code changes without the need for a full application reload.

TypeScript Integration

Angular is built using TypeScript, a statically typed superset of JavaScript. TypeScript brings powerful features like static type checking, enhanced IDE support, better code navigation, and advanced refactoring tools.

Angular CLI seamlessly integrates with TypeScript, providing out-of-the-box support for compiling TypeScript code into JavaScript and handling TypeScript-specific configuration options.

By leveraging Angular CLI and TypeScript integration, developers can streamline their development workflow, enhance productivity, and benefit from the robustness and scalability of the Angular framework.

Angular CLI simplifies common tasks, automates repetitive processes, and provides a seamless TypeScript development experience, allowing developers to focus on building high-quality applications.

What is Vue.js?

Vue.js logo

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be approachable, versatile, and easy to integrate into existing projects. Whether you're a beginner or an experienced developer, Vue.js offers a smooth learning curve and a flexible architecture that makes it a popular choice for web application development.

In this section, I'll teach you the fundamentals of Vue.js and help you get started with building your own Vue.js applications. We'll explore the core concepts, syntax, and key features that make Vue.js a powerful and intuitive framework.

If you're new to Vue.js, don't worry! I'll guide you step by step, starting from the basics and gradually diving into more advanced topics. By the end of this guide, you'll have a solid understanding of Vue.js and be well-equipped to start building your own dynamic and interactive web applications.

So, let's embark on this Vue.js journey together and unlock the full potential of this powerful JavaScript framework. Whether you're building a small personal project or a large-scale application, Vue.js has the tools and capabilities to bring your ideas to life.

Vue.js and its Philosophy

Vue.js is built upon a set of guiding principles that shape its design and philosophy. Understanding these principles is crucial for effectively utilizing the framework and developing high-quality Vue.js applications.

1. Approachability: Vue.js prides itself on being an approachable framework, making it easy for beginners to get started. Its syntax is simple and intuitive, resembling plain HTML templates, which lowers the learning curve. Vue.js allows developers to gradually adopt its features, enabling them to integrate it into existing projects or start small and scale as needed.

2. Versatility: Vue.js is a versatile framework that you can use for a wide range of applications. It offers a flexible architecture, allowing developers to choose the tools and libraries they prefer. Whether you want to build a single-page application (SPA), a progressive web app (PWA), or integrate Vue.js into a larger project, the framework provides the necessary flexibility to meet your specific needs.

3. Component-Based Development: Vue.js promotes a component-based approach to development. Components are self-contained and reusable building blocks that encapsulate their own logic, styles, and templates. This modular structure facilitates code reuse, simplifies maintenance, and enables better collaboration among team members. Vue.js provides a clear and intuitive syntax for defining and using components, making it straightforward to create complex user interfaces.

4. Reactivity: Vue.js leverages a reactive data model, which means that changes to the underlying data automatically update the corresponding views. This reactivity makes it easier to build interactive and responsive applications without the need for manual DOM manipulation. Vue.js tracks dependencies between data and views, ensuring efficient updates and optimized rendering performance.

By embracing these principles, Vue.js empowers developers to build elegant, maintainable, and scalable applications. The philosophy of approachability, versatility, component-based development, and reactivity sets the foundation for creating exceptional user interfaces with Vue.js.

Vue's Reactivity System and Component Composition

Vue.js employs a powerful reactivity system that enables efficient and automatic updates to the user interface based on changes in the underlying data. This reactivity is achieved through Vue's reactive data model and makes it easy to create dynamic and responsive applications.

Reactive Data Model

Vue.js uses a reactive data model, where data properties are automatically tracked for changes. When the data changes, Vue.js automatically updates the associated views, ensuring a synchronized and reactive user interface. This reactivity simplifies the development process as developers do not need to manually manipulate the DOM to reflect data changes.

In Vue.js, the reactive data model is like a magical connection between your data and the user interface. Imagine you have a magic box where you can put your data. Whenever the data inside the box changes, the UI automatically updates to reflect those changes. It's like having a real-time mirror of your data!

In this magical world of Vue.js, you define your data properties inside a Vue component, and Vue takes care of tracking those properties for you. Whenever a property changes, Vue automatically detects it and updates the corresponding parts of the UI. This means you don't have to manually update the UI elements every time the data changes. Vue does all the heavy lifting for you.

So, let's say you have a counter in your app. When you click a button to increase the counter value, Vue will instantly update the value in the UI without you having to write any extra code. It's as simple as that! The reactive data model in Vue.js makes it easy to keep your UI in sync with your data, saving you time and effort.

By embracing the reactive data model in Vue.js, you can build dynamic and interactive user interfaces with ease. It allows you to focus on manipulating the data, and Vue takes care of updating the UI accordingly. It's like having a superpower that simplifies your development process and brings your app to life.

So, remember, with Vue.js, you can harness the power of the reactive data model to create engaging and responsive user interfaces effortlessly.

Computed Properties and Watchers

Vue.js provides computed properties and watchers to handle more complex logic and reactivity requirements.

Computed properties allow developers to define properties that are computed based on other reactive data properties. These computed properties are cached and updated only when their dependencies change, optimizing performance.

Watchers, on the other hand, allow developers to react to specific data changes and perform custom logic when those changes occur.

Computed properties and watchers are like special helpers that assist you in handling data transformations and reacting to changes. Imagine you have a friend who always keeps an eye on things for you and gives you updates whenever something changes. That's exactly what computed properties and watchers do in Vue.

Computed properties are like smart calculators that automatically compute and update values based on other data properties. It's like having a helper who can perform complex calculations for you.

For example, let's say you have the length and width of a rectangle, and you want to calculate its area. With computed properties, you can define a property called area that dynamically computes the area value whenever the length or width changes. This way, you always have the correct area value without manually recalculating it.

On the other hand, watchers are like attentive observers who keep an eye on specific data properties and perform actions when they change. It's like having a friend who notifies you whenever something important happens.

For example, let's say you have a form input field, and you want to perform some validation or execute a function whenever the input value changes. With watchers, you can define a watcher that watches the input value and triggers a function whenever it changes. This allows you to take immediate action and respond to user inputs or data changes.

By using computed properties and watchers in Vue.js, you can simplify complex data manipulations and react to changes effectively. They provide you with powerful tools to automate calculations, perform validations, and execute custom logic whenever necessary. It's like having reliable assistants who handle the heavy lifting for you, making your coding experience more efficient and enjoyable.

With computed properties and watchers in Vue.js, you have the power to automatically compute values and respond to changes effortlessly. They are your trusted companions in managing data transformations and handling dynamic behaviors in your Vue components.

Component Composition

Vue.js promotes component-based development and encourages the composition of smaller, reusable components to build larger and more complex user interfaces.

Components can be easily created, registered, and used throughout the application. Vue's reactivity system allows data to flow seamlessly between parent and child components, enabling a hierarchical and reactive structure.

Component composition, in Vue.js, is like playing with building blocks to create something amazing. Let's say you have different LEGO bricks, and each brick represents a specific part of your website or web app. With component composition in Vue, you can easily combine these bricks to build something much bigger and more powerful.

Think of each Vue component as a LEGO brick that has its own unique functionality and appearance. You can create components for a navigation bar, a button, an image gallery, or any other part of your web page. Now, when you want to build a complete web page, you can assemble these components together, just like stacking LEGO bricks on top of each other.

Component composition allows you to reuse components and nest them within each other to create complex and interactive web pages. It's like building a LEGO spaceship by combining different bricks, adding wings, a cockpit, and other parts.

Similarly, in Vue, you can nest components inside one another, passing data and interacting with each other to create dynamic and interactive user interfaces.

By using component composition in Vue.js, you can easily break down your web page into smaller, manageable parts, and then assemble them together to create a cohesive and functional whole. It's like having a box of LEGO bricks that you can use to build anything you imagine.

Component composition lets you create individual components for different parts of your web page and then combine them together to create a complete and interactive experience. It's a fun and creative way to build awesome websites and web apps.

Props and Events

Vue.js facilitates communication between components through the use of props and events. Props allow data to be passed from parent components to child components, enabling a unidirectional flow of data. Events, on the other hand, allow child components to emit events and notify parent components about specific actions or changes.

In Vue.js, props and events are like passing messages between components, just like friends talking to each other. Think of it as you having two friends who want to share information with each other. One friend can send a message (prop) to the other friend, and the other friend can respond with a message (event) back.

In Vue, components can communicate with each other using props and events. Think of a prop as a message that a parent component sends to its child component. It's like a note passed from one friend to another, containing important information. The child component can receive the prop and use that information to display or modify its behavior. It's a way for components to share data with each other.

Now, events are like the response from the child component back to the parent component. It's the other friend replying to the message they received. The child component can emit an event to let the parent component know that something happened or that it needs to take action. It's like raising your hand and saying, "Hey, something important just happened!"

With props and events in Vue.js, components can talk to each other, share information, and work together as a team. This communication between components allows you to build dynamic and interactive web pages where different parts can exchange data and work together seamlessly.

So, just like friends passing notes and responding with actions, props and events in Vue.js help components share information and work together as a team. It's a fun way to create interactive and collaborative web applications.

Vue's reactivity system and component composition provide a solid foundation for building flexible and modular applications. By leveraging the reactivity system, developers can create dynamic and responsive user interfaces, while component composition promotes code reuse, maintainability, and scalability.

With Vue.js, developers can easily manage complex application states and achieve a seamless and interactive user experience.

Single-File Components and Vue CLI

Vue.js offers a convenient way to structure and organize components using Single-File Components (SFCs). SFCs encapsulate the template, script, and styles of a component into a single file, promoting better separation of concerns and improving code readability.

Structure and Organization

With Single-File Components, each component is contained within a single file, which makes it easier to understand and manage.

The template section holds the HTML markup, the script section contains the component's logic written in JavaScript, and the style section holds the component's styles using CSS or pre-processors like SASS or LESS. This modular structure allows developers to work on different aspects of a component without navigating through multiple files.

Here's a short code snippet that demonstrates the structure and organization of a Vue single-file component:

<template>
  <div class="my-component">
    <!-- Component HTML template -->
    <h1>{{ message }}</h1>
    <button @click="increment">Click Me!</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

<style scoped>
.my-component {
  /* Component-specific styles */
}
</style>

In this code snippet, you can see the structure of a Vue single-file component. It consists of three main sections: <template>, <script>, and <style>.

The <template> section contains the HTML template of the component. It defines the structure and layout of the component's content.

The <script> section contains the JavaScript code for the component. It includes the component's definition, which includes the component's name, data, and methods.

In this example, we have a data object that holds the component's state, including a message property and a count property. We also have a methods object that defines the increment method, which increments the count property when the button is clicked.

The <style> section contains the component-specific styles. By using the scoped attribute, the styles are only applied to the component's elements, ensuring encapsulation and preventing conflicts with styles from other components.

This structure helps in organizing and managing the code for your Vue components. It keeps the HTML, JavaScript, and styles related to a component in a single file, making it easier to understand and maintain your codebase.

Scoped Styles

Single-File Components provide built-in support for scoped styles. By default, styles defined within a component only apply to that component's template, preventing style conflicts with other components. This encapsulation makes it easier to style components without worrying about global style pollution.

Take a look at this code snippet that demonstrates the use of scoped styles in a Vue single-file component:

<template>
  <div class="my-component">
    <!-- Component content -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

<style scoped>
.my-component {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 5px;
}
</style>

In this code snippet, you can see the use of scoped styles in Vue single-file components. The <style> section includes the component-specific styles, and the scoped attribute is added to the <style> tag.

Scoped styles mean that the styles defined within the component's <style> section only apply to the elements within that component.

In the example, the .my-component class is used to style the component's <div> element. The background color is set to #f1f1f1, there's padding around the component, and the border radius is set to 5px.

The scoped styles ensure that these styles only affect the specific component they are defined in. This helps prevent style conflicts and allows for better encapsulation of styles within the component. It allows you to write component-specific styles without worrying about affecting other components or elements on the page.

Using scoped styles in Vue single-file components promotes code organization and separation of concerns, making it easier to manage and maintain your styles within your Vue project.

Vue CLI

Vue CLI (Command Line Interface) is a powerful tool that simplifies the development of Vue.js applications. It provides a command-line interface for creating, configuring, and managing Vue projects.

Vue CLI includes features like project scaffolding, code generation, and an integrated development server, making it easy to set up and start building Vue applications.

Installing Vue CLI

# Install Vue CLI globally (if not already installed)
npm install -g @vue/cli

# Create a new Vue project
vue create my-project

Create Vue Project

As you can see in code snippet above, we first install Vue CLI globally using the npm install command. This step is required only if you haven't installed Vue CLI before.

Once Vue CLI is installed, you can create a new Vue project using the vue create command. In the example, we're creating a project named "my-project". Vue CLI will prompt you to select a preset configuration for your project. You can choose from various options like default, manually select features, or use a saved preset.

After selecting the preset, Vue CLI will set up the project structure, install the necessary dependencies, and generate the initial files for your Vue project.

Using Vue CLI simplifies the process of setting up a new Vue project by providing a command-line interface and project scaffolding. It automates many common tasks, such as project configuration, dependency installation, and build setup.

Vue CLI also provides additional features like hot-reloading during development, ready-to-use templates, and easy project customization.

With Vue CLI, you can quickly start working on your Vue projects without worrying about the initial setup, allowing you to focus on writing code and building your application.

npm run build

Build and Deployment

Vue CLI offers a streamlined build process that optimizes the application for production. It generates optimized bundles, minifies the code, and applies various optimizations to improve performance.

Additionally, Vue CLI supports easy deployment of Vue applications to various hosting platforms or content delivery networks (CDNs), simplifying the deployment process.

When it comes to building and deploying your Vue.js application, Vue CLI provides a simple and efficient way to handle this process. After you've developed your application locally, you'll need to generate a production-ready build that can be deployed to a web server.

Vue CLI offers a command called npm run build that compiles your Vue components, bundles your assets, and optimizes your code for production. It generates a dist directory containing all the necessary files for deployment. This process ensures that your application is optimized for performance and ready to be served to users.

Once you have your production build, you can deploy it to a web server or a hosting platform of your choice. You can simply upload the contents of the dist directory to your server, and your Vue.js application will be accessible to users over the internet.

Deploying your Vue.js application typically involves configuring your server to serve the static files correctly, setting up any necessary server-side routing or configurations, and ensuring that your server has the required dependencies installed.

It's important to choose a reliable and secure hosting solution that fits your application's requirements. Popular hosting options for Vue.js applications include platforms like Netlify, Vercel, and GitHub Pages, which offer seamless deployment workflows and robust infrastructure.

By leveraging the build and deployment features provided by Vue CLI, you can easily package and deploy your Vue.js application, making it accessible to users worldwide.

By utilizing Single-File Components (SFCs) and Vue CLI, developers can efficiently structure their Vue.js projects, enhance code organization, and leverage powerful development tools. This approach not only improves code maintainability but also allows for better collaboration among team members.

Vue's ecosystem provides a seamless development experience that empowers developers to build robust and scalable applications with ease.

Comparing JavaScript Frameworks

When it comes to choosing a frontend framework for web development, you'll need to consider your use case, the features you need, and your skillset, among other things.

React, Angular, and Vue are all widely adopted frameworks that offer different approaches and features. They call them "The Big Three". Understanding the similarities and differences between these frameworks can help you make an informed decision based on your project requirements and personal preferences.

In this section, we will compare React, Angular, and Vue across various aspects such as learning curve, performance, community support, ecosystem, and more. We will explore their strengths and weaknesses, highlighting the unique features and benefits they bring to the table.

By examining these frameworks side by side, you can gain a better understanding of their key characteristics and determine which one aligns best with your needs. Remember, there is no one-size-fits-all solution, and the right choice ultimately depends on the specific demands of your project.

So, let's dive into the comparison and discover the similarities and differences among the big three. This knowledge will equip you with the necessary insights to choose the frontend framework that will enhance your development workflow and enable you to create exceptional web applications.

Similarities and Differences between React, Angular, and Vue

React, Angular, and Vue are all powerful frontend frameworks, but they differ in their approach, syntax, and ecosystem. Let's explore the key similarities and differences between these frameworks:

1. Component-Based Architecture: React, Angular, and Vue all follow a component-based architecture, where applications are built by composing reusable components. This promotes code reusability, modularity, and scalability.

2. Virtual DOM: React and Vue utilize a Virtual DOM, a lightweight representation of the actual DOM. This allows for efficient updates and ensures optimal rendering performance. Angular, on the other hand, uses a different change detection mechanism based on zones.

3. Learning Curve: React and Vue are known for their gentle learning curves, making them more beginner-friendly. Angular, on the other hand, has a steeper learning curve due to its extensive feature set and complex concepts.

4. Language and Syntax: React uses JavaScript, while Angular employs TypeScript, a superset of JavaScript. Vue supports both JavaScript and TypeScript, offering flexibility in language choice. The syntax and coding styles also differ across the frameworks, with React using JSX, Angular using a template-driven approach, and Vue utilizing a combination of template syntax and JavaScript.

5. Ecosystem and Community Support: React, Angular, and Vue have vibrant ecosystems with active communities. React has a large and mature ecosystem with numerous libraries and tools available. Angular has strong corporate backing from Google, which ensures robust development and support. Vue has gained popularity in recent years, and although its ecosystem is smaller, it continues to grow rapidly.

6. Popularity and Adoption: React has gained significant popularity and is widely adopted by large tech companies. Angular, being a full-fledged framework, is commonly used for enterprise-level applications. Vue has experienced rapid growth and has gained a strong following in the developer community.

While these frameworks share some similarities, their differences in syntax, learning curve, and ecosystem can influence your choice. It's essential to evaluate your project requirements, team expertise, and personal preferences to determine which framework suits your needs best.

Performance Considerations and Scalability

Performance is a crucial aspect to consider when choosing a frontend framework for your web application. Let's explore the performance considerations and scalability of React, Angular, and Vue:

1. Rendering Performance: React, Angular, and Vue all employ different rendering approaches. React utilizes a Virtual DOM, which efficiently updates and renders only the necessary components. Angular uses its own change detection mechanism, while Vue leverages a combination of Virtual DOM and a reactive data model. These approaches aim to minimize unnecessary re-renders and enhance performance.

2. Bundle Size: The size of the framework's bundle can impact the initial load time of your application. React and Vue have smaller footprints, allowing for faster initial loading. Angular, being a full-fledged framework, has a larger bundle size, which may require additional optimization techniques to improve load times.

3. Optimization Techniques: All three frameworks offer various optimization techniques to improve performance. These include code splitting, lazy loading, tree shaking (also known as dead code elimination, it's a process used by modern JavaScript bundlers to remove unused code from a project), and caching strategies. By implementing these techniques correctly, you can minimize the overall bundle size, reduce network requests, and optimize the runtime performance of your application.

4. Scalability: When it comes to scalability, all three frameworks can handle large-scale applications. However, Angular, with its opinionated structure and extensive features, is particularly suited for enterprise-level applications that require complex architecture and scalability. React and Vue, being more lightweight and flexible, can also scale well, but they may require additional setup and architectural decisions as the application grows.

It's important to note that performance considerations and scalability depend on various factors, including the size and complexity of your application, the specific optimization techniques implemented, and the efficiency of your code.

Conducting performance testing, utilizing best practices, and staying updated with the latest optimizations can help ensure optimal performance and scalability regardless of the chosen framework.

Keep in mind that while performance is important, it should be balanced with other considerations such as developer productivity, community support, and project requirements. Evaluating these factors holistically will enable you to make an informed decision regarding the performance and scalability needs of your web application.

Learning Curve and Community Support

The learning curve and community support are essential considerations when choosing a frontend framework like React, Angular, or Vue. Let's explore these aspects in more detail:

1. Learning Curve: The learning curve refers to the time and effort required to become proficient in a particular framework. React, Angular, and Vue have different learning curves based on their concepts, syntax, and ecosystem.

• React: React has a relatively gentle learning curve, especially for developers familiar with JavaScript. Its core concepts like components, state management, and JSX syntax are easy to grasp. But mastering advanced topics like React Hooks and state management libraries may require additional effort.

• Angular: Angular has a steeper learning curve (especially a difficult initial learning process) compared to React and Vue. It is a full-fledged framework with a comprehensive set of features and a specific way of doing things. Angular's learning curve stems from its powerful dependency injection system, TypeScript integration, and the extensive use of decorators.

• Vue: Vue strikes a balance between React and Angular in terms of learning curve. Its straightforward API, clear documentation, and gradual adoption approach make it beginner-friendly. Vue's simplicity and intuitive syntax make it relatively easy to get started with, even for developers new to frontend frameworks.

2. Community Support: The strength of the community around a framework can greatly impact your learning experience and development journey. React, Angular, and Vue all have vibrant communities with active support channels, forums, and online resources.

• React: React has a large and robust community, with countless tutorials, documentation, and third-party libraries available. The React community is known for its responsiveness and continuous innovation, making it easier to find solutions to common problems.

• Angular: Angular has solid community support, backed by Google. It has extensive documentation, official guides, and a dedicated team maintaining the framework. The Angular community is known for its focus on best practices, architectural patterns, and enterprise-level support.

• Vue: Although Vue's community is relatively smaller compared to React and Angular, it is rapidly growing and gaining momentum. Vue has a friendly and supportive community that actively contributes to its development. The Vue community is known for its inclusivity, helpfulness, and emphasis on simplicity.

Considering the learning curve and community support is crucial, especially for beginners. It's important to choose a framework with a learning curve that aligns with your current skill level and project requirements. Plus, a strong and active community can provide valuable resources, guidance, and collaboration opportunities, helping you overcome challenges and stay up-to-date with the latest trends and best practices.

How to Choose the Right Framework for Your Project

Selecting the most suitable frontend framework for your project requires careful consideration of several factors. Here are some key points to keep in mind when making your decision:

Project Requirements

Start by evaluating your project's specific requirements. Consider factors such as the complexity of the application, the size of the development team, scalability needs, and performance requirements. You should also think about any existing technical constraints such as the technology stack being used, integration with existing systems or libraries, and compatibility with specific platforms or frameworks.

Understanding these requirements will help you determine which framework aligns best with your project goals.

Learning Curve

Assess your team's skillset and experience level. If you have a team of developers who are already proficient in a particular framework, it may be more efficient to leverage their existing expertise.

On the other hand, if you have a team of beginners or developers with a broad range of skills, opting for a framework with a gentler learning curve can facilitate a smoother onboarding process.

Community and Ecosystem

Consider the size and vibrancy of the framework's community and ecosystem. A robust community provides access to a wealth of resources, tutorials, libraries, and support channels.

A thriving ecosystem ensures that you have a wide range of tools, plugins, and extensions to enhance your development process. It also indicates the long-term viability and sustainability of the framework.

Compatibility and Integration

Evaluate how well the framework integrates with your existing technology stack. Consider factors such as compatibility with backend frameworks, support for APIs, and the availability of plugins or packages that can facilitate integration with other tools and services you may be using.

Flexibility and Customization

Each framework has its own conventions and patterns. Assess whether the framework's structure and design principles align with your development preferences and project requirements.

Consider the flexibility and extensibility of the framework, as well as the ease with which you can customize and adapt it to suit your specific needs.

By carefully evaluating these factors, you can make an informed decision and select the right frontend framework that will empower you to build scalable, performant, and maintainable web applications that meet your project requirements and developer team's expertise.

Resources for Learning and Getting Started

When embarking on your journey to learn and master frontend frameworks like React, Angular, or Vue, it's important to have access to high-quality learning resources.

Here are some recommended resources to help you get started:

Official Documentation

The official documentation of each framework is an invaluable resource. It provides comprehensive guides, tutorials, and examples that cover the core concepts, features, and best practices.

Start by exploring the official documentation of React (react.dev), Angular (angular.io), and Vue (vuejs.org) to gain a solid foundation.

Online Courses and Tutorials

Online courses and tutorials offer structured learning paths and hands-on exercises that can accelerate your understanding of frontend frameworks.

Platforms like Udemy, Coursera, Udacity, and Pluralsight offer a wide range of courses taught by industry experts. Look for courses that cater to beginners and offer practical projects to apply your knowledge.

YouTube Channels and Video Series

YouTube is a treasure trove of tutorial videos and in-depth explanations of frontend frameworks. Channels like Traversy Media, The Net Ninja, freeCodeCamp, and Academind provide comprehensive video series that cover various aspects of React, Angular, and Vue, from basics to advanced topics. These videos offer a visual and interactive learning experience.

Online Communities and Forums

Joining online communities and forums dedicated to frontend development can greatly enhance your learning experience.

Platforms like Stack Overflow, Reddit, freeCodeCamp, Hashnode, Hackernoon, and Dev.to have active communities where you can ask questions, seek guidance, and engage in discussions with fellow developers. The supportive nature of these communities can help you overcome challenges and expand your knowledge.

Books and eBooks

Books are another valuable resource for in-depth learning. Look for recommended books on React, Angular, and Vue that cater to beginners and cover the fundamental concepts.

Some popular titles include React Up and Running by Stoyan Stefanov, Angular: Up and Running by Shyam Seshadri and Brad Green, and Vue.js 2 Cookbook by Andrea Passaglia.

By utilizing these resources, you can access a variety of learning materials that cater to different learning styles and preferences.

Remember to combine theory with hands-on practice to reinforce your understanding of the frameworks. As you progress, keep exploring additional resources, attending workshops, and contributing to the community to further enhance your skills and stay up-to-date with the latest developments in frontend development.

Conclusion

Frontend frameworks such as React, Angular, and Vue play a crucial role in modern web development. They provide powerful tools and abstractions that simplify the creation of interactive and dynamic user interfaces. Throughout this guide, we've explored the key features and benefits of these frameworks, as well as their similarities and differences.

Understanding the core concepts of each framework, such as React's component-based architecture, Angular's modular structure, and Vue's reactivity system will allow to make informed decisions on which framework suits your project requirements and personal preferences.

It's important to consider factors like performance, scalability, learning curve, and community support when choosing the right framework for your development endeavors.

Remember, learning a frontend framework is an ongoing process. It's essential to continuously expand your knowledge, stay updated with the latest trends and best practices, and keep honing your skills.

Explore the abundance of resources available, such as official documentation, online courses, tutorials, and community forums, to deepen your understanding and proficiency in using these frameworks.

As you delve deeper into the world of frontend development, don't limit yourself to just one framework. Familiarize yourself with multiple frameworks to broaden your skill set and adapt to different project requirements. Embrace the opportunities for collaboration and learning from other developers within the vibrant communities surrounding these frameworks.

Frontend frameworks have revolutionized web development, empowering developers to create immersive, responsive, and highly interactive web applications. By harnessing the power of React, Angular, Vue, or other frameworks, you can unlock endless possibilities and bring your ideas to life on the web. So, continue exploring, experimenting, and pushing the boundaries of frontend development to achieve remarkable results.

Getting Started

I started off the project by running npm create vite@latest and naming my project brian-component-lib to stay consistent with my previous post. I also chose to use TypeScript and Vue when those options came up.

The Component

The component I built is a clone of the buttons used on freeCodeCamp.org

Button component we are building

Here is the code for that component. Note that it is using TypeScript and the script setup format available in Vue 3.

<script setup lang="ts">

defineProps<{ text: string }>()

</script>

<template>
  <button class="btn-cta">{{ text }}</button>
</template>

<style scoped>
.btn-cta {
  background-color: #d0d0d5;
  border-width: 3px;
  border-color: #1b1b32;
  border-radius: 0;
  border-style: solid;
  color: #1b1b32;
  display: block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
}

.btn-cta:active:hover,
.btn-cta:focus,
.btn-cta:hover {
  background-color: #1b1b32;
  border-width: 3px;
  border-color: #000;
  background-image: none;
  color: #f5f6f7;
}
</style>

Then we need to expose this component in the library. We do that by exporting it from an index.ts file.

import FccButton from "./components/FccButton.vue";

export { FccButton };

Config

With the component code ready to go, we need to make sure Vite and the package.json file are configured properly.

Vite has a lot of options when building code. We are interested in the "Library Mode".

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      // src/indext.ts is where we have exported the component(s)
      entry: resolve(__dirname, "src/index.ts"),
      name: "BrianComponentLibrary",
      // the name of the output files when the build is run
      fileName: "brian-component-lib",
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ["vue"],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

Here is the package.json file. We need to make sure we have the properties necessary for pointing to our built files. For more information on what each property does, you can hover over them in VS Code.

{
  "name": "brian-component-lib",
  "version": "1.0.0",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/brian-component-lib.umd.cjs",
  "module": "./dist/brian-component-lib.js",
  "exports": {
    ".": {
      "import": "./dist/brian-component-lib.js",
      "require": "./dist/brian-component-lib.umd.cjs"
    },
    "./style.css": "./dist/style.css"
  },
  "types": "./dist/index.d.ts",
  "scripts": {
    "dev": "vite",
    "build": "vite build && vue-tsc --emitDeclarationOnly",
    "types": "vue-tsc ",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}

In order for the vue-tsc --emitDeclarationOnly to work when building, we need to add the following properties to the compilerOptions section of the tsconfig.json file:

"outDir": "dist",
"declaration": true,

We will also need to remove the noEmit: true property. This will make it so our types are available in the package, so a project using TypeScript with Vue doesn't yell at us for not having declared types.

I also added this line to make sure my App.vue and main.ts file aren't included in the component library built files.

"exclude": ["src/App.vue", "src/main.ts"],

Test the Library

We can now run npm run build and then test out our library. To do this, open up a Vue project (you can open a current Vue 3 project you have, or create a blank one).

Inside the package.json file for the project you just opened add the following to the dependencies:

"brian-component-lib": "file:../brian-component-library"

Make sure the file path you put in points to the correct folder where the component library lives.

Run npm install and you should now have the component library in your node_modules.

Import the component into one of the pages to test that it is working.

Note: You will need to also import the CSS because it gets built to its own file during the build process.

<script setup lang="ts">
import { FccButton } from 'brian-component-lib'
import "brian-component-lib/style.css"
</script>

<template>
    <FccButton text="Run the Tests" />
</template>

You should now see the button when you run the project.

How to Publish to NPM

If you haven't signed into NPM inside your terminal you can do that by running the npm adduser command.

Then just run the npm publish command and the package should be pushed up and made available on NPM.

Conclusion

Vite makes it pretty easy to get a component library published. Hopefully this helped. Let me know on Twitter if it did or if you'd like to see something else from me in the future.

You can see the repository for this code here: https://github.com/briancbarrow/vue-component-library-2023

Documentation is a crucial aspect of software development. But developers often neglect it because it can be a hassle to maintain. This is why it's important to use tools that help simplify this process.

In this tutorial, you'll learn how to build a complete docs site quickly by utilizing a modern tool called VitePress.

What is VitePress?

VitePress is a simple and performant static site generator built on top of Vite that lets you create docs in a matter of minutes. It is powered by Vuejs and Vite with built-in customizable components.

VitePress powers some popular documentation sites like Vuejs, Vitest, faker.js, and Vite itself.

Prerequisites

To follow along with this tutorial, you need to have a basic understanding of the following:

• Markdown syntax
• Basic understanding of NPM and Vite

Here's a screenshot of what you'll build by the end of this tutorial:

Want to play around with it? Check out the live demo. Also, the source code for this can be found on GitHub.

Step 1: Create a New Project

If you already have a folder created, you can skip this step and go on to the next one. If not, use the following command to create a project folder and move into the folder.

mkdir project-name
cd project-name

Next you need to initialize the project with your preferred package manager. I'll be using NPM for the rest of this guide.

npm init
// or use this command if you want to skip all the questions
npm init -y

If you used the first command, you'll be prompted with certain questions, so just complete them as appropriate.

After a successful operation, you should have a package.json file in your root directory. This is where the VitePress dev dependency will be installed.

Step 2: Install VitePress

The next step is to add VitePress and Vue as dev dependencies to your project, like this:

npm install --dev vitepress vue

You've successfully installed VitePress and Vue and added them as dev dependencies. Now you can start creating creating your respective doc files.

But before you do that, I believe it's essential to explain how VitePress works.

How Does VitePress Vork?

VitePress makes use of Markdown .md files for its markup which is automatically converted into static HTML. In other for this to work, a special folder called docs gets created in the root directory.

This folder behaves similarly to the pages folder in NextJS, where any .js file created in the directory is automatically treated as a web page. In this case a file called index.md will be the treated as index.html and serve as the root of your docs template.

Now that you understand how that works, you can create your respective doc files.

Step 3: Create the Respective Doc Files

You can create the docs folder and the index.md file manually, or you can do it with the terminal like a hacker.

mkdir docs && echo '# Hello VitePress' > docs/index.md

This command simply creates a folder called docs and adds an index.md file containing a h1 element that says "Hello World".

With this, you can boot up your dev environment to see what has been created so far.

Step 4: Boot Up Your Dev Environment

In order to run your docs locally, you need to add the following scripts inside the package.json file. Simply copy the code below and replace the "script" object with it:

// package.json
"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },

Finally, the documentation site can be served on a local server by running the command below:

npm run docs:dev

This will start a hot-reloading development server at http://localhost:5173, and you can visit it to see your docs site.

Here's the output:

All you had to do was add the markup and VitePress handled the appearance from its template engine. In the next session, you'll learn how you can customize the docs to fit your needs.

How to Customize Your Docs with VitePress

First create a .vitepress folder inside the docs directory you created earlier on. This is where all VitePress-specific files will be placed.

Inside this new directory, you need a config.js file. Again, you can use the terminal command like so:

mkdir .vitepress && touch .vitepress/config.js

To test this config file, you can start by changing the meta title and description of your docs site. Copy this markup and paste into the config.js file:

// .vitepress/config.js
export default {
  title: 'Adocs',
  description: 'An awesome docs template built by me'
}

If you check the dev tools, you should see the changes in the meta title and description.

How to Update the Title and Logo

In order to change the logo title and add an image, copy the markup below and paste it into a new object called themeConfig inside the same config.js file. This will overwrite the current title and add a logo to your docs site.

// config.js
export default {
  themeConfig: {
    logo: "/logo.svg",
    siteTitle: "Adocs",
  },
};

For the image source, you can pass in an image URL or specify the path to a local image. To do it locally, make sure you place the image within the public directory.

Here's the output:

Note that files in the public directory are served at the root path. So instead of ../public/logo.svg, just use /logo.svg.

How to Customize the Navbar

Customizing the Navbar is a pretty straightforward process as well. Inside your themeConfig file, paste the markup below. Here we have an object that contains two properties: the anchor text text, and the path link defines the URL path.

// .vitepress/config.js
{  
  // ...
   nav: [
    { text: "About", link: "/about" },
    { text: "Contact", link: "/contact" },
    { text: "Guide", link: "/guide" },
    { text: "Configs", link: "/configs" },
    { text: "Changelog", link: "https://github.com/..." },
  ],
  // ...     
}

Essentially navigating to localhost:5173/about should take you to an about page (though we haven't created that yet).

Here's the output:

Navigation links can also be dropdown menus, too. To add one, simply replace any of the links property with the items object which contains an array of links.

// .vitepress/config.js
{
  text: "Changelog",
  items: [
   { text: "v0.0.1", link: "/item-1" },
   { text: "v0.0.2", link: "/item-2" },
   { text: "v0.0.3", link: "/item-3" },
  ],
},

Now the changelog will become a dropdown menu with the respective links you pass inside.

Here's the output:

How to Add Social Icons

Navigation menus usually have social icons that visitors can use to visit your social platforms. To add them, define a new object called socialLinks inside themeConfig and simply pass in the social icon and the link you want it to navigate to.

// .vitepress/config.js
socialLinks: [
  { icon: "github", link: "https://github.com/Evavic44/adocs" },
  { icon: "twitter", link: "https://twitter.com/victorekea" },
  { icon: "discord", link: "..." },
]

By default, only 8 icons (Discord, Facebook, GitHub, Instagram, LinkedIn, Slack, Twitter, and YouTube) are provided. If you want to add a custom icon, use the SVG property to define an svg image. You can get free icons from icones.js.org.

For example, here's a snippet of the apple icon.

{
  icon: {
    svg: '<svg role="img" width="26.01" height="32" viewBox="0 0 256 315"><path d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615c-.35 1.116-6.599 22.563-21.757 44.716c-13.104 19.153-26.705 38.235-48.13 38.63c-21.05.388-27.82-12.483-51.888-12.483c-24.061 0-31.582 12.088-51.51 12.871c-20.68.783-36.428-20.71-49.64-39.793c-27-39.033-47.633-110.3-19.928-158.406c13.763-23.89 38.36-39.017 65.056-39.405c20.307-.387 39.475 13.662 51.889 13.662c12.406 0 35.699-16.895 60.186-14.414c10.25.427 39.026 4.14 57.503 31.186c-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199c-15.826.636-34.962 10.546-46.314 23.828c-10.173 11.763-19.082 30.589-16.678 48.633c17.64 1.365 35.66-8.964 46.64-22.262"/></svg>',
    },
  link: "https://www.apple.com/",
},

For custom SVG icons, make sure you add the role="img" property to the svg tag, as this allows the string convert it properly.

Here's the output:

How to Add a Sidebar

VitePress also comes with built-in components like sidebar menus. To add a sidebar, create an object called sidebar and inside it, add nested objects that take in three values: the nested title, collapsible functionality (default is set to true), and the nested links.

// .vitepress/config.js
sidebar: [
    {
      text: "Section A",
      collapsible: true,
      items: [
        { text: "Introduction", link: "/introduction" },
        { text: "Getting Started", link: "/getting-started" },
      ],
    },
    {
      text: "Section B",
      collapsible: false,
      items: [
        { text: "Introduction", link: "/introduction" },
        { text: "Getting Started", link: "/getting-started" },
      ],
    },
    {
      text: "Section C",
      collapsible: true,
      items: [
        { text: "Introduction", link: "/introduction" },
        { text: "Getting Started", link: "/getting-started" },
      ],
    },
  ],

By adding collapsible: "true" to the sidebar object, it shows a toggle button to hide/show each section. You can create as many sections as you want.

Here's the output:

You can see section B is not collapsible, and we have that nice next page button on the bottom of the page.

How to Set Up Page Routing

As explained earlier, VitePress automatically converts every .md file inside the root of the docs directory to static HTML that can be accessed in the address bar. For instance the index.md is converted to index.html, and about.md, about.html and so on.

Since you've created your nav links and pointed them to their respective URLs, you can access these pages easily by creating them.

docs/
├── .vitepress/
│   └── config.js
├── public/
│   └── logo.svg
├── about.md
├── contact.md
├── guide.md
├── configs.md
└── get-started.md

Create these files inside your docs folder and add a simple markup inside them just to see how this works. This page is basic markdown so all your markdown syntax like links, code blocks, headings, and so on works here.

Just for testing purposes, copy this markdown content and paste it inside any of the .md files you just created:

# About

Welcome to the about page.

This markdown supports html elements like the `p` tag coupled with inline styles

<p style="color: #ff7340; border: 1px solid rgba(255, 135, 23, 0.25); border-radius:5px; padding: 1rem;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

Even satire code snippets with syntax highlighting are also supported. 😅

```js
const lang = prompt("What is your favorite programming language?");

(lang === "JavaScript") | (lang === "javascript") | (lang === "js")
  ? alert("JavaScript to the world! 🚀🟡")
  : alert(`We don't permit such languages here 💩`);

Of course, images are not left out.

Here's the output:

![Image](https://www.freecodecamp.org/news/content/images/2022/11/page-routing-2.gif)

Great! You've set-up the docs, added a navigation menu with a dropdown feature, added a sidebar, and customized the links to navigate to different pages. Next up, let's work on the home page.

## How to Customize the Homepage

Just like every other component, VitePress provides us with markup for building the homepage. I've broken it down into three parts: Hero, features, and footer section.

### The Hero Section

First, we'll start with the hero section. Replace the Hello World text in the `index.md` page with the following markup:

```yml
# docs/index.md
---
layout: home

hero:
  name: Adocs
  text: Static docs template built with VitePress.
  image:
    src: /logo-big.svg
    alt: Adocs logo
  tagline: A free to use template for creating docs for your projects
  actions:
    - theme: brand
      text: Get Started
      link: /get-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/evavic44/adocs-template
---

The Features Section

Additionally, you can add a features section after the hero section. Simply paste the code below under the hero objects:

# /docs/index.md
---
link: https://github.com/evavic44/adocs-template

features:
  - icon: ⚡️
    title: Adocs, The DX that can't be beat
    details: Lorem ipsum...
  - icon: 🎉
    title: Power of Vue meets Markdown
    details: Lorem ipsum...
  - icon: 🔥
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon: 🎀
    title: Stylish and cool
    details: Lorem ipsum...
---

Here's the output:

The Footer Section

You can add a footer message on the bottom of the page, but this will only show up in the home page.

According to the VitePress docs:

Note that the footer will not be displayed when the SideBar is visible.

To add the footer component, go to the config.js file and paste the markup inside the themeConfig object:

// .vitepress/config.js
 footer: {
   message: "Released under the MIT License.",
   copyright: "Copyright © 2022-present Adocs",
 },

Here's the output:

Aside from the markup, you can also customize the components using custom CSS to change things like fonts family, colors, layout, ETC.

How to Add Custom CSS

The default theme CSS is customized by overriding root level CSS variables. If you want, you can check out the full list of CSS variables that are customizable.

To do get started, create a .vitepress/theme directory, and inside this theme folder, add an index.js and custom.css file. If you've been following along, you can use the terminal command below to do this quickly:

mkdir docs/.vitepress/theme && touch docs/.vitepress/theme/index.js && touch docs/.vitepress/theme/custom.css

If you run into any issues with the terminal command, just create the files manually and move on to the next step.

Here's an overview of the folder structure:

docs/
├── .vitepress/
│   ├── config.js
│   └── theme/
│       ├── index.js
│       └── custom.css
├── public/
│   └── logo.svg
├── about.md
├── contact.md
├── guide.md
├── configs.md
└── get-started.md

After creating these files, inside the .vitepress/theme/index.js file, paste the import commands:

// .vitepress/theme/index.js
import DefaultTheme from "vitepress/theme";
import "./custom.css";

export default DefaultTheme;

Color Theme

The colors are controlled by the CSS variables. You can simply replace them with any colors you want.

Note that this color has a provision for both light and dark mode. So make sure you change them accordingly.

Here's an example of my custom colors:

/* .vitepress/theme/custom.css */

:root {
  --vp-c-brand: rgb(255, 115, 64);
  --vp-c-brand-light: rgb(255, 87, 25);
  --vp-c-brand-lighter: rgb(255, 115, 64);
  --vp-c-brand-dark: #FF622D;
  --vp-c-brand-darker: rgb(226, 60, 0);

  --vp-c-sponsor: #fd1d7c;
}

If you don't see the effects immediately, try stopping the server and starting it again.

Aside from the color themes, you can also override other things like font family, typography, layout, breakpoints, and so on.

How to Use Custom Fonts

You can import Google fonts inside the CSS file to override the default font family.

@import url(https://fonts.googleapis.com/css?family=Space+Mono:regular,italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:regular,italic,700,700italic);

:root {
  --vp-c-brand: #ff7340;
  --vp-c-brand-light: #ff5719;
  --vp-c-brand-lighter: #ff7340;
  --vp-c-brand-lighter: rgba(255, 135, 23, 0.25);
  --vp-c-brand-dark: #ff622d;
  --vp-c-brand-darker: #e23c00;

  --vp-c-sponsor: #fd1d7c;

  /* Typography */
  --vp-font-family-base: "Space Grotesk", "Inter var experimental", "Inter var",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  /* Code Snippet font */
  --vp-font-family-mono: "Space Mono", Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

With the --vp-font-family-base variable you can change the main font and --vp-font-family-mono, the font for code snippets.

Here's the output:

You've successfully customized the theme and changed the font family using CSS. Though there's more you can do in regards to styling, but at this point, I hope it's clear how you can customize your docs with CSS.

Let's discuss hosting in the next section.

How to Host Your Doc Site

You can publish or host your docs site when you're done to different platforms like Netlify, Vercel, AWS Amplify, and so on.

First, run the build command:

npm run docs:build

This should create a new dist folder that contains all the static files of your docs.

In deciding on what hosting service to use, you can pick any of the options I mentioned earlier but we'll be using Vercel in this guide. Also, feel free to look at other alternatives of your choice.

If you don't have a Vercel account, follow this guide to create one and configure your Git provider before you move on to the next step.

Assuming you've successfully set-up your account and uploaded your docs site to Vercel, navigate to the project > settings > build and deploy settings, and paste the following commands to their respective fields:

• Build command: npm run docs:build
• Output directory: docs/.vitepress/dist

After editing the settings, save them and deploy your site!

Conclusion

In this tutorial, you've set-up a full-fledged documentation site and customized it using CSS and VitePress built-in components.

Just keep in mind that this tutorial only covers a fragment of what is possible with VitePress. To learn more, check out the VitePress docs.

Additional Reading

Here are a few things not covered in this article that I think is also worth looking into:

• Custom Containers
• Using Vue in markdown
• Team Section
• Carbon Ads

Resources

• Live Demo
• GitHub Repo

If you are an open source fan like myself or you enjoy hearing about such cool projects, do follow me on my socials so you don't miss my next post. Cheers. 🍷

GitHub | Twitter | Blog | Portfolio

OTP inputs are one of the most fun components you can use in your app. They make the dry process of filling in yet another form a little more engaging.

In this article, you’ll learn how to build an OTP input from scratch in Vue 3. By the end of the tutorial, you'll have built an OTP input that looks like this:

Here’s an overview of the steps the tutorial will follow:

• Project setup
• Building the Basics
• Adding functionality
• Finishing touches
• Conclusion

Prerequisites

To easily follow along with this tutorial, you should have the following:

• A basic understanding of Vue 3 and vanilla JavaScript
• Node.js 16+ installed on your machine
• A basic knowledge of CSS

What's an OTP Input?

In case you aren't familiar with the term, an OTP input is a form component for strings. Each character in the string is typed into a separate box, and the component switches between boxes as you type (as opposed to you needing to click into each box).

It's called an OTP input because they're usually used to let users type in an OTP (One Time Password) that they've received via some other channel, usually email or SMS.

Project Setup

This project won't use any external libraries, so all the setup you need is to create a Vue application with Vite.

Create the Vue project by running the following in a terminal window:

npm init vue@3

If you haven’t installed create-vue on your device, this command will install it. Next, it will present a series of options to you. The options let you specify the project name and select which add-ons you want to include.

Call the project otp-input and don't select any add-ons, as shown below:

After you’ve done that, run:

cd otp-input
npm install
npm run dev

After the dev server starts up, you should see something like this in your terminal:

Open the URL Vite gives you in your browser, and let’s get to the fun stuff.

How to Build the Basics

If you open the otp-input folder in your editor, it should have a file structure like this:

You’re going to adjust this setup to something more suitable. Start by opening src/App.vue and replacing its contents with this:

<template>
</template>

<script setup>

</script>

<style>

</style>

Next, select all the files inside src/components and delete them, and create a file inside components called OTP.vue. On Linux/Mac devices, you can do that by running the following in a new terminal window:

rm -rfv src/components
mkdir src/components
touch src/components/OTP.vue

Then, delete the src/assets folder, and remove the following line from src/main.js:

import './assets/main.css'

Next, open components/OTP.vue, and put the starting template for your OTP into it:

<template>
  <div ref="otpCont">
    <input
      type="text"
      class="digit-box"
      v-for="(el, ind) in digits"
      :key="el+ind"
      v-model="digits[ind]"
      :autofocus="ind === 0"
      :placeholder="ind+1"
      maxlength="1"
    >
  </div>
</template>

Let’s explain this.

The template starts with a container div that you've attached a ref to called otpCont. Inside the container, you have a text input with a v-for on it. The v-for will render one input for each element of a collection we called digits, and attach a two-way binding with the element of digits that shares its index.

The first rendered input will have the autofocus attribute, the placeholder for each input is its index plus one, and each input has a maximum length of one character.

Next is the script for the component. Place the following code into OTP.vue:

<script setup>
  import { ref, reactive } from 'vue';

  const props = defineProps({
    default: String,

    digitCount: {
      type: Number,
      required: true
    }
  });

  const digits = reactive([])

  if (props.default && props.default.length === props.digitCount) {
    for (let i =0; i < props.digitCount; i++) {
      digits[i] = props.default.charAt(i)
    }
  } else {
    for (let i =0; i < props.digitCount; i++) {
      digits[i] = null;
    }
  }

  const otpCont = ref(null)

</script>

After the import, this code defines two props: a required number digitCount that controls the number of inputs, and an optional string default.

Then, it creates the reactive digits array the template needs. If the default prop was provided and its length matches the digitCount prop, digits is initialized using the characters in default. If not the elements of digits are filled with null.

Finally, the code creates the otpCont reference from the template.

The last task for this section is to give the inputs a bit of styling. Put the following at the end of OTP.vue:

<style scoped>
.digit-box {
    height: 4rem;
    width: 2rem;
    border: 2px solid black;
    display: inline-block;
    border-radius: 5px;
    margin: 5px;
    padding: 15px;
    font-size: 3rem;
}

.digit-box:focus {
  outline: 3px solid black;
}

</style>

And that creates the basic form of your OTP.

Next, you’re going to edit the home page of your app to render the input. Replace the contents of src/App.vue with the following:

<template>
  <otp 
    :digit-count="4"
  ></otp>

</template>

<script setup>
import otp from "./components/OTP.vue";
</script>

If you open the app in the browser, you should see the separate inputs rendered like this:

How to Add Functionality

Right now, you don’t really have an OTP input yet. You need to manually switch focus between fields, and there’s no validation. Next, you’ll write the logic to fix that.

Open components/OTP.vue, and add a keydown event handler to the input tag:

 @keydown="handleKeyDown($event, ind)"

Now, create the handleKeyDown function at the end of the script setup section like so:

const handleKeyDown = function (event, index) {
    if (event.key !== "Tab" && 
        event.key !== "ArrowRight" &&
        event.key !== "ArrowLeft"
    ) {
      event.preventDefault();
    }

    if (event.key === "Backspace") {
      digits[index] = null;

      if (index != 0) {
        (otpCont.value.children)[index-1].focus();
      } 

      return;
    }

    if ((new RegExp('^([0-9])$')).test(event.key)) {
      digits[index] = event.key;

      if (index != props.digitCount - 1) {
        (otpCont.value.children)[index+1].focus();
      }
    }
  }

Let’s break down this function. The event handler is called every time a key is pressed while one of the input fields is in focus.

If the pressed key isn’t tab or one of the horizontal arrow keys, the function will call preventDefault(), and move to the next if block.

If the pressed key was Backspace, the value of the digit array at the index of the target input will be set to null. Then if the target input wasn’t the first input, the code shifts focus to its previous sibling.

The last if block uses a regular expression to test if the pressed key was one of the digits 0 to 9. If it was, digits is updated appropriately, and focus is shifted to the next input.

If you open the app in your browser now, you should see that the OTP input automatically shifts focus between the boxes. Also, it only accepts numbers as input, and you can use the tab key to navigate between boxes:

Add the Finishing Touches

The OTP input is now mostly complete, but it feels a little plain. Let’s add a last set of features:

• The input should emit the OTP value once all fields are filled.
• A small bounce animation should trigger when the user enters a value.

We’ll start with the logic for emitting the OTP value. First, you'll modify App.vue so it can display the emitted value. Replace the contents of App.vue with the following:

<template>
  <otp 
    :digit-count="4"
    @update:otp="otpValue = $event"
  ></otp>

  <p>The current OTP value is: {{ otpValue }} </p>
</template>

<script setup>
import otp from "./components/OTP.vue";
import { ref } from "vue";

otpValue = ref('')
</script>

Not much has changed: you just created a reactive variable called otpValue, told the template to render it, and added an event listener to the OTP component to update otpValue.

Next, open components/OTP.vue and add the following code just before the handleKeyDown function:

const emit = defineEmits(['update:otp']);

const isDigitsFull = function () {
  for (const elem of digits) {
    if (elem == null || elem == undefined) {
      return false;
    }
  }

  return true;
}

This code defines the custom event update:otp, as well as a function isDigitsFull . isDigitsFull returns false if there’s any null value inside digits and true otherwise.

Add the following to handleKeyDown at the end of the last if block:

if (isDigitsFull()) {
  emit('update:otp', digits.join(''))
}

Each time a digit is pressed in an input box, this code calls the helper function isDigitsFull to determine if all the input boxes are filled.

If they are, it emits the update:otp event, combines the value of all input boxes to a single string, and sends it as the value of the event.

Your rendered page in the browser should now display the most recent (complete) OTP value:

Finally, you’ll add animation to your OTP input. Paste the following CSS at the end of the style tag in components/OTP.vue:

.bounce {
  animation: pulse .3s ease-in-out alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

And then add the following class binding to the input in the template:

:class="{bounce: digits[ind] !== null}"

And that’s the code for the animation! Here’s how it works:

• The bounce class for each input is tied to digits[index]
• If the value of digits[index] changes, the expression is evaluated again
• If the new value isn’t null, the bounce class gets applied
• If it’s null, the bounce class is removed
• If the value doesn’t change, the expression isn’t re-evaluated, so the animation doesn’t trigger.

Here’s the final look of your OTP:

And you’re done!

Conclusion

In this tutorial, you learned how to build an OTP input from scratch in Vue 3. You can find the source code for this component here. I hope you enjoyed the read!

If you'd like to see more of my writing, you can follow me on Twitter.

This year I had the honor of speaking at VueConf US 2022 and I thought I would share my experience.

Part of this article will cover my personal process, part will look at VueConf specifically, and the rest will be about the conference at large. I hope you enjoy it.

How to Get into VueConf

Call For Papers

Let's start at the beginning, as that's a good place to start. As soon as VueConf announced the Call for Papers (CFPs), I submitted my talks. I had submitted a few, and the one they selected was called, "Maintainable & Resilient Projects Through Internal UI Libraries".

I submitted other talks that I thought had a better chance, but they selected this one, which turned out really well.

The submission process the conference uses is a Google Form. There's nothing wrong with that, but I've noticed that some other conferences use Sessionize or PaperCall which I prefer because you can have an account with your details that pre-fills the forms. With the Google Form, I had to re-type a lot of the same data each time (my life is so hard).

It's not a huge deal, but I mention it in case you're a conference organizer. Those dedicated platforms are pretty sweet. :)

After several weeks, maybe a month, I got the email that I'd been selected. Yay! That gave me plenty of time to prepare.

If you're thinking about speaking at a conference, here's my advice:

• Submit several talks. You're not limited to just one.
• Find out who the organizers are and connect with them. They don't only pick their friends, but it doesn't hurt if they recognize you.
• Try giving your talks ahead of time at meetups. It'll get nerves out, works out kinks, and gets you some good feedback.
• Make your talk stand out. Probably the most important thing is that you need to take time to create a title, pitch, and description that will get the attention of the organizers AND the audience. Communicate the value succinctly.
• Do it! It's a great way to connect with people and potential future employers.

Also, shout out to Wes Bos and Scott Tolinski for giving some good tips on a recent Syntax.fm episode.

After being selected, there was the matter of convincing my boss that our company should sponsor my trip.

How to Convince Your Boss

Some conferences will actually cover flights, accommodations, and even pay speakers. I think it's far more common to cover all the expenses yourself, minus the entry. This means either paying for everything out of pocket, or having your company sponsor your trip (heck yeah!).

Convincing your company to send you to a conference can be tricky because it has to be worth it for them. That's not always easy to prove. If you're presenting, it's better because that could provide an opportunity to promote the company or engage with your community.

Of course, this is going to vary greatly based on your company, their budget, the nature of your role, your team, and your workload.

As a developer advocate, it's a lot more typical for me to go to conferences now, but there's a greater expectation for me to speak, run a booth, host some sort of gathering, and create content (ahem).

Some companies are really good about conference policies, others not so much. One cool thing VueConf does that's really cool is provide folks with a "convince your boss" template that you can copy and fill out with your own details.

I didn't use the template, but they do cover some things that I recommend. In particular, doing the research ahead of time for how much it's going to cost (tickets, flight, accommodation, meals, other travel, and so on) is a good idea.

Something else that helps is arranging to create content or a presentation that you can bring back to your organization. That can help spread your knowledge around and get more value for your employer.

How to Write the Dang Thing

Once you know for sure that you're going, you have to also prepare your talk. If you've never written a presentation before, they're a LOT of work.

I don't even want to tell you how much time went into this presentation in case my boss reads this post (only kind of joking). That's another unspoken cost of sending someone.

You have to come up with a main concept, write an outline, write the script, find funny GIFs, come up with a new but more relevant title and hope no one notices, start wondering why they even picked you because it's not that good of subject after all, consider calling out sick, IMPOSTER SYNDROME, decide you don't care what people think and do it anyway because even if you fail you can always be a goat farmer, practice the talk, realize it's way too long, cut out half of the work you've already done, practice again, halve it again...and this all has to happen the night before your talk because you procrastinated.

And even if you don't you'll still be fiddling with your slides up until 5 minutes before you have to give your talk.

It's exhausting (but worth it).

How to Write a Conference Talk

If your curious about my process for writing a talk, I've been working on it for a while now, and have come up with this little system:

1. Start the content as a blog post.
2. Create a high level outline.
3. Shift concepts around into an order that works.
4. Fill in the gaps for a rough draft.
5. Copy the content into a markdown file.
6. Use Slidev (awesome project by Anthony Fu).
7. Come up with a story arch to make the content a little more interesting.
8. Fill in text.
9. Fill in helper graphics (code, charts, img, gifs)
10. Create speaker notes.
11. Practice reading through.
12. Practice reading through with timer.
13. Practice speaking through.
14. Practice speaking through with timer (camera optional).
15. Practice speaking it to Nugget.

I like this approach because in the end, I have a nice presentation as well as a rough draft for a blog post I can continue with later on. And Slidev is great because I can keep one main theme and reuse it for most of my presentations.

What VueConf is Like

The Check-in Process

I arrived on the first day to help Jessica Sachs give her workshop, "Stress-free Testing for Vue 3" (she's great and you should take her workshop some time).

The check in process was smooth, and one unique thing they had was a nice color-coded sticker system to communicate peoples preferred greeting: wave, hand-shake/fist-bump, hug. So you could stick it to your name tag to let other folks know your preference.

There wasn't much discussion around COVID protocols, but it's worth mentioning in case any of you are concerned about it. There was around 10 of us wearing masks, which I think goes for most events. It's mostly up to individuals, so if you're still uncomfortable in large groups, it's probably good to stick to the virtual events. I did hear of someone testing positive.

The People of VueConf

Ok, on to some more fun stuff – the people. This is one of my favorite parts of events, you get to meet so many great folks. And Vue folks are among the best!

I was happy to see greater diversity among the attendees than in the past. Like most tech events, it was still mostly men from the same few majority groups, but the gap didn't feel as stark as past events.

It felt like a larger distribution of people across the different race, gender, age, and experience spectrums. It was also represented in the speakers. It's working, people – more colors for our kick-ass rainbow!

How to meet people at a conference:

• Don't hang out with the same people. It's easy to fall into chatting with the same people you know, but it's fun to meet new people and you never know what you'll learn.
• People want to meet you. Some people have a harder time initiating a conversation, but are still eager to participate. Keep an eye out for folks and invite them in.
• Follow the Pac-Man rule. If you find yourself in a circle of people chatting, always leave a gap for someone to step into. So your circle should look more like a Pac-Man.
• Unless you need to recharge, during meals, sit at tables with people you don't know and strike up a conversation. It's great to see the variety of folks around you.

Vendors at Conferences

I don't spend a lot of time at the vendor booths, but they are super important for supporting events, and it's a good place to see who's taking care of your community. For that reason, I always like to swing by and talk to each vendor at least a little bit.

One thing I would really love to see from vendors is less wasteful swag. There's always so much stuff they give away for free that I'm sure just ends up in waste bins.

Some swag is super effective and a great way to get a brand name out there, but less garbage would also be awesome :)

VueConf Content

I thought the talks were well-selected, but they definitely leaned very heavily towards testing. I didn't mind that because each testing talk brought it's own perspective, and it's an important subject.

Not every talk was specific to Vue, which I always appreciate. It's cool to see a broad range of talks, both in the topics represented and in their target experience level. There was also a good range of talks from broad concepts to very specific, personal experiences.

This year I got to experience a workshop as well (as an assistant). I really liked the experience because workshops give you much more time on a single topic to really dive deep and get your hands dirty. And there's way more opportunity for one-on-one time between attendees and instructors.

HOT TIP: if you know someone putting on a workshop, ask them if they need any help. It got me into a workshop for free, got my friend some extra help, and it got the attendees more individual attention. Triple-win!

VueConf follows a single-track system which means every single talk happens in order, in the same room. This is different than other conferences that do the multi-track approach where there are multiple tracks running simultaneously, with a more dedicated focus.

They each have their pros and cons:

• Single-track: You know where to go for each talk. You never have to choose between two talks. There's plenty of opportunity to follow the "hallway track" and just chat with folks. You inherently get a little bit of everything.
• Multi-track: There's usually way more content to choose from. There's more content for each specific topic. It's less likely to have time slots with nothing that interests you.

I don't know if I have a preference, but it's something I thought about.

As mentioned above, one of the presentations was done by yours truly. It was a lot of fun. And despite the overwhelming feeling of impostor syndrome, I felt like I did pretty well.

There were a few points that I could have improved upon or just missed, but I don't think it showed on stage. Some folks even told me it was their favorite talk.

That was really nice...( ˘ ³˘)♥︎♥︎♥(°◡°♡)

It's published on Vue Mastery now. You can find it here: https://www.vuemastery.com/conferences/vueconf-us-2022/maintainable-and-resilient-projects-through-internal-ui-libraries/

Would love to hear what you think.

One last little tip/trick I might start doing is to ask organizers if I can give my talk on the first day. I'd rather get it out of the way so I can actually sleep at night and really enjoy the rest of the conference.

In-Person Conference Extracurriculars

In case you've never been to an in-person conference, you should know that post-conference events (parties) are going on probably every night. And it's great! Most of the time it's around grabbing drinks at a bar, but some conferences focus more on networking events.

At VueConf this year, I went to a few events.

• The first night, after the workshops, there wasn't much because it was technically still before the conference. It was a great chance to catch up with Bart Ledoux.
• The second night there was no official event because the organizers were hosting the speaker dinner. This consisted of drinks at the hotel pool beforehand, some swimming, and then walking over to a Thai restaurant with amazing Massaman curry. I also got Alex Kyriakidis his first Thai tea.
• The last night of the conference was spent once again at the hotel pool for swim and drinks, then there was a hosted happy hour with some food and drinks. After everything, we found a karaoke bar for some songs and drinks (there was some drama finding a place, but in true VueConf fashion, we found it).

In case it wasn't obvious, a lot of the external events revolve around drinks and/or bars. Which is fine for me because I don't mind a few drinks and can keep myself under control. However, I wish there were more events that focused less around alcohol. It would be more inclusive for folks that prefer not to drink.

Anyway, regardless of the venue/activity, I think it's worth going to as many extra events as you can. They're usually a lot of fun, and are a great way to connect with folks, both professionally and to make new friends. There's so much value there.

Two tips, though:

1. Don't forget to bring your badge to after parties (learned that one the hard way).
2. Try not to get trashed. Some folks did, and it's a bad look for you and possibly your employer (learned that the easy way).

In Closing

Conferences are great, and VueConf was no exception. If you haven't been to a conference, you should go. If you've been to a conference, you should go again. I find they are a good way to recharge my battery.

From this lineup, my favorite talk was probably "How we migrated our HUGE app to Vue 3" by Alex Van Liew. It was very informative from hands-on experience, but it also wasn't so subjective that it wasn't useful. Alex did a great job putting it together and delivering it (and I think he said it was his first talk ever).

One last minute tip for the whole event. Be active on Twitter before, during, and after. Put the conference name in your Twitter name. Use whatever hashtag is associated. It makes it way easier to find other folks.

And if you're not already on Twitter, you should get on it because everyone uses Twitter (right Adam?).

Thank you so much for reading. If you liked this article, please share it. It's one of the best ways to support me. You can also sign up for my newsletter or follow me on Twitter if you want to know when new articles are published.

This is a continuation of my previous post on setting up Authentication using Supabase. If you aren't familiar with getting Supabase set up in your project, I highly recommend going through that post.

The Starting Code Repo

Here is the repo from my previous post that will get you to where this post will be starting. You'll just need to set up Supabase and add your credentials/API key to a .env.local file to get up and running. This repo also has styling applied to it that was not included in the previous post.

Prerequisites

You should be familiar with JavaScript, have had some experience with Vue 3, and you should have Node.js and NPM installed on your machine.

If you've gone through the previous post about Supabase Authentication or this other post on Getting Started with Supabase you'll be good to go.

You will also need a free API key from Deepgram for when we get to the transcription section.

Getting Started

Once you have downloaded the repo from above run npm install to get the packages installed for the project.

Add your VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY environment variables from your the dashboard of your own Supabase project.

Run npm run dev to get the local dev server started.

Sign in to the app using either the Sign In form or the Magic Link form. Once you get signed in, you should see the HelloWorld component/page with a sign out button at the top.

Hello World component

How to Fetch a Podcast RSS Feed

The first thing we need to do is add functionality to get a podcast feed into our app. Create a new component in the components folder called PodcastFeed.vue.

Most podcasts have a public RSS feed that we can use to get the information we need with a simple fetch request.

Inside the of the PodcastFeed.vue component create the following form that takes in a RSS feed URL, and hooks up to a button that triggers the fetch request.

Note: I've tried to add comments in the code to help you understand what each part is doing.

<template>
  <div class="podcast-input-feed">
    <label for="email">Podcast RSS Feed URL</label>
    <div class="">
      <!-- binding the url input field to the 'url' data property -->
      <input
        type="url"
        name="url"
        id="url"
        v-model="url"
        placeholder="https://rss.your-org.org/feed/"
        aria-describedby="rss-url"
      />
    </div>
    <!-- hooking the button click to the 'getRssFeed' method -->
    <button @click="getRssFeed()" type="button" class="">Get Feed</button>
  </div>
</template>

<script>
import { ref } from "vue";
import { supabase } from "../supabase";
import { store } from "../store";
export default {
  setup() {
    // I am initializing the url to a url I know works, so that I don't need to keep inputing a url as I'm developing.
    // feel free to change this to a url of your own choosing
    const url = ref("https://anchor.fm/s/3e9db190/podcast/rss");
    // initializing the podcast state to an empty object
    const podcast = ref({});

    function getRssFeed() {
      const feedUrl = url.value;
      return (
        fetch(feedUrl)
          // this returns a promise so we need to convert it to a string
          .then((response) => response.text())
          // this next line is to parse the xml response
          .then((str) =>
            new window.DOMParser().parseFromString(str, "text/xml")
          )
          // parsing the data from the xml response and setting it into the podcast state
          .then((data) => {
            console.log("Data: ", data);
            podcast.value.image_url = data
              .querySelector("image")
              .querySelector("url").innerHTML;
            podcast.value.title = data.querySelector("title").textContent;
            podcast.value.description =
              data.querySelector("description").textContent;
            podcast.value.rss_url = feedUrl;
          })
          .catch((err) => {
            console.log("ERROR: ", err);
          })
      );
    }
    return {
      url,
      podcast,
      store,

      getRssFeed,
    };
  },
};
</script>

With that set up, replace the HelloWorld component in the App.vue file with this new PodcastFeed.vue component:

<template>
  <button v-if="store.state.user" class="signout-button" @click="signOut">Sign Out</button>
  <!-- Check if user is available in the store, if not show auth compoenent -->
  <Auth v-if="!store.state.user" />
  <!-- If user is available, show the app -->
  <div v-else class="app">
    <PodcastFeed />
  </div>
</template>

<script>
import Auth from "./components/Auth.vue";
import PodcastFeed from "./components/PodcastFeed.vue";

import { store } from "./store";
import { supabase } from "./supabase";

export default {
  components: {
    PodcastFeed,
    Auth,
  },
  setup() {
    // we initially verify if a user is logged in with Supabase
    store.state.user = supabase.auth.user();
    // we then set up a listener to update the store when the user changes either by logging in or out
    supabase.auth.onAuthStateChange((event, session) => {
      if (event == "SIGNED_OUT") {
        store.state.user = null;
      } else {
        store.state.user = session.user;
      }
    });

    async function signOut() {
      const { error } = await supabase.auth.signOut();
    }

    return {
      store,

      signOut,
    };
  },
};
</script>

<style></style>

So now the app should look like this:

App after adding PodcastFeed.vue

When you click the button, the data that comes back from the fetch request will show up in the console.

Parsed XML Data

In the getRssFeed method we parse that data and then take the information we need and add it to the podcast state data. We need to display that data so that the user can know the request was successful. We also want to add better error messaging in case the request fails.

Create a new component called PodcastInfo.vue and add the following code:

<template>
  <div class="podcast-info">
    <div class="image-container">
      <img :src="podcast.image_url" alt="" class="" />
    </div>
    <div class="podcast-text">
      <div class="title-desc">
        <p class="title">
          {{ podcast.title }}
        </p>
        <p class="desc">
          {{ podcast.description }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { store } from "../store";
import { supabase } from "../supabase";

export default {
  props: {
    podcast: {
      type: Object,
      required: true,
    },
  },
  computed: {},
  methods: {},
  setup() {},
};
</script>

<style scoped></style>

<template>
  <div class="info-error">
    <h3 class="">There was an error with your request</h3>
    <p class="">Check your RSS feed URL and try again.</p>
  </div>
</template>

<script>
export default {};
</script>

Then update the PodcastFeed.vue to the following in order to bring in the component:

<template>
  <div class="podcast-input-feed">
    <label for="email">Podcast RSS Feed URL</label>
    <div class="">
      <!-- binding the url input field to the 'url' data property -->
      <input
        type="url"
        name="url"
        id="url"
        v-model="url"
        placeholder="https://rss.your-org.org/feed/"
        aria-describedby="rss-url"
      />
    </div>
    <!-- hooking the button click to the 'getRssFeed' method -->
    <button @click="getRssFeed()" type="button" class="">Get Feed</button>
    <!-- Adding in these two new components -->
    <podcast-info v-if="podcast.title && !requestError" :podcast="podcast" />
  </div>
</template>

<script>
import { ref } from "vue";
import { supabase } from "../supabase";
import { store } from "../store";

import PodcastInfo from "./PodcastInfo.vue";

export default {
  components: {
    PodcastInfo,
  },

  setup() {
    // I am initializing the url to a url I know works, so that I don't need to keep inputing a url as I'm developing.
    // feel free to change this to a url of your own choosing
    const url = ref("https://anchor.fm/s/3e9db190/podcast/rss");
    // initializing the podcast state to an empty object
    const podcast = ref({});
    const requestError = ref(false);

    function getRssFeed() {
      const feedUrl = url.value;
      return (
        fetch(feedUrl)
          // this returns a promise so we need to convert it to a string
          .then((response) => response.text())
          // this next line is to parse the xml response
          .then((str) =>
            new window.DOMParser().parseFromString(str, "text/xml")
          )
          // parsing the data from the xml response and setting it into the podcast state
          .then((data) => {
            console.log("Data: ", data);
            podcast.value.image_url = data
              .querySelector("image")
              .querySelector("url").innerHTML;
            podcast.value.title = data.querySelector("title").textContent;
            podcast.value.description =
              data.querySelector("description").textContent;
            podcast.value.rss_url = feedUrl;
          })
          .catch((err) => {
            requestError.value = true;
          })
      );
    }
    return {
      url,
      podcast,
      store,
      requestError,

      getRssFeed,
    };
  },
};
</script>

Now when you click the "Get Feed" button, you should see the following:

Now that we can get the info displayed, we can wire up the app to save the info to Supabase.

How to Add a Table to the Supabase DB

The first thing we need to do is add a table to our Supabase DB. In the Dashboard for your project on Supabase, select the Table Editor and click the New table button. I name the new table podcasts. Enable the Row Level Security (this makes our DB more secure) and add the following columns:

• id (this column should be filled in for you when you create a new table)
• created_at
• name
• image_url
• description
• rss_url
• user_id (for this one, we want to link it via foreign key to our users table created by the Auth service. Click the chain-link icon to get that set up and link it to the users table on the id column.)

podcasts table setup

Because we enabled the Row Level Security, the table won't let anything get inserted until we update the policies for it.

Under the Authentication tab there is a section called 'Policies'. There you should see the podcasts table and a button to create a new policy. When you click on it, it will give you the option to create a policy from a template. Choose the template called 'Enable insert access for authenticated users only'. Now, only users that are authenticated have access to insert anything into the table.

When Supabase runs the insert command, it will automatically run a select command and return the newly inserted row. Because of this, we also have to add a policy to the table allowing the user SELECT access.

Create a new policy with the name Enable select based on userid and then in the USING expression section put (uid() = user_id). That will prevent users from reading other users' information, while still giving them access to their own podcasts in the table.

Select based on userid policy

How to Link Up the UI to the DB So the User Can Save Podcasts

To add a podcast to our DB, we will first add a button to the PodcastInfo component. Add this code to the bottom of the <div class="podcast-info">:

<button @click="addPodcast">Add to My Podcasts</button>

Now add a method called addPodcast to the setup function of the component like this. Don't forget to add the props to the argument of the setup function.

setup(props) {
    function addPodcast() {
      // Setting up the podcast object to send to supabase
      const podcast = {
        name: props.podcast.title,
        image_url: props.podcast.image_url,
        description: props.podcast.description,
        rss_url: props.podcast.rss_url,
        user_id: store.state.user.id,
      };
      // calling supabase method to insert into the db
      supabase
        .from("podcasts")
        .insert(podcast)
        .then(({ body }) => {
          store.addPodcastToStore(body[0]);
        })
        .catch((err) => {
          console.log(err);
        });
    }

    return {
      addPodcast,
    };
  },

You can see in the .then statement we call a method from the global store. Update the store.js file to the following:

import { reactive } from "vue";

export const store = {
  state: reactive({
    user: {},
    // adding podcasts array to global store
    podcasts: [],
  }),

  // adding addPodcastToStore method to store object
  addPodcastToStore(podcast) {
    this.state.podcasts.push(podcast);
  },
};

Now when we click the "Add To My Podcasts" button, the app makes a call to Supabase and then takes the result of that call and adds it to the podcasts array in the global store. (If you are getting a 403 error, make sure you set up the policies correctly. Maybe try restarting the dev server too.)

If a podcast is already in a user's list of podcasts, we don't want to let them click the add button again. To prevent this we need to first call Supabase to get all of the user's podcasts, and then check if the podcast they are looking at is in that list.

This method will not be specific to any one component so we want to create it inside of the global store. That way, any component has access to it. Add this method to the store.js file underneath the addPodcastToStore method:

getPodcastsFromDB() {
    supabase
        .from("podcasts")
        .select("*")
        .then(({ body }) => {
            this.state.podcasts = body;
        });
},

Then we want to update the method to be called whenever a user signs in. Inside of App.vue change the onAuthStateChange handler to this:

supabase.auth.onAuthStateChange((event, session) => {
    if (event == "SIGNED_OUT") {
        store.state.user = null;
    } else {
        // make call to supabase to get Podcasts for the user
        store.getPodcastsFromDB();
        store.state.user = session.user;
    }
});

Now update the PodcastInfo.vue file to this in order to display to the user if a podcast is already in their library.

<template>
  <div class="podcast-info">
    <div class="image-container">
      <img :src="podcast.image_url" alt="" class="" />
    </div>
    <div class="podcast-text">
      <div class="title-desc">
        <p class="title">
          {{ podcast.title }}
        </p>
        <p class="desc">
          {{ podcast.description }}
        </p>
      </div>
    </div>
    <!-- Add check in markup to remove the button if the podcast already exists in the user's list -->
    <div v-if="isInUserPodcasts" class="in-podcasts">In Your Podcasts</div>
    <button v-else class="" @click="addPodcast">Add to My Podcasts</button>
  </div>
</template>

<script>
// importing computed
import { ref, computed } from "vue";
import { store } from "../store";
import { supabase } from "../supabase";

export default {
  props: {
    podcast: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    // add computed property checking if podcast is in user's podcasts
    const isInUserPodcasts = computed(() => {
      return store.state.podcasts.some(
        (podcast) => podcast.rss_url === props.podcast.rss_url
      );
    });

    function addPodcast() {
      // check if podcast is already in user's podcasts
      if (isInUserPodcasts.value) {
        alert("You already have this podcast in your list!");
      } else {
        const podcast = {
          name: props.podcast.title,
          image_url: props.podcast.image_url,
          description: props.podcast.description,
          rss_url: props.podcast.rss_url,
          user_id: store.state.user.id,
        };
        supabase
          .from("podcasts")
          .insert(podcast)
          .then(({ body }) => {
            store.addPodcastToStore(body[0]);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    }

    return {
      // exposing the isInUserPodcasts computed property
      isInUserPodcasts,
      addPodcast,
    };
  },
};
</script>

<style scoped></style>

Next, we want to display a list of podcasts that the user has added to their library. We have the list in the global store, so we just need to loop through them to display the needed info.

Add the following to the bottom of the PodcastFeed.vue template:

<!-- Loop through podcasts and display them -->
  <div class="feeds">
    <h2 class="">Your Podcast Feeds</h2>
    <ul class="">
      <li v-for="pod in store.state.podcasts" :key="pod.id" class="">
        <a :href="`/podcast/${pod.id}`" class="">
          <img :src="pod.image_url" :alt="`logo for ${pod.name}`" class="" />
          <p class="">{{ pod.name }}</p>
        </a>
      </li>
    </ul>
  </div>

How to Set Up the Other Pages for Our Podcast App

Now that we have the list of podcasts being displayed in the app, we need a way to navigate to an individual podcast. We have the markup set to link to a path like /podcast/{podcast_id}. Now we need to update our app to handle routes like this.

First, install vue-router using npm i vue-router.

Then create a file called router.js with the following code:

// Import Vue Router
import * as VueRouter from "vue-router";

// Import the components that will show on the different routes
import PodcastFeed from "./components/PodcastFeed.vue";
import PodcastDetail from "./components/PodcastDetail.vue";

// Set up the routes
const routes = [
  { path: "/", component: PodcastFeed },
  { path: "/podcast/:id", component: PodcastDetail },
];

// Initialize the router
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

// Export the router
export default router;

Update main.js to use the router in the Vue app:

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";
import "./index.css";

const app = createApp(App);
app.use(router);
app.mount("#app");

Update App.vue to show the router-view component provided by Vue Router:

<template>
  <button v-if="store.state.user" class="signout-button" @click="signOut">Sign Out</button>
  <!-- Check if user is available in the store, if not show auth compoenent -->
  <Auth v-if="!store.state.user" />
  <!-- If user is available, show the app -->
  <div v-else class="app">
    <router-view></router-view>
  </div>
</template>

Now create a PodcastDetail.vue file that will display the episode info for the podcast:

<template>
  <nav class="">
    <a href="/" class="">Home</a>
  </nav>
  <!-- Basic layout for showing podcast info -->
  <div class="podcast-detail">
    <img :src="podcast.image_url" :alt="podcast.name" class="" />
    <h1 class="">{{ podcast.name }}</h1>
    <p>{{ podcast.description }}</p>
    <h2 class="">Episodes</h2>
    <!-- Looping through each episode of a podcast and displaying episode info -->
    <ul class="">
      <li
        v-for="episode in episodes"
        :key="episode.guid || episode.link"
        class=""
      >
        <div class="info">
          <h3>{{ episode.title }}</h3>
          <audio class="" controls>
            <source :src="episode.url" type="audio/mpeg" />
            Display
          </audio>          
        </div>        
      </li>
    </ul>
  </div>
</template>

<script>
// Importing necessary methods
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { supabase } from "../supabase";

export default {
  setup() {
    const route = useRoute();
    const podcast = ref({});
    const episodes = ref([]);

    // Getting podcast info from the database
    async function getPodcastData() {
      const {
        data: [podcastinfo],
      } = await supabase.from("podcasts").select().eq("id", route.params.id);
      podcast.value = podcastinfo;

      // Making call to episode url to get episode info
      getEpisodes(podcastinfo.rss_url);
    }

    function getEpisodes(url) {
      fetch(url)
        .then((response) => response.text())
        .then((str) => new window.DOMParser().parseFromString(str, "text/xml"))
        .then((data) => {
          // Finding all the "item" tags in the xml response which will contain the episode info
          const items = data.querySelectorAll("item");
          // Looping through each item and getting the episode info and pushing it to the 'episodes' array
          items.forEach((item) => {
            let url;

            // Not every podcast episode is going to have the `enclosure` tag, so we need to check if it exists
            try {
              url = item.querySelector("enclosure").getAttribute("url");
            } catch (e) {
              console.log("error", e);
              url = item.querySelector("link").innerHTML;
            }

            episodes.value.push({
              // this `title` and the `guid` properties looks a little different because the title contains CDATA tags which need to be grabbed with the 'childNodes' property
              title: item.querySelector("title").childNodes[0].textContent,
              link: url,
              url: url,
              description: item.querySelector("description").innerHTML,
              pubDate: item.querySelector("pubDate").innerHTML,
              guid: item.querySelector("guid").childNodes[0].textContent,
            });
          });
        })
        .catch((err) => {
          alert("Couldn't get episodes", err);
        });
    }

    onMounted(() => {
      // Getting podcast info from the database once the component is mounted
      getPodcastData();
    });

    return {
      podcast,
      episodes,
    };
  },
};
</script>

<style scoped></style>

With those changes, we can now see the individual episodes of the podcast and can play them using the <audio> html tag.

How to Get the Transcriptions of the Podcasts

The last step is to get transcriptions for the podcasts, and then save them to our database.

If you haven't yet, you'll need to get a free API key from Deepgram in order to process the audio and get the transcriptions.

Once you get the API key, add it to your .env.local file as VITE_DEEPGRAM_KEY. Make sure you restart your dev server here, otherwise you'll probably get a 403 Forbidden error when we finally call the API.

Then add this code to a deepgram.js file in the src folder.

const deepgramKey = import.meta.env.VITE_DEEPGRAM_KEY;

async function deepgram(url) {
  const response = await fetch(
    "https://api.deepgram.com/v1/listen?punctuate=true&diarize=true&utterances=true",
    {
      method: "POST",
      headers: {
        Authorization: `Token ${deepgramKey}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: url,
      }),
    }
  );
  const json = await response.json();
  return json.results;
}

export default deepgram;

This gives us a utility function we can import into our app in other files to call the Deepgram API in order to get the transcriptions. We added the punctuate, diarize, and utterances to the URL as parameters to get a cleaner transcription that is easier to read.

Now that we have that, we need to add some functionality to the PodcastDetail.vue file. I'll walk through the changes and then later will put up the final code for the file.

First we need to have some state to keep track of the transcriptions we get, and also to have some loading state once we click a button to get a transcription. So we'll add these two lines to our setup function:

let transcriptions = ref({});
const episodeTranscriptionLoading = ref([]);

Don't forget to add them to the return object of the setup function.

Then add this function to make the request to Deepgram, and then add the transcription to the local transcriptions object.

// Function to get a transcription from Deepgram, passing in the episode url
async function getTranscription(episode) {
    // setting the loading state to true for the episode
    episodeTranscriptionLoading.value.push(episode.guid);
    const transcription = await deepgram(episode.url);
    // setting a unique id for the episode transcription
    transcriptions.value[`${podcast.value.id}---${episode.guid}`] =
        transcription;
    // removing the loading state for the episode
    episodeTranscriptionLoading.value.splice(
        episodeTranscriptionLoading.value.indexOf(episode.guid),
        1
    );
}

Make sure you import the deepgram function from deepgram.js at the top of the script tag.

Then update the template to this:

<template>
  <nav class="">
    <a href="/" class="">Home</a>
  </nav>
  <!-- Basic layout for showing podcast info -->
  <div class="podcast-detail">
    <img :src="podcast.image_url" :alt="podcast.name" class="" />
    <h1 class="">{{ podcast.name }}</h1>
    <p>{{ podcast.description }}</p>
    <h2 class="">Episodes</h2>
    <!-- Looping through each episode of a podcast and displaying episode info -->
    <ul class="">
      <li
        v-for="episode in episodes"
        :key="episode.guid || episode.link"
        class=""
      >
        <div class="info">
          <h3>{{ episode.title }}</h3>
          <audio class="" controls>
            <source :src="episode.url" type="audio/mpeg" />
            Display
          </audio>
            <!-- button to get transcriptions -->
          <button
            v-if="!transcriptions[`${podcast.id}---${episode.guid}`]"
            @click.prevent="getTranscription(episode)"
            class=""
          >
            {{
              episodeTranscriptionLoading.includes(episode.guid)
                ? "Loading..."
                : "Get Transcription"
            }}
          </button>
        </div>
          <!-- box to display the transcription -->
        <div
          v-if="transcriptions[`${podcast.id}---${episode.guid}`]"
          class="transcription"
        >
          <p>
            {{
              transcriptions[`${podcast.id}---${episode.guid}`].channels[0]
                .alternatives[0].transcript
            }}
          </p>
        </div> 
      </li>
    </ul>
  </div>
</template>

How to Save the Transcriptions

Now that we can get the transcriptions, we need to add the functionality to save them to Supabase.

First, go create a table in Supabase like we did above, but this time name the table transcriptions. You'll want the following as the columns:

• id – varchar (primary) Also remove the "Is Identity" check mark in the settings for this column
• podcast_id – int8
• episode_guid – varchar
• transcript – text
• user_id – uuid (You'll need to link this to the user table by clicking on the link icon)
• created_at – timestamptz

columns for transcriptions table

Once that table is set up, we can add a reactive property called savedTranscriptions to the component and then add the following code to save the transcriptions to Supabase. Then we'll store them in the object savedTranscriptions.

function saveTranscription(podcastId, episodeGuid) {
    supabase
        .from("transcriptions")
        .insert({
        id: `${podcastId}---${episodeGuid}`,
        podcast_id: podcastId,
        episode_guid: episodeGuid,
        transcript:
        transcriptions.value[`${podcastId}---${episodeGuid}`].channels[0]
        .alternatives[0].transcript,
        user_id: store.state.user.id,
    })
        .then(({ data: [transcriptObject] }) => {
        savedTranscriptions.value[transcriptObject.id] =
            transcriptObject.transcript;
    });
}

Once a user has a transcription saved, we need to display it whenever they re-visit a page. Add this function to get that data from Supabase:

async function getTranscriptions() {
    const { data: transcriptions } = await supabase
    .from("transcriptions")
    .select()
    .eq("podcast_id", podcast.value.id);
    console.log("Transcriptions", transcriptions);
    transcriptions.forEach((transcript) => {
        console.log("id", transcript.id);
        savedTranscriptions.value[transcript.id] = transcript.transcript;
    });
}

We will want this called whenever a user hits this page, but not until we get the podcast information. Add a call to getTranscriptions to the bottom of the getPodcastData function to do that.

The last thing to do is to update the template to include the save buttons and to display transcriptions if they are in the saved objects. The final code for the PodcastDetail.vue should then look like this:

<template>
  <nav class="">
    <a href="/" class="">Home</a>
  </nav>
  <!-- Basic layout for showing podcast info -->
  <div class="podcast-detail">
    <img :src="podcast.image_url" :alt="podcast.name" class="" />
    <h1 class="">{{ podcast.name }}</h1>
    <p>{{ podcast.description }}</p>
    <h2 class="">Episodes</h2>
    <!-- Looping through each episode of a podcast and displaying episode info -->
    <ul class="">
      <li
        v-for="episode in episodes"
        :key="episode.guid || episode.link"
        class=""
      >
        <div class="info">
          <h3>{{ episode.title }}</h3>
          <audio class="" controls>
            <source :src="episode.url" type="audio/mpeg" />
            Display
          </audio>
          <button
            v-if="savedTranscriptions[`${podcast.id}---${episode.guid}`]"
            disabled
          >
            Transcription Saved
          </button>
          <button
            v-else-if="
              !transcriptions[`${podcast.id}---${episode.guid}`] &&
              !savedTranscriptions[`${podcast.id}---${episode.guid}`]
            "
            @click.prevent="getTranscription(episode)"
            class=""
          >
            {{
              episodeTranscriptionLoading.includes(episode.guid)
                ? "Loading..."
                : "Get Transcription"
            }}
          </button>
          <button
            v-if="
              transcriptions[`${podcast.id}---${episode.guid}`] &&
              !savedTranscriptions[`${podcast.id}---${episode.guid}`]
            "
            class="save"
            @click.prevent="saveTranscription(podcast.id, episode.guid)"
          >
            Save Transcription
          </button>
        </div>
        <div
          v-if="savedTranscriptions[`${podcast.id}---${episode.guid}`]"
          class="transcription"
        >
          <p>
            {{ savedTranscriptions[`${podcast.id}---${episode.guid}`] }}
          </p>
        </div>
        <div
          v-else-if="transcriptions[`${podcast.id}---${episode.guid}`]"
          class="transcription"
        >
          <p>
            {{
              transcriptions[`${podcast.id}---${episode.guid}`].channels[0]
                .alternatives[0].transcript
            }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// Importing necessary methods
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { supabase } from "../supabase";
import { store } from "../store";
import deepgram from "../deepgram";

export default {
  setup() {
    const route = useRoute();
    const podcast = ref({});
    const episodes = ref([]);
    let transcriptions = ref({});
    let savedTranscriptions = ref({});
    const episodeTranscriptionLoading = ref([]);

    // Getting podcast info from the database
    async function getPodcastData() {
      const {
        data: [podcastinfo],
      } = await supabase.from("podcasts").select().eq("id", route.params.id);
      podcast.value = podcastinfo;

      // Making call to episode url to get episode info
      getEpisodes(podcastinfo.rss_url);
      await getTranscriptions();
    }

    function getEpisodes(url) {
      fetch(url)
        .then((response) => response.text())
        .then((str) => new window.DOMParser().parseFromString(str, "text/xml"))
        .then((data) => {
          // Finding all the "item" tags in the xml response which will contain the episode info
          const items = data.querySelectorAll("item");
          // Looping through each item and getting the episode info and pushing it to the 'episodes' array
          items.forEach((item) => {
            let url;

            // Not every podcast episode is going to have the `enclosure` tag, so we need to check if it exists
            try {
              url = item.querySelector("enclosure").getAttribute("url");
            } catch (e) {
              console.log("error", e);
              url = item.querySelector("link").innerHTML;
            }

            episodes.value.push({
              // this `title` and the `guid` properties looks a little different because the title contains CDATA tags which need to be grabbed with the 'childNodes' property
              title: item.querySelector("title").childNodes[0].textContent,
              link: url,
              url: url,
              description: item.querySelector("description").innerHTML,
              pubDate: item.querySelector("pubDate").innerHTML,
              guid: item.querySelector("guid").childNodes[0].textContent,
            });
          });
        })
        .catch((err) => {
          alert("Couldn't get episodes", err);
        });
    }

    // Function to get a transcription from Deepgram, passing in the episode url
    async function getTranscription(episode) {
      // setting the loading state to true for the episode
      episodeTranscriptionLoading.value.push(episode.guid);
      const transcription = await deepgram(episode.url);
      // setting a unique id for the episode transcription
      transcriptions.value[`${podcast.value.id}---${episode.guid}`] =
        transcription;
      // removing the loading state for the episode
      episodeTranscriptionLoading.value.splice(
        episodeTranscriptionLoading.value.indexOf(episode.guid),
        1
      );
    }

    function saveTranscription(podcastId, episodeGuid) {
      console.log(
        "saving transcription",
        transcriptions.value[`${podcastId}---${episodeGuid}`]
      );
      supabase
        .from("transcriptions")
        .insert({
          id: `${podcastId}---${episodeGuid}`,
          podcast_id: podcastId,
          episode_guid: episodeGuid,
          transcript:
            transcriptions.value[`${podcastId}---${episodeGuid}`].channels[0]
              .alternatives[0].transcript,
          user_id: store.state.user.id,
        })
        .then(({ data: [transcriptObject] }) => {
          console.log("saved", transcriptObject);
          savedTranscriptions.value[transcriptObject.id] =
            transcriptObject.transcript;
        });
    }

    async function getTranscriptions() {
      const { data: transcriptions } = await supabase
        .from("transcriptions")
        .select()
        .eq("podcast_id", podcast.value.id);
      console.log("Transcriptions", transcriptions);
      transcriptions.forEach((transcript) => {
        console.log("id", transcript.id);
        savedTranscriptions.value[transcript.id] = transcript.transcript;
      });
    }

    onMounted(() => {
      // Getting podcast info from the database once the component is mounted
      getPodcastData();
    });

    return {
      podcast,
      episodes,
      transcriptions,
      savedTranscriptions,
      episodeTranscriptionLoading,

      getTranscription,
      saveTranscription,
    };
  },
};
</script>

<style scoped></style>

Conclusion

If you've followed the steps above, you should have a working app. Here is the final code if you want to double check against what I have written.

I know I enjoyed making the app. Supabase makes it really easy to get a database/backend up and running. Please reach out to me on Twitter if you have any questions!

This will also work with Vue 2, but you'll need to move things around to work with the options API. I am using Vue 3 as it is now the default version.

Just a heads up – there will not be much styling involved here so that the focus stays on Supabase authentication.

Prerequisites

You should be familiar with JavaScript and have had some experience with Vue 3. Having some experience with Supabase will help, but isn't necessary.

If you need a quick review of Supabase you can check out a previous post of mine where I go over how to get started using it.

You will also need Node.js and NPM installed on your machine.

Getting Started

Let's start by building some of the frontend before we start building the database using Supabase.

The first thing we need to do is set up our project. Inside of your terminal and inside of the folder where you want this project to live, run this command:

npm init vite@latest vue-supabase-auth --template vue

This will initialize a new Vite project with Vue 3 in a folder called vue-supabase-auth.

Open this up in your code editor of choice and open up the App.vue file inside of the src folder. When I initialized the project, Vite put the script tag above the template tag. My personal preference is to move the template tag to the top, but that isn't necessary.

Add Authentication to the App

The next step is to add authentication to our app. Supabase gives us the ability to authenticate a user in many different ways.

We'll be walking through how to set up basic email/password authentication, and authentication with a "magic link". A "magic link" is just a link sent to a user's email that, when clicked, will take them to your application and log them in.

Get a Supabase Account

If you haven't already, you'll need to sign up for an account on Supabase. It asks you to sign up with GitHub, so if you don't have a GitHub account, you should also sign up for one of those.

Once you are signed in, you'll click the green button that says "New Project" and select the default organization that was created when you logged in. Mine was called "briancbarrow's Org."

This will bring up a box where you provide some info about the project. I'll name it basic-auth, give it a strong password, and then I'm going to select the region West US (North California) because that is closest to me.

Once the project is done setting up, go into the Authentication -> Settings and disable the "Enable email confirmations." It just makes things a little smoother for this tutorial.

Showing the "Enable email confirmations" setting disabled

Set up Supabase in the Vue Project

First, we need to run npm install @supabase/supabase-js to get the JavaScript package to integrate with Supabase.

Then we need to create a supabase.js file in the src folder of the project. That should contain the following:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

As you can see in the code above, we need to set up some environment variables that contain our Supabase keys. Create a .env.local file at the root of the project and add the VITE_SUPABASE_URL and the VITE_SUPABASE_ANON_KEY. You can find your url and anon_key on the dashboard of your Supabase project.

Your .env.local file will look like this:

VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

We also want to create a central store for data that is needed throughout the app, like user info. Create a store.js file in the src folder and fill it with this code:

import { reactive } from "vue";

export const store = {
  state: reactive({
    user: {},
  }),
};

Create SignIn and SignUp Components

Supabase authentication separates the signIn and signUp processes, so we'll need to handle them differently. I decided to create two separate components just to make things a little clearer in my head.

Create a SignUp.vue file in the components folder and add the following code:

<template>
  <div>
    <h2>Sign up for an account</h2>
    <form @submit.prevent="handleSignup">
      <div>
        <label for="email">Email</label>
        <input id="email" type="email" v-model="email" />
      </div>
      <div>
        <label for="password">Password</label>
        <input id="password" type="password" v-model="password" />
      </div>
      <div>
        <button type="submit">Sign up</button>
      </div>
    </form>
  </div>
</template>

<script>
import { ref } from "vue";
import { supabase } from "../supabase";

export default {
  setup() {
    const email = ref("");
    const password = ref("");

    const handleSignup = async () => {
      try {
        // Use the Supabase provided method to handle the signup
        const { error } = await supabase.auth.signUp({
          email: email.value,
          password: password.value,
        });
        if (error) throw error;
      } catch (error) {
        alert(error.error_description || error.message);
      }
    };

    return {
      email,
      password,
      handleSignup,
    };
  },
};
</script>

Now create a SignIn.vue file and add the code below. The only differences are the method names that get called, and the text is slightly different in the markup.

<template>
  <div>
    <h2>Sign in to your account</h2>
    <form @submit.prevent="handleSignin">
      <div>
        <label for="email">Email</label>
        <input id="email" type="email" v-model="email" />
      </div>
      <div>
        <label for="password">Password</label>
        <input id="password" type="password" v-model="password" />
      </div>
      <div>
        <button type="submit">Sign in</button>
      </div>
    </form>
  </div>
</template>

<script>
import { ref } from "vue";
import { supabase } from "../supabase";

export default {
  setup() {
    const email = ref("");
    const password = ref("");

    const handleSignin = async () => {
      try {
        // Use the Supabase provided method to handle the signin
        const { error } = await supabase.auth.signIn({
          email: email.value,
          password: password.value,
        });
        if (error) throw error;
      } catch (error) {
        alert(error.error_description || error.message);
      }
    };

    return {
      email,
      password,
      handleSignin,
    };
  },
};
</script>

Now we want to create a wrapper component for these two. Create a file named Auth.vue with the code below:

<template>
  <div>
    <sign-up v-if="isSignUp" />
    <sign-in v-else />
    <button @click="isSignUp = !isSignUp">
      {{
        isSignUp
          ? "Already have an account? Sign In"
          : "Don't have an account yet? Sign Up"
      }}
    </button>
  </div>
</template>

<script>
import { ref } from "vue";
import SignUp from "./SignUp.vue";
import SignIn from "./SignIn.vue";
export default {
  components: { SignUp, SignIn },
  setup() {
    const isSignUp = ref(true);

    return {
      isSignUp,
    };
  },
};
</script>

<style scoped></style>

This just allows the user to toggle between the SignIn and SignUp views. Now open up App.vue again and update the code to this:

<template>
  <!-- Check if user is available in the store, if not show auth compoenent -->
  <Auth v-if="!store.state.user" />
  <!-- If user is available, show the Hello World component -->
  <HelloWorld v-else msg="Hello Vue 3 + Vite" />
</template>

<script>
import Auth from "./components/Auth.vue";
import HelloWorld from "./components/HelloWorld.vue";

import { store } from "./store";
import { supabase } from "./supabase";

export default {
  components: {
    HelloWorld,
    Auth,
  },
  setup() {
    // we initially verify if a user is logged in with Supabase
    store.state.user = supabase.auth.user();
    // we then set up a listener to update the store when the user changes either by logging in or out
    supabase.auth.onAuthStateChange((event, session) => {
      if (event == "SIGNED_OUT") {
        store.state.user = null;
      } else {
        store.state.user = session.user;
      }
    });

    return {
      store,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

This will show the Auth component if a user is not signed in, otherwise it will show the HelloWorld.vue as we had initially set up.

Sign up form

Sign up using your email and a password you create, and you should then see the HelloWorld component again.

Hello World component showing after sign up

How to log out

Logging out is relatively straightforward. Inside the HelloWorld component, add the following to the bottom of the template tag:

<button @click="signOut">Sign Out</button>

Then update the script tag on HelloWorld to this:

<script setup>
import { ref } from "vue";
import { supabase } from "../supabase";

defineProps({
  msg: String,
});

const count = ref(0);
async function signOut() {
  const { error } = await supabase.auth.signOut();
}
</script>

You can see we are now importing the supabase file we created earlier and then creating a signOut method that gets called on a button click.

Authenticate using Magic Link

Supabase also offers the ability to send users a magic link to their email which they click, and it takes them to the app and signs them in. The link it sends will redirect them to your site, so we need to make sure we have the correct redirect URL in our Supabase setup.

Navigate to the Auth -> Settings page in the Supabase dashboard for your project and make sure the localhost URL is in the Site URL box.

Make sure your site url matches where it should redirect to on login

Create the MagicLink component

Create a new file in the components folder called MagicLink.vue and add the following code:

<template>
  <div>
    <h2>Sign in With Magic Link</h2>
    <form @submit.prevent="handleMagicLink">
      <div>
        <label for="email">Email</label>
        <input id="email" type="email" v-model="email" />
      </div>
      <div>
        <button type="submit">Sign in</button>
      </div>
    </form>
  </div>
</template>

<script>
import { ref } from "vue";
import { supabase } from "../supabase";

export default {
  setup() {
    const email = ref("");

    const handleMagicLink = async () => {
      try {
        // We call the signIn method from Supabase to send the magic link. We only pass it the email though.
        const { error } = await supabase.auth.signIn({
          email: email.value,
        });
        if (error) throw error;
      } catch (error) {
        alert(error.error_description || error.message);
      }
    };

    return {
      email,
      handleMagicLink,
    };
  },
};
</script>

This component is very similar to the SignIn component. It uses the same method, but to get the magic link, we only pass in the email.

Now we need to update Auth.vue to also use the MagicLink component. Update Auth.vue to the following:

<template>
  <div>
    <!-- v-if logic to determine which auth component to show -->
    <sign-up v-if="isSignUp && !useMagicLink" />
    <sign-in v-else-if="!isSignUp && !useMagicLink" />
    <magic-link v-else />
    <div v-if="!useMagicLink">
      <button v-if="!useMagicLink" @click="isSignUp = !isSignUp">
        {{
          isSignUp
            ? "Already have an account? Sign In"
            : "Don't have an account yet? Sign Up"
        }}
      </button>
      <p>Or</p>
    </div>
    <button @click="toggleMagicLink">
      {{
        useMagicLink
          ? "Sign in with email and password"
          : "Sign in with magic link"
      }}
    </button>
  </div>
</template>

<script>
import { ref } from "vue";
import SignUp from "./SignUp.vue";
import SignIn from "./SignIn.vue";
import MagicLink from "./MagicLink.vue";
export default {
  components: { SignUp, SignIn, MagicLink },
  setup() {
    const isSignUp = ref(true);
    const useMagicLink = ref(false);

    function toggleMagicLink() {
      useMagicLink.value = !useMagicLink.value;
    }

    return {
      isSignUp,
      useMagicLink,

      toggleMagicLink,
    };
  },
};
</script>

<style scoped></style>

Now the Auth page should look like this by default:

Default Auth view

And it should look like this if the user clicks on the "Sign in with magic link" button:

Auth view when signing in with magic link

If you input your email and click "Sign In", you should get an email with the magic link. Click that link, and you should be redirected to the app as a logged in user, where you'll see the HelloWorld view.

Summary

Supabase makes setting up authentication relatively easy. They also provide authentication using several social providers like Google, Apple, Github, and many more.

For my basic projects, I like to keep it simple and stick with email/password login or just letting Supabase send a magic link to log them in.

These days, a new trending front-end framework is released every now and then. But React and Vue.js still stand as the most popular among all the other alternatives.

And although both are performant, elegant, and arguably easy to learn, they have some different opinions on how certain things should be done, and different ways of achieving the same end result.

I believe getting comfortable and efficient with a frontend framework is mostly about learning the patterns of doing regular stuff.

You know, how to listen to changes of a parameter/data and perform some action on that. And how to bind an event listener or data to an action object (button, checkbox, etc) and so on.

While I was working on a side-project with React, I noticed that my mind was like: "Yeah, I could do it like this in Vue, I would emit an event from the child, then listen for it in the parent and update this data". And then I was Googling how to do something like that in React.

In this article, I am going to show you how to apply some common patterns in both React and Vue that you'll come across in your daily front-end work. Then you can use these recipes to easily transition from one framework to the other one.

This will be helpful whether you are an experienced Vue developer who needs to work on a React project or the other way around. I will be using modern React with hooks and the Vue Options API (Vue 2).

I suggest cloning the repository that contains all the code I use in this article and rendering the respective components in each section and playing with them to really understand how they work.

After cloning, you need to run npm install in the React and Vue folders. Then you can start the React project with npm start and the Vue project with npm run serve.

https://github.com/yigiterinc/VueVsReact

Table of Contents

• Component Structure in React vs Vue
• How to use State in React and Vue
• How to Use Props in Vue and React
• How to Create Methods/Functions in Vue and React
• Styling Options
• How to Bind Form Input to Data (State)
• How to Handle Events (User Input)
• Conditional Styling
• Conditional Rendering
• Rendering Arrays (Lists)
• Child to Parent Communication
• Reacting to Data/State Changes
• Computed Properties vs useMemo
• Vue Slots vs Render Props

Component Structure

Let's take a bird's eye look into some very basic components in both frameworks. We will extend this in the following sections.

In Vue, a Single File Component contains 3 parts: the template, script and style.

The template is the part that will be rendered. It contains the HTML of the component and has access to the data (and methods) in the scripts and the styles.

You can find everything about a component inside these sections in Vue.

<template>
  <div id="structure">
    <h1>Hello from Vue</h1>
  </div>
</template>

<script>
export default {}
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#structure {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

To get this component rendered without a router or other complicated things, you can add it to App.vue. I suggest you render every component as you follow along so you can see them in action:

<template>
  <div id="app">
    <structure />
  </div>
</template>

<script>
import Structure from './Structure/Structure.vue'

export default {
  name: 'App',
  components: { Structure },
}
</script>

You will be changing the import component inside the components section and the tag name in the template section.

In React, a functional component is a function that returns JSX (an extension of JavaScript that allows you to use HTML tags inside JS code). You can think as if it is returning HTML to simplify things. The part that will be rendered used to be written inside the render() function in class-based React, if you are more familiar with that.

As you progress in this tutorial, in each section you can put the respective components inside App.js to get them rendered like this:

import React from 'react'

function Structure() {
  return <div>Render me App</div>
}

export default Structure

import './App.css'

import Structure from './Structure/Structure'

function App() {
  return (
    <div className="App">
      <Structure />
    </div>
  )
}

export default App

So you will change the import and the component inside the div.

How to Use State

In Vue, we learned that the script tag contains the data and methods related to the component. The Vue Options API has special keywords (options) such as data, methods, props, computed, watch, and mixins that we can use, as well as lifecycle methods such as created and mounted.

We will use the data option to use state in our component. The data should be defined as a function which returns an object that contains our states.

To access the state inside our HTML (template), we have to use double curly braces and write the name of our variable. Keep in mind that any change to data variables will result in a render if that variable is used (referenced) in the HTML.

<template>
  <div>
    <h1>Hello {{ currentFramework }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFramework: ' Vue!',
      alternative: ' React!',
    }
  },
}
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style></style>

In React, functional components used to be stateless. But thanks to hooks, we now have the useState hook to store state inside our component. To use the useState hook we have to import it, and the syntax is:

import React, { useState } from 'react';


function App() {
    const [stateName, setStateName] = useState('default value'); 
}

We define the name of the state variable and name of its setter function inside the brackets, then we pass the default value of our variable to the useState hook.

You can imagine the hook like this to understand the syntax better: It is like a function that creates a variable, sets its value to the passed value, then returns an array which contains the variable and its setter function.

Note that you should use a single pair of curly parenthesis to switch to JavaScript scope and print a variable inside your JSX, instead of double parenthesis, which was the case with Vue.

import { React, useState } from 'react'

function TestUseState() {
  const [frameworkName, setFrameworkName] = useState('React')

  return (
    <div>
      <h1>useState API</h1>
      <p>Current Framework: {frameworkName}</p>
    </div>
  )
}

export default TestUseState

How to Use Props

In Vue, we define props by adding the props option inside the object we export inside the script field like we did with the data option. It is a best practice to define the props as objects so we get more control over how they are used.

For example, specify their types, default values, and make them required if necessary. Vue will show a warning if you use the component wrong, like calling it without passing a required prop.

Let's say we have an Address child component that will be called from the UserInfo parent component.

<template>
  <div class="address">
    <p>City: {{ city }}</p>
    <p>Street: {{ street }}</p>
    <p>House No: {{ houseNumber }}</p>
    <p>Postal Code: {{ postalCode }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    city: {
      type: String,
      default: 'Munich',
    },
    street: {
      type: String,
      required: true,
    },
    houseNumber: {
      type: Number,
      required: true,
    },
    postalCode: {
      type: Number,
      required: true,
    },
  },
}
</script>

<style></style>

We can access our props just like our data variables – using the double parenthesis inside the template. And we can pass the props from the parent like this:

<template>
  <div class="address">
    <p>Name: Yigit</p>
    <Address
      street="randomStrasse"
      :postalCode="80999"
      :houseNumber="32"
    ></Address>
  </div>
</template>

<script>
import Address from '@/components/Address.vue'

export default {
  data() {
    return {}
  },
  components: {
    Address,
  },
}
</script>

<style></style>

Notice how we use the v-bind shorthand : and write :postalCode and :houseNumber to indicate that these are not strings but Number type objects. We have to use this syntax whenever we need to pass anything other than a string (array, object, number, and so on).

This might confuse you if you are coming from React, so you might want to read more about v-bind to get a better understanding of how it works.

In React, we do not need to explicitly define what props will be passed in the child component. We can either use object destructuring to assign props to variables or access them using the props object. We access our props inside JSX, just like how we access the state.

import React from 'react'

function Address({ city, street, postalCode, houseNumber }) {
  return (
    <div>
      <p>City: {city}</p>
      <p>Street: {street}</p>
      <p>Postal Code: {postalCode}</p>
      <p>House Number: {houseNumber}</p>
    </div>
  )
}

export default Address

And we can pass the props from the parent like this:

import React from 'react'

function UserInfo() {
  return (
    <div>
      <p>Name: Yigit</p>
      <Address
        city="Istanbul"
        street="Ataturk Cad."
        postalCode="34840"
        houseNumber="92"
      ></Address>
    </div>
  )
}

export default UserInfo

How to Create Methods/Functions

In Vue, we define methods similarly to data – we can just put a methods option under the data and define the method. We can call these methods from the template and methods can access/modify our data.

<template>
  <div>
    {{ sayHello() }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      to: 'Methods',
    }
  },
  methods: {
    sayHello() {
      return 'Hello ' + this.to
    },
  },
}
</script>

<style></style>

Be careful when trying to access component methods or data properties from inside the exported object (code inside script tag). If you don't include the this keyword, Vue will show an error saying it does not know where that property/method is.

In React, things are a bit more simple. It is just the regular JS function definition, with ES6 syntax, if you'd like.

import React from 'react'

function HelloFunctions() {
  const to = 'Functions'

  function sayHello() {
    return 'Hello ' + to
  }

  const sayHelloModern = () => 'Hello ' + to

  return (
    <div>
      {sayHello()}
      <br />
      {sayHelloModern()}
    </div>
  )
}

export default HelloFunctions

Styling Options

Styling Vue components is really simple. We just need to write our plain old CSS classes and selectors inside the style tag.

Vue also supports scoped CSS by using the scoped keyword. It helps to avoid visual bugs caused by assigning the same class name inside different components. For example, you could name the main container in all your components main-container and only the styles in that component file would be applied to each main-container.

<template>
  <div class="main-container">
    <h3 class="label">I am a styled label</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style scoped>
.main-container {
  position: absolute;
  left: 50%;
  top: 45%;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
}

.label {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
}
</style>

In React, though, we have more options in terms of styling and it's basically up to your personal preference since there are multiple ways to style your components. I will suggest a few good options here.

1) Writing regular CSS in a .css file and importing it

This is probably the most basic and straightforward approach for applying styles to your React components. It does not mean it is a bad approach, as it allows you to write plain old CSS. It is a good method if you are a CSS guru who is just getting started with React.

import React from 'react'
import './styles.css'

function Styled() {
  return (
    <div>
      <h3 class="title">I am red</h3>
    </div>
  )
}

export default Styled

.title {
  color: red;
  font-size: 30px;
}

2) Using Material UI (useStyles/makeStyles)

Material UI is a CSS framework that has so many reusable components. It also provides a way to style your components, which uses CSS in JS and therefore has its advantages such as scoped CSS.

The makeStyles hook receives a list of classes in an object, then you can use those classes by assigning them to objects.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

3) Using Styled Components (CSS in JS)

Styled components are modern and easy to use and it allows you to take advantage of all the features of plain CSS as well.

In my opinion, it is easier to use and more powerful than MaterialUI (you can also style MaterialUI components with this, instead of using makeStyles). It's also better than importing a CSS file since it is scoped and styled components are reusable.

import React from 'react'
import styled, { css } from 'styled-components'

// Use Title and Wrapper like any other React component – except they're styled!
const Title = styled.h1`
  font-size: 2em;
  text-align: center;
  color: palevioletred;
`

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
  height: 100vh;
`

function StyledComponent() {
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  )
}

export default StyledComponent

How to Bind Form Input to Data (State)

We have learned how to have state inside our components but we also need a way to bind user inputs to that state. For example in login forms, we will probably need to store the user's username and password input in the component state. React and Vue have different ways of keeping user inputs in sync with state.

In Vue we have a special directive for this operation called v-model. To use this, you need to create a state by using the data property as we have learned before. Then you add the v-model keyword to your input and specify which data variable is responsible for storing this input (this is applicable to form input, textarea and select elements).

This is a high-level and clean way to connect data, removing the need to create additional lambda functions or handlers.

<template>
  <div>
    <input v-model="inputState" type="text" />
    <br />
    {{ inputState }}
    <br />
    <button @click="changeInputState()">Click to say goodbye</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputState: 'Hello',
    }
  },
  methods: {
    changeInputState: function () {
      this.inputState = 'Goodbye'
    },
  },
}
</script>

<style></style>

Here is a small example: we have a text input, and we connect it to the inputState variable by using the v-model keyword. So whenever the user inputs text, the inputState variable will reflect the changes automatically.

However, there is one special thing that you need to know: v-model implements 2-way data binding in contrast to 1-way binding in React.

This means that, not only when you change the input does the data change, but also, if you change the data, the input value changes as well.

To demonstrate this, I have created a button and connected it to a method. Don't worry about the event handling yet, we will see that in next section. When the button is clicked, the value of inputState variable is changed and the input also changes when that happens.

I encourage you to try it yourself by running the code. Also, notice that the initial value of your input box is 'Hello' – it is not initialized to empty string or null because we set the inputState variable to 'Hello'.

Now let's see it in React:

import { React, useState } from 'react'

function FormInputBinding() {
  const [userInput, setUserInput] = useState('Hello')

  return (
    <div>
      <input type="text" onChange={(e) => setUserInput(e.target.value)} />
      <button onClick={() => setUserInput('Goodbye')}>
        Click to say goodbye
      </button>
      {userInput}
    </div>
  )
}

export default FormInputBinding

This topic overlaps with handling user events so if you do not understand something, wait until you complete the next section. Here, we handle the onChange event manually and call the setUserInput function to set the state to the event's value.

As we mentioned earlier, React uses a 1-way binding model. This means that changing the userInput state will not affect the value we see inside the text input – we won't see Hello inside the input box initially. Also when we click the button, it will update the state but the input inside the box will maintain its value.

Handling Events (User Input)

Let's see another form that is closer to real-life cases in Vue and React:

<template>
  <div>
    <input
      v-model="username"
      id="outlined-basic"
      label="Username"
      variant="outlined"
    />
    <input
      v-model="password"
      id="outlined-basic"
      type="password"
      label="Password"
      variant="outlined"
    />

    <input
      v-model="termsAccepted"
      id="outlined-basic"
      type="checkbox"
      label="Password"
      variant="outlined"
    />

    <Button variant="contained" color="primary" @click="submitForm">
      Submit
    </Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      termsAccepted: false,
    }
  },
  methods: {
    submitForm: function () {
      console.log(this.username, this.password, this.termsAccepted)
    },
  },
}
</script>

<style></style>

As you can see, we are using the v-model property that we just learned about to connect all our inputs to data properties (state). So, whenever the inputs change, Vue automatically updates the corresponding variable.

To see how we handle a click event on button, check the submit Button. We use the v-on keyword to handle click event. @click is just a shorthand for v-on:click.

Whenever a click event happens it simply calls the submitForm method. You can familiarize yourself with the list of possible events by going through the linked docs.

In React, we can have a form like this:

import { React, useState } from 'react'

import {
  TextField,
  Checkbox,
  FormControlLabel,
  Button,
} from '@material-ui/core'

function EventHandling() {
  let [username, setUsername] = useState('')
  let [password, setPassword] = useState('')
  let [termsAccepted, setTermsAccepted] = useState(false)

  const submitForm = () => {
    console.log(username, password, termsAccepted)
  }

  const formContainer = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '20px',
  }

  return (
    <div style={formContainer}>
      <TextField
        onInput={(e) => setUsername(e.target.value)}
        id="outlined-basic"
        label="Username"
        variant="outlined"
      />
      <TextField
        onInput={(e) => setPassword(e.target.value)}
        id="outlined-basic"
        type="password"
        label="Password"
        variant="outlined"
      />

      <FormControlLabel
        control={
          <Checkbox
            type="checkbox"
            checked={termsAccepted}
            onChange={(e) => setTermsAccepted(e.target.checked)}
          />
        }
        label="Accept terms and conditions"
      />

      <Button variant="contained" color="primary" onClick={() => submitForm()}>
        Submit
      </Button>
    </div>
  )
}

export default EventHandling

We create our state variables for each input. We can then listen to events on inputs and the event will be accessible inside the handler function. We call the state setters to update our state as a response to these events.

Conditional Styling

Conditional Styling means binding a class or style to an element if a condition is true.

In Vue it can be achieved like this:

<template>
  <div>
    <button @click="toggleApplyStyles"></button>
    <p :class="{ textStyle: stylesApplied }">
      Click the button to {{ stylesApplied ? 'unstyle' : 'style' }} me
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stylesApplied: false,
    }
  },
  methods: {
    toggleApplyStyles: function () {
      this.stylesApplied = !this.stylesApplied
    },
  },
}
</script>

<style>
.textStyle {
  font-size: 25px;
  color: red;
  letter-spacing: 120%;
}
</style>

We create a paragraph and want to apply the textStyle class only when the stylesApplied data property's value is true. We can use v-bind to achieve this. The colon is the shorthand for v-bind so :class is same as v-bind:class.

We use v-bind object syntax to bind classes. We pass an object to the class property: {textStyle: stylesApplied}, which means apply the textStyle class if stylesApplied is true.

It is a bit complicated at the start but it helps us avoid multiple chained if statements to determine which class will be applied and handles style bindings in a clean way: class names on the left (object keys), conditions on the right (object values).

In React we have to do things more primitively.

import { React, useState } from 'react'
import './styles.css'

function ConditionalStyling() {
  let [stylesApplied, setStylesApplied] = useState(false)

  return (
    <div>
      <button onClick={() => setStylesApplied(!stylesApplied)}>Click me</button>
      <p style={{ color: stylesApplied ? 'red' : 'green' }}>Red or Green</p>
      <p className={stylesApplied ? 'styleClass' : ''}>Red with class</p>
    </div>
  )
}

export default ConditionalStyling

Here we use plain JavaScript to bind either a styles object or a class name to the element. I think this complicates the code a bit, and I'm not a huge fan of this syntax.

Conditional Rendering

Sometimes, we want to render a component after some operation – such as fetching data from an API – is completed. Or maybe we want to display an error message if there is an error or success message if not.

For such situations, we use conditional rendering to change the HTML to be rendered programmatically.

In Vue, there are special directives for that as well. We can use the v-if and v-else or even v-else-if for rendering templates based on conditions.

<template>
  <div>
    <h2 v-if="condition1">condition1 is true</h2>
    <h2 v-else-if="condition2">condition2 is true</h2>
    <h2 v-else>all conditions are false</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition1: false,
      condition2: false,
    }
  },
}
</script>

<style></style>

This syntax allows us to create complex chains of conditional rendering without complicating our template code with if else statements.

Here is one of the ways to accomplish the same output with React:

import React from 'react'

function ConditionalRendering() {
  const condition1 = false
  const condition2 = false

  function getMessage() {
    let message = ''

    if (condition1) {
      message = 'condition1 is true'
    } else if (condition2) {
      message = 'condition2 is true'
    } else {
      message = 'all conditions are false'
    }

    return <h1>{message}</h1>
  }

  return <>{getMessage()}</>
}

export default ConditionalRendering

This is just plain JS and JSX, no magic here.

Rendering Arrays (Lists)

Now let's see how we can render list data. In Vue, there is v-for keyword for doing this. The syntax name in names means the name variable will always hold the current name. As the index changes, if index is 0, it is names[0] and so on. We can also access the index as specifying it inside the parentheses. The v-for directive also requires a key.

<template>
  <div>
    <h1>Names</h1>
    <ul>
      <li v-for="(person, index) in people" :key="index">{{ person.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        {
          id: 0,
          name: 'Yigit',
        },
        {
          id: 1,
          name: 'Gulbike',
        },
        {
          id: 2,
          name: 'Mete',
        },
        {
          id: 3,
          name: 'Jason',
        },
        {
          id: 4,
          name: 'Matt',
        },
        {
          id: 5,
          name: 'Corey',
        },
      ],
    }
  },
}
</script>

Note that we can also use the v-for directive for iterating over properties of an object. Remember that, in JS, arrays are just a special subset of objects with number keys.

In React, we will use the Arrays.map function to iterate over the array and return a JSX tag for each element.

import React from 'react'

function RenderingLists() {
  const cities = [
    'Istanbul',
    'München',
    'Los Angeles',
    'London',
    'San Francisco',
  ]

  return (
    <div>
      <h1>Cities</h1>
      {cities.map((city, index) => (
        <h4 key={index}>{city}</h4>
      ))}
    </div>
  )
}

export default RenderingLists

Child to Parent Communication

Imagine you have a form component and a button sub-component inside it. And you want to perform some action when that button is clicked, like calling an API to submit data – but you do not have access to the form data in the button component since it is stored in the parent. What do you do?

Well, if you are in Vue, you want to emit a custom event from the child and act on that in the parent. In React, you would create the function that will be executed (when button is clicked) in the parent, where the function has access to form data and pass it to the button component so that it can call the parent's function.

Let's see an example in Vue:

<template>
  <div>
    <button @click="buttonClicked">Submit</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClicked: function () {
      this.$emit('buttonClicked') // Emits a buttonClicked event to parent
    },
  },
}
</script>

<style></style>

In our child component, we have the button and on click we emit a buttonClicked event. We could also send data in this call. For example if this was a text input box instead of a button and had its own data, we could send that data to the parent with emit.

In the parent component, we need to listen for the custom buttonClicked event that we just created.

<template>
  <form action="#">
    <input v-model="username" type="text" />
    <child @buttonClicked="handleButtonClicked" />
  </form>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      username: '',
    }
  },
  methods: {
    handleButtonClicked: function () {
      console.log(this.username)
    },
  },
}
</script>

<style></style>

We just added a @buttonClicked event to our child component call to handle this custom event.

In React, we could achieve the same results by passing a handler function to the child component. The concept was a bit complicated to me first but the syntax is easier than the Vue example and there is no magic.

import React from 'react'

function Child({ handleButtonClicked }) {
  return (
    <div>
      <button onClick={() => handleButtonClicked()}>Submit</button>
    </div>
  )
}

export default Child

We access the handleButtonClicked prop and call it when the button is clicked.

import { React, useState } from 'react'

import Child from './Child.js'

function Parent() {
  const [username, setUsername] = useState('')

  const submitForm = () => {
    console.log(username)
    // Post form data to api...
  }

  return (
    <div>
      <input onChange={(e) => setUsername(e.target.value)} type="text" />
      <Child handleButtonClicked={submitForm} />
    </div>
  )
}

export default Parent

In the parent, we pass the submitForm function as the handleButtonClicked prop which will do the job.

Reacting to Data/State Changes

In some cases, we need to react to data changes. For example, when you want to perform asynchronous or expensive operations in response to a change in data.

In Vue, we have watch properties or watchers for that. If you are familiar with useEffect in React, this is closest thing you can find in Vue and their use cases are more or less the same.

Let's see an example:

<template>
  <div>
    <input v-model="number1" type="number" name="number 1" />
    <input v-model="number2" type="number" name="number 2" />
    {{ sum }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: 0,
      number2: 0,
      sum: 0,
    }
  },
  watch: {
    number1: function (val) {
      this.sum = parseInt(val) + parseInt(this.number2)
    },
    number2: function (val) {
      this.sum = parseInt(this.number1) + parseInt(val)
    },
  },
}
</script>

<style></style>

Here, we have number1 and number2 defined in our data properties. We have 2 respective inputs and we are printing the sum of those numbers and we want sum to update when any of the inputs change.

Inside the watch property, we write the name of the variable we want to watch. In this case, we want to watch both number1 and number2. If the user enters an input, v-model will change the corresponding data variable and when that happens, the watch function for that variable will be triggered and the value of sum will be recalculated.

Note that, in a real application, you wouldn't need to use watch for this simple thing and you would just put sum inside computed instead. This is a made-up example to demonstrate how watch works.

Before using watch with more complicated things like objects, arrays, and nested structures, I suggest reading this article because you will probably need to learn some watch options like deep and immediate.

In React, we use the built-in useEffect hook to watch for changes.

import { React, useState, useEffect } from 'react'

function ReactToDataChanges() {
  const [number1, setNumber1] = useState(0)
  const [number2, setNumber2] = useState(0)
  const [sum, setSum] = useState(0)

  useEffect(() => {
    console.log('I am here!')
    setSum(parseInt(number1) + parseInt(number2))
  }, [number1, number2])

  return (
    <div>
      <input
        onChange={(e) => setNumber1(e.target.value)}
        type="number"
        name="number 1"
      />
      <input
        onChange={(e) => setNumber2(e.target.value)}
        type="number"
        name="number 2"
      />
      {sum}
    </div>
  )
}

export default ReactToDataChanges

useEffect expects a function to run when a dependency changes as the first argument and a list of dependencies as the second argument.

Keep in mind that this is also a made-up example to demonstrate useEffect (we could achieve the same without useEffect by taking the sum variable out of state).

I want to show a very common use case for this hook: fetching data from an API after the component loads:

useEffect(() => {
    fetchUserData()
}, [])

const fetchUserData = async () => {
    const url = '';
    const response = await axios.get(url);
    const user = response.data;
    setUser(user);
}

We can specify empty array to run the useEffect once when the component renders. In Vue, we would do the same operation inside a lifecycle hook, such as created or mounted.

Computed Properties vs useMemo

Vue has a concept called computed properties, which serve the purpose of caching rather complex computations and re-evaluating their values whenever one of the dependencies change (similar to watch).

It is also useful in keeping our templates clean and concise by moving the logic to JavaScript. In this case, they act like regular variables which we don't want to be a state.

<template>
  <div>
    <h3>Yigit's Favorite Cities are:</h3>
    <p v-for="city in favCities" :key="city">{{ city }}</p>
    <h3>Yigit's Favorite Cities in US are:</h3>
    <p v-for="town in favCitiesInUS" :key="town">{{ town }}</p>
    <button @click="addBostonToFavCities">
      Why is Boston not in there? Click to add
    </button>
  </div>
</template>

<script>
export default {
  computed: {
    favCitiesInUS: function () {
      return this.favCities.filter((city) => this.usCities.includes(city))
    },
  },
  data() {
    return {
      favCities: [
        'Istanbul',
        'München',
        'Los Angeles',
        'Rome',
        'Florence',
        'London',
        'San Francisco',
      ],
      usCities: [
        'New York',
        'Los Angeles',
        'Chicago',
        'Houston',
        'Phoenix',
        'Arizona',
        'San Francisco',
        'Boston',
      ],
    }
  },
  methods: {
    addBostonToFavCities() {
      if (this.favCities.includes('Boston')) return

      this.favCities.push('Boston')
    },
  },
}
</script>

<style></style>

Here, we do not want to put the favCitiesInUS function inside our template because it is too much logic.

Think of it like a function where the output will be cached. The function will be re-evaluated only if favCities or usCities (its dependencies) changes. To try that, you can click the button and see how the template changes. Keep in mind that computed functions do not receive any arguments.

We can use the useMemo hook to achieve the same result in React. We wrap the function in the useMemo hook and provide the list of dependencies in the second argument. Whenever one of those dependencies changes, React will run the function again.

import { React, useMemo, useState } from 'react'

function UseMemoTest() {
  const [favCities, setFavCities] = useState([
      'Istanbul',
      'München',
      'Los Angeles',
      'Rome',
      'Florence',
      'London',
      'San Francisco',
    ]),
    [usCities, setUsCities] = useState([
      'New York',
      'Los Angeles',
      'Chicago',
      'Houston',
      'Phoenix',
      'Arizona',
      'San Francisco',
      'Boston',
    ])

  const favCitiesInUs = useMemo(() => {
    return favCities.filter((city) => usCities.includes(city))
  }, [favCities, usCities])

  return (
    <div>
      <h3>Yigit's Favorite Cities are:</h3>
      {favCities.map((city) => (
        <p key={city}>{city}</p>
      ))}
      <h3>Yigit's Favorite Cities in US are:</h3>
      {favCitiesInUs.map((town) => (
        <p key={town}>{town}</p>
      ))}
      <button onClick={() => setFavCities([...favCities, 'Boston'])}>
        Click me to add
      </button>
    </div>
  )
}

export default UseMemoTest

Vue Slots vs Render Props

We sometimes want to create generic components that can display other components inside of them, such as a grid component that displays any type of item inside it.

For that purpose, Vue has a mechanism called slots. The logic behind slots is really simple: you open a slot in the component which should receive another component to render (let's call it consumer, because it consumes the elements that are provided).

In the producer, you pass the components that consumer should render inside its tags – you can think of them as filling the slots you opened in the consumer. The first element will be rendered in the first slot, the second in the second slot, and so on.

If there is more than one slot, you have to set the names as well. Let's see an example:

<template>
  <div>
    <h3>Component in slot 1:</h3>
    <slot name="slot1"></slot>
    <h3>Hello slot1</h3>
    <slot name="slot2"></slot>
    <h3>Component in slot 3:</h3>
    <slot name="slot3"></slot>
  </div>
</template>

<script>
export default {}
</script>

<style></style>

Here is our consumer component. It may be creating a layout or some composition from multiple components. We create the slots and give them distinct names.

<template>
  <div>
    <consumer>
      <custom-button
        text="I am a button in slot 1"
        slot="slot1"
      ></custom-button>
      <h1 slot="slot2">I am in slot 2, yayyy</h1>
      <custom-button text="I am in slot 3" slot="slot3"></custom-button>
    </consumer>
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue'
import Consumer from './Consumer.vue'

export default {
  components: {
    CustomButton,
    Consumer,
  },
}
</script>

<style></style>

And here is the producer passing the components to the slots of consumer by specifying their slot name as an attribute.

And here is the simple CustomButton component if you are interested in that:

<template>
  <button>{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'I am a button component',
    },
  },
}
</script>

<style></style>

Can you guess the output without running the code? That might be a good exercise to make sure you understand slots.

In React, it is much simpler. I think the slots overcomplicate things a lot. As React uses JSX, we can just get away with passing the component to be rendered as a prop.

import React from 'react'
import Child from './Child'

function Parent() {
  const compToBeRendered = (
    <div>
      <h1>Hello</h1>
      <button>Im button</button>
    </div>
  )

  return (
    <div>
      <Child compToBeRendered={compToBeRendered}></Child>
    </div>
  )
}

export default Parent

import React from 'react'

function Child({ compToBeRendered }) {
  return (
    <div>
      <h1>In child:</h1>
      {compToBeRendered}
    </div>
  )
}

export default Child

Final Thoughts

In this last section of the article, I would like to share my two cents on these frameworks.

As we have seen through the article, Vue usually has its own way of doing things and has different constructs for most things. Sometimes this makes it a bit harder to get started with in my opinion.

On the other hand, React is like pure JS, blended with JSX: not much magic and not many special keywords to learn.

Although it may be not be the most beginner-friendly framework, I believe that the abstractions/keywords Vue provides (such as v-for, v-if and the Options API) allow you to write code at a higher level of abstraction (think of adding a simple statement to iterate over components versus a low level, multi-line map function).

These features also make your Vue code more structured and clean because the framework is opinionated. So it has its own ways of doing things, and if you do things that way, you will end up with code that is easy to read and understand.

React, on the other hand, is not very opinionated about things and provides developers with a lot of freedom to decide the structure of their project themselves.

But this freedom comes with a cost: if you are a beginner who is not aware of best practices, it is easy to end up with messy code and a poorly structured project.

Another important difference in my opinion is this: if you are going to build a non-fundamental project with React, you will need to use a lot of external libraries to develop at a normal speed, which means you will need to learn how those things work as well.

Conclusion

Thank you for reading and I hope this comparison was useful. If you would like to connect, ask questions, or discuss further, feel free to send me a message on LinkedIn.

We just released a Vue course on the freeCodeCamp.org YouTube channel that will teach you the latest version of this progressive JavaScript framework.

Gwendolyn Faraday developed this course. She previously created one of the most popular Vue courses on the entire internet and now she's back with this updated course.

In the course, you will learn the fundamentals of VUE and apply what you learn to build an e-commerce website.

Here are the sections in this course:

• What is Vue.js?
• Vue 3 Setup
• Vue JS Directives
• Events and Methods
• Components
• Component Props
• Lifecycle Hooks
• App Demo
• Adding Items to Cart
• Reuseable Components
• Vue CLI
• Vue Folder Structure
• Top Nav
• Styling with SASS
• Sidebar
• Adding Items to Cart

Watch the full course below or on the freeCodeCamp.org YouTube channel (4-hour watch).

Transcript

(autogenerated)

Gwendolyn Farraday previously created one of the most popular Vue courses on the internet.

Now she's back with an all new full Vue course to teach the latest version to absolute beginners.

Hi, everyone.

My name is Gwendolyn Faraday and I will be your instructor for this course.

I have been a professional software developer for over five years now.

And I've had the opportunity to work in several different languages and frameworks over the years, including Angular react, and Vue js.

I currently work as a software consultant in various technologies, and use Vue js as my preferred front end framework for any type of web or mobile application.

If you would like to reach out to me, you can find me anywhere online at Faraday Academy.

If you have any specific feedback for this course, please email me at gwenf@protonmail.com.

I hope you enjoy this course.

Vue js is a JavaScript framework for building applications and websites.

How does it help you? It provides tools out of the box to help you make your websites and apps faster and more dynamic.

And it also gives you a set of standards for code organization and expectations for individuals and teams that work in the same code base.

If you have heard of the virtual Dom before, Vue js is a virtual Dom framework.

If you don't know what that is, it's okay.

It's not important for understanding this course.

The virtual Dom basically makes JavaScript web applications a little bit faster and more efficient Vue by itself is extremely lightweight, you can get it down to about eight or 10 kilobytes g zipped.

Although in a practical sense, your Vue and bundled JavaScript will probably never be that small in an application anyway.

Although it is good to know that Vue doesn't have a lot of extra code taking up more space in your application.

Why does Vue JS call itself a progressive framework, they use the term progressive to mean that you can use it anywhere from small features on websites where you want to add some interactivity and using it as kind of a drop in replacement for jQuery and legacy applications.

All the way up to using it as a more full featured batteries included framework for large scale applications like Gmail or Twitter or something like that.

You get to decide what features you want to add in from the Vue ecosystem beyond the core library, and it's extremely flexible to allow you to choose the tools and other libraries you want on your own.

Or you can use the ones that Vue provides in its ecosystem by default, many people and companies are using it for its incrementally adoptable nature.

That means that if they have a legacy application, it's quite simple to update their application page by page to turn it into a Vue application into a more modern application, instead of having to rewrite the whole app at once.

That is one very convenient thing about Vue j s.

Let's look at a really quick overVue of the history of Vue.

The Vue project was started in 2013 by its founder, Evan you.

In 2014.

version one launched and started to become popular in China where revenue is from a few years later, Vue two was launched with many new updates and improvements over Vue version one.

And with the release of version two is really where we start to see the massive growth of Vue j s and popularity in the rest of the world.

So many developers had not heard of uJs before 2017.

But from 2017, and especially in 2018 and 2019 Vue really solidified itself as one of the top three JavaScript frameworks.

Many Vue conferences started popping up lots of content creation around the Vue ecosystem started to take place.

And many companies started to use Vue for their applications as well.

In fact, many companies that do you recognize, which are household names in the West, use Vue, j s now.

And now we can see that Vue version three has been released in fall of 2020.

And along the way, over these last six years, we see many different libraries that are also created and maintained by Ave and the core team of Vue.

Like the vcli Vue router in Vue x, also being regularly updated to match with the current version of Vue.

Even now, with Vue three just released, we see that a new version of Vue, router and VX have also been released to be compatible with Vue version three.

In this course, we will be using the Vue j s core library as well as the vcli.

For more information on Vue, x Vue router, Vue test utils and some of the other tools in the Vue ecosystem that I don't cover in depth in this course, I will be making future courses about those on my Faraday Academy YouTube channel.

So let's get started with learning v j, s.

And keep in mind, I'm using v3 here.

So make sure you are at the correct website, which is v3 dot Vue, J s.org.

And then click on getting started here.

This will take you to the documentation.

And by default, the introduction to Vue j s, I'm going to go straight to the installation link on the sidebar here.

And if I scroll down, I can see the place where it says CDN.

And you'll notice here it says Vue add next make sure you are importing the right library from the right URL here at next is necessary, because Vue three is not in the main Vue j s repository yet it's in this other repository that you can reference with that next, which points to Vue three, until the whole ecosystem and everything finishes getting updated.

There is going to be a difference between importing Vue to an importing Vue at next, which points to Vue version three.

And I'm going to go ahead and grab this script tag here.

So I'm in VS code, and I just have a basic HTML file.

And I'll be adding Vue j s into this application to demonstrate the basics of Vue syntax before I get into building a larger application with the Vue COI.

So first of all, I'm going to be using VS code plug in called live server.

And you can see at the bottom here it says go live.

So if you go to plugins, which is this four box icon on the side, you can type in live server and click on this plug in.

And you can install it if you do not already have it installed.

But I already have it installed and enabled.

So I'm going to go back to my code over here.

And at the bottom, I'll just click go live.

And you can see it shows my HTML page, I'll just zoom in a little bit here with the static content.

Now if you don't want to use live server, you can just come here and right click and click on copy path.

And then you can go to your browser and paste that absolute path to the project or to your index dot HTML file.

And it will display the same way in the browser.

live server just makes things a bit easier because it will automatically refresh when you make code changes.

And it also opens up the browser page for you.

But it's up to you if you want to use it or not.

So now I want to add Vue to this application.

So I'm going to go inside of the body tag and just below this div, just paste in the script tag that I just copied.

So now this is all that I have to do to import Vue and start using it in my application.

I don't actually need Babel or anything else to get started.

So to write my own custom code, I'm going to add my own script tag right below that.

So there's basically two things that I need to do here.

And the first is to use this Vue variable that I have access to from importing Vue.

And that script tag and Vue gives me this method called create app.

And that basically creates my Vue application.

And I can pass it an options object, which I'll get to in a second.

Now I need to somehow connect this JavaScript for my Vue application with the HTML that I'm going to be displaying in the browser.

And that is through another method that I can actually chain on to this Vue instance I'm creating.

So I'm actually going to save this as a variable.

I'm going to say let app equals Vue create app.

And then I'm going to use this other method called Mount because I want to tell it to mount my Vue application somewhere in my HTML here.

So I'll do ID equals, I'll just call it app.

And I'm actually going to tell it to mount to my Vue j s application inside of that div.

And that means that the Vue j s instance that I'm creating here will be able to connect and display data and interact with any kind of DOM element inside of this div here.

So that will be more clear in a second.

So now let me change this, let me create a variable on my Vue instance.

And to do this, I need to create a function called data here.

Now this whole object here is called the options object.

So any variables or functions that I'm going to use in my application will live on this object here.

So specifically with data that is a function, and it needs to return an object.

And on this object that is returned by the data function, I can put whatever variables I want.

So I'm going to create a greeting variable.

And I'm basically going to say hello, v3, then exclamation point.

And now I can actually go into my div here, delete that static code there.

And I'm going to use my variable now.

So to use a variable in Vue, you use this double curly brace syntax, it's called double mustache syntax, which is kind of hard to pronounce.

So you can just call it double curly braces.

It's a common syntax in templating languages.

And it basically means that anything found in between these sets of double curly braces will be parsed as JavaScript by Vue.

So Vue is first going to look inside of this data object that we're returning, and see if there is a variable named greeting, and then it is going to display that variable or the value of that variable inside of these curly braces.

And you can see that now it displays the greeting variable from our Vue instance.

Let's talk about Vue j.

s directives.

They are basically a way to connect elements in our HTML or template here with the Vue j.

s JavaScript.

And let's see what that looks like through an example.

I'm going to create an input here.

In the browser, it looks like this.

Now, what if I want to get the value out of this input Vue has a built in way to do that through a directive called v model.

Now, these directives in Vue are used just like an HTML attribute, but they are prepended with v dash to differentiate them from regular HTML attributes.

And Vue when it is parsing this Vue application will see this keyword v model, and will bind it to whatever variable we pass in as an argument to the model here.

So here inside quotes, I need to put a variable name.

And I'm actually going to put the variable greeting here.

And let's see what that does.

So you can see now in my input, it actually starts off with the text Hello Vue.

And as I change it, it also changes the greeting variable that is displayed on the page.

This is called two way data binding and is handled in Vue with that V model directive.

Let's look at another directive.

I'm going to create an HR here.

And I'll make a div with a class of box.

And I'm going to use another directive here called v if, which also takes an argument, which will be another variable.

So I'm going to set an is visible variable which I have to create.

So let me do is visible and set this to true to start, I am going to paste in some styling that I made.

This is just to style the box so you can see it on the page.

Awful that you can see that I do see that box, because this V if directive is basically just like an if statement in JavaScript.

So if this value is truthy, then this element will be displayed on the page.

But if it's false, this div will not be rendered to the DOM at all.

So let me change this variable to false.

And you can see the box disappears.

And if I check, I can inspect element.

And there is no div found in the DOM.

Now v If is very similar to V show, which is another vj s directive, it takes the same kind of argument a Boolean expression.

And let me set this to true again, you can see if it's true, it shows on the page, just like v if.

However, when it's false, you can see there's still a div, render to the DOM.

The only difference is the style is set to display none.

So you won't actually see it, but it is there in the DOM.

So when would you use v show? Well, in most cases, you would just use v if, because you either want something to render or not.

Like if you have a loading spinner, you would use V, if it's loading show the spinner.

And then when the page or whatever has loaded, you would set the variable to false and then v if would remove it from the DOM.

Now v show is useful for specific cases, when you might need to toggle something more frequently.

And it would be more performant than adding and removing it to the DOM constantly.

So it's already there, all you're doing is changing the CSS.

So you're changing it from display none to display block.

So changing this back to Vf.

There are other directives that you can chain on to Vf.

There's v, elsif, and V else.

And you can already guess what these do.

So I'm just going to show you the syntax here.

So v else if and V else is the one that doesn't take any argument.

And I'm just going to demonstrate these really quickly.

I'll add another variable here.

So it's visible is visible to.

So I've added a little bit more CSS here to differentiate between the three boxes that I've created here.

And this works as a regular if else statement.

So if is visible is true, this div will be rendered.

If it's not true, it's going to keep going down the chain.

So it will look at any v else ifs you have here, you can have as many as you want.

So then it will look at is visible to to see if that is true.

If that's not true, then it will automatically display this third box.

Now the third box is blue, the second box is red, and the first box is purple.

So you can see the blue box displayed because the other two values were false.

Likewise, I could change one of these variables to true.

And then that box would be rendered in the DOM here.

Now I want to point something out here, if I refresh the page, you can see for a split second, you actually saw all of the boxes render, as well as the curly braces show up on the screen here before it was parsed as a Vue variable.

I'm going to refresh the page again and slow it down a little bit, just in case you couldn't see that.

So how do I prevent that from happening? Vue has something called v cloak, which is a convenient utility that will hide anything from rendering until the whole Vue application is ready.

So I'm going to add a V cloak here.

And then I basically need to add a style for it.

So you can see, I'm setting v cloak or this V cloak attribute to display none.

This is the recommended pattern in Vue js.

And then I just add a V cloak to my div with my app in it.

Now if I go back here and refresh, you no longer see the curly braces or the other boxes render.

How does that happen? I'm going to go to inspect element.

And you can see on the div with ID app here, there is no v cloak attribute.

But if I refresh the page, you can't really see it because it's too fast.

But basically, that V cloak attribute remains on this div until the app is loaded, and then it's removed.

Once everything is rendered to the DOM.

I don't often run into cases where I have to manually use this, but it is a nice feature to know about if you run into that issue.

These were just a few basic directives.

We will definitely be covering more directives as we go along in this course.

In the next video, we will go over events and methods in Vue js.

Now that you've seen how to use variables and directives in Vue, j s, let's make this code a little bit more interactive with a So you probably already know that there are many events that can be captured in the browser and used in our applications.

For example, when the user clicks on an element on the screen, like a button, or if the user presses a certain key on the keyboard, like Enter to submit a form, let's try out both of these cases in our little mini application here.

First, going to get rid of the two extra boxes.

And I'm going to add a button here.

Which for right now, I will label as showbox.

So right now, this V if is set to false or the variable is visible set to false.

So this div will never be rendered on page unless we somehow update that variable.

Before we were hard coding the variable value here as true or false.

But we can actually use this button to change the variable value as well.

And this is done with another directive called v dash on.

Now, the v dash on directive is specific for events.

You can use it for custom events that you create yourself.

Or you can use it for any of the standard browser events, like, as I mentioned before, when a user clicks or presses a key on their keyboard.

So here's specifically, I'm going to do v on colon, and then the type of event which will be a click event.

So I'm listening for a click event on this button right now.

But now when someone clicks on the button, I have to tell you what to do with that click event.

So I need to pass in an argument of whatever JavaScript I want to run when this button is clicked.

And for right now, I will keep it simple.

And I'm going to set the is visible variable to true when that button is clicked.

Now you can see I have this button show box.

When it's clicked, the box shows what if I want to hide the box.

Right now, this only shows the box.

And the only way to get rid of it is by refreshing.

I can set up a toggle for the box, by simply saying is visible equals the opposite of whatever it currently is.

So is visible equals not as visible.

So if it's true, it will be set to false.

If it's false, it will be set to true.

And this should toggle our box, we label this to toggle box.

And now, if I keep clicking toggles on and off, that is basically how events work.

There's also a shorthand for creating events.

So you don't have to type out the dash on colon, you can just type the app symbol, and then the event name.

And this is exactly the same thing as it was when I typed v dash on colon.

the at symbol just replaces all of that.

So what if you wanted to do something more complex in here not just setting a variable to True or false? Well, you can actually use this to pass in any kind of method on your VJs object.

So I'm going to get rid of is visible here.

And I'm going to create a method called toggle box.

And now I have to create this toggle box method.

You can see I already have data on my vj s object, this data function.

But now I need to make another key, which is called methods and methods is an object of functions.

I can put as many functions as I want on this methods object to be able to use these in my Vue, j s application.

So let me create that toggle box function.

I could do the same thing here as I did above, but I'm just going to use the function shorthand and I want the same logic again but inside this function, so in order to refer to this is visible variable here, I have to get it off of the this context.

And Vue j s handles putting all of my methods and variables on the this context so that they're available to me anywhere in my Vue application.

So I can do this.is visible and then set it equal to not this.is visible This is not function there.

And this should work the same way as it did before.

So I can test it out and toggle the box once again.

So that is the basics of how methods work.

And you can see because I have called my method toggle box That it is also available to me anywhere inside my Vue JS template here.

So let's look at one more type of event.

And that will be an event listening for keyboard input.

So here I want to listen for key presses.

This is also an event.

So I'm going to start with the Add symbol.

And listen for a key up event.

I could also use key down if I wanted to.

So for keyboard events, I need to add a modifier to say which keyboard input I am listening for.

So for input here, I want to run a function or some JavaScript, whenever I press the enter key.

So for enter, I actually have a shorthand because this is a common keyboard input.

So I can say, Listen for the key up event specifically with the enter key.

Or I can always use the key code associated with any key on the keyboard.

So for enter, that would be 13.

It doesn't matter which one I use, I'm just going to go ahead and use key up dot enter, because it's a bit more obvious what it is.

And then it's the same syntax here.

And I'm going to create a greet method for this key up event.

So let me go down to my methods, create a method called greet.

Use the method shorthand.

And I'm actually just going to console dot log, this dot greeting.

And let's see how that works.

So I can just focus this input anywhere and just hit enter, it doesn't matter what's already in the input.

And you can see it logs out the greeting.

If I change the input, it logs out whatever the greeting variable is currently set to.

Now what if I want to pass something into a function as I'm calling it into one of these methods, then I could do that, just by adding the parentheses to call the function.

So for example, greet here, I can just pass something in.

So just for demonstration purposes, I'm going to pass in the greeting through the template here.

I'm going to accept that here.

And I'll still call it greeting.

And then get rid of this because I'm no longer looking for the greeting variable.

On the vj s instance here, I am actually just going to be using the greeting variable that I am passing in here.

And just to show you that it's different, I can use the greeting variable and then pass it in with some exclamation points appended to it.

And now when I go here, and I click Enter again, you can see that it is the greeting variable that I passed in through the template.

If I erase a few characters here, hit ENTER again, you can see it's still the same variable set to the new value.

Those are the basics of how to use events and methods in Vue js.

I do want to point out here, you see this dot enter, that is an event modifier in Vue js.

So you're not only listening to the key up event you're listening to specifically the enter key.

Now there are many modifiers that you can use.

For example, at this click event here, for example, I get I have a modifier here that says I'm only listening for right clicks.

So a normal left click on a mouse will not trigger this toggle box.

But only if you make a right click, I can also use some handy modifiers like prevent.

So if I don't want a form to submit instead of using the regular event dot prevent default in my method, I can just add this modifier here dot prevent.

And I can do that for stop propagation as well.

So I could add that stop.

You can chain as many of these modifiers as you want in Vue j s, there are definitely a handy thing to know about when you're building Vue applications.

That's all for this video, we will be diving deeper into events and methods later on in this course and in future courses.

In the next video, we're going to talk about custom components in Vue js.

Let's talk about Vue components.

Now when we created our Vue application here, we are basically just using one standard component, you could call it just a default options object for use in our template.

So now we're going to work on breaking up parts of our application into separate components in order to prepare for learning how to build larger applications and work on applications with the Vue COI outside of a single HTML file.

Let's take a break from the code for a second and take a look At what we are going to be building with Vue components, we're going to use a simple example of a form to work on breaking up an application into separate components.

Now, where you see the red outline, those are each going to be a separate component.

So the outer red outline around the whole login form will be its own login form component.

And then each input with its label will be a custom input component that we are going to create and be able to reuse for as many inputs as we have.

So we're going to start off with this outer component, and then break out the inner components into their own components after that.

And then we are going to look at how you can pass data around between components in your application.

So what would a Vue component look like? Let's say we wanted to have a form in here.

And I'm gonna get rid of this greeting really quick.

And put a form here.

So I could do this directly in the HTML and create a form tag.

Or I can create a custom tag as a Vue component called custom form.

Now, this is the same syntax as if it were an HTML tag.

Except, of course, it is not a standard HTML tag.

So I have to define it as a Vue component down here.

And I need to define it after I define my app variable, which is my Vue instance.

And before I actually mount it to the DOM, so I can chain this here as app dot component.

This is a function and it takes two arguments here that I'm going to pass in.

So the first one is the name of the component that I'm going to use.

And that is the name that I'm going to be using in my HTML up there.

So I'll give it the same name custom form.

And the second is an options object.

And since this is his own self contained component, I can actually use any of the same options that I've been using here, such as data and methods, etc.

The only extra thing that I need right now is I have to define a template for this component.

And the easiest way to define a template is by using graves.

So I can make this multi line and pass in the HTML here.

So real quick, I'm going to create a div.

And I'm just going to put, let's say, two inputs in here for right now, but a type of email, and then an input type of password.

And let's call this a login form.

Since we're doing email and password, I'll change that up here to login form.

And since template is the only required option that I need to pass in on this object, it should run like it is right now.

So let me see if this works.

I'm gonna go to go live.

And you can see these two form inputs up at the top here, completely unstyled, just basic browser inputs.

So I'm going to style these inputs really quickly, so they're easier to see.

After all of these boxes, I'm going to add a reference to input here.

I'm going to say margin of 10 pixels just on all sides, and display of block so they don't go in line.

And now they are a bit easier to see here.

Alright, let me code for the styles again.

And now let me add a data method to this component.

So you can see what that looks like.

So after this template key I have here, I'm going to do the same thing I did above.

With data, I'll just use the function shorthand here, return an object.

And here I'm going to give it a title.

And the title will be login form.

And now I need to do something with this title.

So up here when I defined variables, I use them inside of my app template here.

But since my login form is a self contained component, any variables I define on data here, I am going to have to use them inside its own template.

So I'll just add another line here and give it an h1 and by the way, This doesn't have syntax highlighting, and isn't kind of a weird template form.

Because I'm just doing this all in one HTML file.

This is just a stepping stone to get to more standard ways of creating Vue components where you will have syntax highlighting, and auto completion and all of those other great features.

So here, I need to use that variable title.

So I'll use that the same way I did before by referencing it.

And now I should see the title on top of those two input boxes.

And indeed, I do here I am, zoomed in quite a bit.

So that is a basics of how you can create a component here, I'm going to go ahead and keep building out this form, and then also show you how to compose components now.

So I'm just going to change this really quickly to form.

And then I'm going to add some submit functionality here.

So I'm going to add an event for submit, submit, and then pass in an argument with the method I want to run or the function I want to run when I submit a form.

So I'm just going to call my function, I suppose handle Submit.

And then I need to make a methods object down here with that function.

I'll call it a handle, submit.

And I will just console dot log submitted.

So now when the form submits, it will run this function, there's a few more things that I need to do, I need to add a button here, that will actually submit the form.

So by default buttons are type submit, so I don't need to add that here.

But I am going to add some text to the button.

Now when the form submits it refreshes the whole page.

Of course, this is the default behavior in browsers.

So you can just automatically click and send data from the form to your back end.

But since we are going to be handling the form submission from our handle submit function, we don't want this default behavior with the page refresh.

So like we saw earlier, we have event modifiers.

So we can do prevent, to prevent default, this would be the same thing as passing in an event object to our handle submit function, and then doing e dot prevent default.

Again, this is just a shorthand.

So now if we look at our console, here, we see that it logs submitted when we submit the form.

So now, we probably want to be capturing these inputs.

So we can do that.

Again, by using the directive v model to bind to the value of the form input to a variable, we'll call this one email.

And we'll v model this one as password.

And then add these into data.

And now let's log those out.

So let's log out email.

And password.

Of course, if you remember, I have to get it off of the this context, since I'm referencing it inside of JavaScript here.

And now I should be able to type in something here, this has to be an email.

So I'll say gwen@example.com.

Just any password, and I'll click Login.

And you can see it did log out my credentials here.

Okay, so that's one component.

In the next video, let's look at how to break up this component and take out the inputs to put them in separate components, as you saw in the markups earlier in this video.

And we'll also look at how to pass data between components.

So from a parent component to a child, and then also from a child backup to the parent.

So what if we want to compose multiple components together? Let's demonstrate this by removing the inputs and creating a custom component just for our form inputs.

Let's say we want some logic just contained within a special input component.

So let me fold this real quick.

And I'm going to create another component here.

I'll do app dot component again.

And I'm going to call this custom input passing in options.

object.

Again, I need to have a template here.

And in this one, I'm just going to have Label Label when a display a label variable here, and then I'll have that wrap around the input.

And I'll use a type, just the default text for right now we'll change that in a second.

And that is a default input.

So now where am I going to use this component, so I'm actually going to replace my input fields in this component with this new one that I created.

So what I can do here is Call this Custom input, and custom input.

And I can use my components inside of this other component.

Now there's one more step that I have to take here.

And that is registering the component.

So I have to let my login form component know about the other custom component.

And I can do that here by creating components array, and then just give it the string of the component that I want to be using, which is custom input.

Now let's see how this works.

Okay, so I have these two inputs.

Now it is giving me this warning, that property label was accessed during render, but it's not defined on the instance.

This is happening, because here, I'm referencing this variable label, but it is not defined anywhere.

So it's giving me that warning.

Now I could define data function here and create the variable on this component.

But I want to demonstrate passing data from one component to another.

So instead of defining it on this component, I'm actually going to define label on the parent component and pass it to the custom input component.

To do that, I'm going to come here and add just a label, let me add in, we call it email label for right now.

And I'm going to call it email.

And I'll also have a password, label and call this password.

Now I have to get these two variables passed into these custom components here.

And so what I'm going to do here, I can go ahead and get rid of the V model for just a second.

And I'm going to add a label here that I'm going to pass in.

And I'm going to pass in the email label.

Now this looks just like an HTML attribute.

But I'm actually going to add a modifier on here.

That is a Vue directive called v bind.

What v bind does is basically turn this regular HTML attribute into something that can be parsed as JavaScript so that I can pass down a variable to the child component.

So I'm v binding this label, which is email label, which refers to this string here, which is email, this will get passed down as a property to the child component called label.

And now in this custom input child component, I need to receive that property to accept it here with a props object.

And the simplest way to write props is to make an array of strings, just like I did for custom components.

And these props are basically just a list of all of the names of the information that I'm passing down from the parent to this child.

So now, because I'm defining label in props, I will have access to use the label variable here inside my template.

Now if you look at the login form, you can see that the email field, it has a label here, and you can tell it to label because when I click on the word email, it focuses on the field it's related to.

So let me give a label the password now to I'm going to pass in password here.

By the way v bind, there is also a shortcut for V bind.

This is one of the most common directives in all Vue applications.

So the shortcut is instead of using v bind colon, you just use colon and then label.

So let me pass a label in here as well.

So I'll pass a label in As password label, since we're using this reusable component, the label will always display as the label that we pass in.

And now you can see that both form fields are properly labeled here.

Now I want to point one thing out really quickly.

And that is for email and these password labels, you could not make variables for these and just pass them in as strings here.

So for example, if I get rid of the bind of the colon, shortcut there, then I could just pass in, let's say, password.

And let me put enter email here.

So it's different.

And now I can just pass in this text as a string.

Because there's no more v bind here, Vue is no longer looking for a variable.

So now in the application, you can see that it's just passing the string down as a label to the child component and displaying that string, I'm going to do those changes.

When you're working in actual Vue applications, you will see that 95% of the time, you want to pass a variable in when you're passing a prop down to a child component, either a data variable or some kind of a function.

So you'll almost always be using this V bind syntax here.

Now there's one issue because in the child component, we have the input down here, we're not actually listening for changes to the text in the input, we're not v modeling that to any variable, so we don't have access to whatever is inside the input.

So we actually need to create a V model here in the child, I'm going to save the model.

And just temporarily here, I want to map this to a variable in the child.

And I'm going to could just call this input value.

And I need to create data function here, return an object with input value as an empty string.

So now in this case, you're already familiar with the model.

And you know that anytime we type a character into this input, it's going to update this variable and this variable, and the input will stay in sync.

But now how can I get the value of this variable up to the parent component here, because I actually want it to stay in sync with these two variables on the parent component.

So that way, when I submit my form, I can have access to it in this handle submit function.

So there are actually a couple different ways of doing this.

I'm going to show you the most straightforward approach for getting started with this.

And then in future courses, I'm going to explain a little bit more in depth about how you can use custom events and other methods of capturing the value of a variable from the child to the parent.

So to get started, here, I'm going to use my same input variable.

But I'm going to use a new object here.

And this object is called computed.

I'm going to comment out data for a second.

So computed is an object where you can put variable names in here as keys.

So for example, this input value variable that I want to create, I can put it in here as a key.

And whenever this value changes, I can actually get it to run getter and setter functions.

So I can create a getter function, and then a setter.

So when I get the variable value here, it will run this function.

And then when I go to set the variable value, it will run the set function.

So now what value do I want to put in my getter here, I want to get that value from the parent component.

So I'm actually going to use these two variables that I already have here.

And I'm just going to get rid of these types.

I'm not using them yet.

So get rid of those.

And I'm actually going to do something different.

I'm going to create v model directly on my custom component here.

And I'll show you why in a second.

And I want to model this to the variable that I'm going to be using.

So for this one, that is the password variable.

And for this one, that's email And these got out of order.

So I'll switch them around.

Okay, so now I'm be modeling the email and password.

And now I want to get these variables in my child component here.

Now, how do I do that.

So in props, I can actually accept a prop called model value.

And this comes from the parent.

Now it doesn't really look like we are passing in another Prop, because we're not v binding any variable and passing it to the child.

But actually, what v modeling does on a child component is actually under the hood, it's giving us another prop called model value, which is mapped to email.

So v model does a few steps all at once, it's kind of a shorthand here.

So I have access to this model value prop because I'm using the model.

So I can accept that prop in the child here v model.

And then in my getter function, I can do this dot model value.

And I can return that.

So now whenever I get the value for this input, it should be the same as the value in the parent component.

And I can check that by just typing in some values here.

And you can see that the inputs are pre populated with the value from the parent component.

Because I am v modeling this input to a getter function that I'm setting here and saying that the value will be this dot model value, which comes from the V model variable in the parent component, which are these variables.

So now, how do we handle setting the value if we type text into this input here, so we need to capture the value first and Vue passes this in via a parameter.

So we can give this parameter any name that we want, I'm just going to call it value.

And I'm just going to first log out this value.

And so here, I can try typing in.

And you can see it's logging out the value of the input from that log in the setter function.

But now it's not setting a variable anywhere.

So let me go ahead and set the variable.

Now to do that, I'm going to use a new method that you haven't seen yet.

And that is this dot dollar sign emit.

What emit does is allow me to emit events that other components can listen to.

And I can pass data around by Vue application like that.

I can emit events that are built in like I could emit some kind of on click event or something like that.

Or I can emit a custom event that I create.

For right now I'm going to use an event that Vue gives me and this is called an update event.

This syntax is actually new, slightly updated in Vue three.

So if you see older tutorials, and might not be using this exact same syntax, it will probably be using an input event here instead.

But I'm going to pass in a value here.

Oops, I need a comma.

So this first argument is the type of event that I'm emitting.

And the second argument is the value that I'm passing through that event, which is this value that I'm getting from the input via the set function.

Now, how can I listen for an event in another component? I could set this manually.

But like I said before, V model is a shorthand.

So v model is actually listening for this update event from my child.

And whenever this update event emits, this V model from the parent component is updating the value of the variable for us.

Let's test this out.

I'm going to start typing here, typing here.

And I'm going to press login.

And you can see that it logs out the values of the email and password.

So this isn't that clear.

So let me put a real email here, or real fake email anyway.

And you can see there's the email and there's a password, which are coming from this log statement in handle Submit.

Now, you might be wondering, why do we have to go through all that trouble to model a variable from a child to a parent.

And the reason why is because the props that we pass to children, they are immutable.

We cannot them in the child, these variables on data here can only be changed in the same component.

So my custom input can't change anything we pass in via props here.

So for example, if I tried to model this to label here, getting all of these warnings attempting to mutate prop label, props are read only.

So I'm gonna undo that.

So that's why I had to create this extra variable in the child and create a getter.

So I'm getting this read only model value prop from the parent.

And then what I'm doing to update the value of that prop is I made it emitting an event to the parent, this update model value event.

So the parent, because I have this V model shorthand is listening for that event.

And this component, this login form component is actually updating these variables itself.

So I'm not actually mutating props from the child.

Now, there are definitely other ways of handling changing props in the child component, I could listen for changes on this input.

And I could call a method on a methods object, which could do the same thing either amid an event, I could also pass a function from the parent to the child, and the child can call functions in the parent.

And then I could update variables in that way too.

There are also other state management solutions.

And we will explore all of these different options later, I just wanted to give you an initial taste of how this can be done in Vue js, and specifically in Vue version three, now that the syntax has changed a little bit.

So in this video, we've gone over custom components, composing components together, importing them into each other, like we are with this custom input into the login form component.

We also talked about using props, passing data from the parent to the child, and then being able to set data by emitting an event that the parent can listen to and passing it a value.

In the next video, we are going to talk about loops in Vue to simplify our syntax here with having multiple of the same component.

Now let's talk about loops.

Here, we have two of the same component, these custom input components.

And I would like to just be able to loop through as many of these components as I want.

To do this, I need to add an array and data here.

And this array will have all of the information for each input here, including the variable that I want to model to the label name.

And I'm also going to add a type.

So I'm going to create an array here called inputs.

And just to demonstrate really quickly, I'm going to add just some strings here, like email, password.

And let's say name.

So what if I wanted to display all three of these strings inside the template here, I'm going to come back to looping over the form in a second.

But for right now, I'm just going to create a p tag here.

And I want to show each one of these strings inside its own paragraph tag.

So I'm going to create a loop for these, I'm going to say V four equals, and then I need to pass in the array here, which is called inputs.

And this will loop over the inputs array.

Now this is a four in loop.

So I'm going to have to create a variable that I can use in the iterations.

So I'm going to say for str, short for string in inputs, and now I have access to this string variable each time through the loop.

And I can basically just display it in a variable now.

Right, so it is complaining that I made a mistake in my syntax.

And of course that is because I didn't put a comma after my array.

And now you can see that these top three here are strings that are displayed in a paragraph tag.

Of course, they are so big because I am zoomed in so far, but they are displaying properly.

And that is basically how you use a loop in Vue js.

I am missing a prop here that I need to add.

Whenever you do a loop you have to add a key prop here and this key has to be unique on E iteration of the loop.

Now the reasons for using this key prop are a little bit more advanced.

So I'm not going to go in depth on it in this video.

But I just want you to understand that it is good practice for you to use a key that will uniquely identify any elements that you loop through in your Vue JS templates.

This can help with performance and preventing bugs in your applications.

And when you move into programming a more structured Vue application with Vue components in their own files, you will see that your linter and code editor will pick up on it if you don't have a key value here.

And it will give you a warning and ask you to add one.

So we have to have a key to give a unique reference to each one of these paragraph tags, we're adding into the template.

Now what I can do since the names are unique here, each string is different.

So I can v bind to key, the string variable str.

This is a really simple Vue application.

So you basically don't notice a difference in the browser.

But you can see that there are keys attached to these elements.

Now, I want to point out though, that one more way that you can create this unique key every time through the loop is you can actually get an index through each iteration of the loop.

You can get it here and then use it as your key.

And if I print out I, you can see that I is the index of each iteration in the loop, put that back a string.

So this was just a demonstration, of course.

So I'm actually going to get rid of this whole p tag here.

And what I really want to be putting in inputs here are objects for the information that has to do with each input that I want.

So the first one, let me put a label here.

And I'm going to say the label is email, I'm going to create a value here.

And this was what I'm going to V model to.

And then I'll go ahead and add a type.

So let's say type is email.

And I'll do the same thing for password.

I can get rid of those now.

Alright, so now my application is broken, because I got rid of all the data that I had been passing into these custom inputs.

And actually, I'm going to get rid of one of these custom inputs, because now I'm going to be looping over just one, and it will create one for each iteration of the loop.

Let me clean this up a little bit.

But these on separate lines.

And so the first thing I want to do is create a V four here.

And this V four will look through inputs, just as I did before, I'm going to say four inputs in inputs.

And I'm actually going to get the index here really quick as well.

And then use a key of V bind the index.

So now I can't v model email, I need to V model based off of this input object, which is each object in this inputs array.

So I'm going to have to V model input dot value here to model it to the value.

So I'll do input that value, the label, also, I'm gonna have to do input dot label.

And now I do have a type.

So let me rebind a type as well.

And I'm going to do input dot type.

So that's one thing that I need to update in this child component.

Now, I'm still accepting that model value prop and the label prop.

But I also want to accept a type prop now.

And instead of doing type is text, now I have a prop from the parent based off of which component it is in the loop.

So now I'm going to V bind this so it can take a variable, and I'm going to say type, which will refer to whatever prop I've passed in.

So I'm going to come to my form here.

And I'm going to type in and I actually forgot to change the logging here for handle Submit.

So I don't want to overcomplicate things for this example.

So what I'm going to do is just delete this and log out this dot inputs of zero and that value and then this dot inputs, have one and then that value.

And this should fix my problem here.

Let me just type something in.

And it's complaining that I don't have an email address, I'm just going to type in a fake email, login.

And you can see that it has my correct login information.

So this is the basics of how to handle loops in Vue j s, is you can use V for either on regular HTML elements like an h1 or any custom components that you make as well.

This is very commonly done with card components.

If you see a website like Pinterest, how it shows all those different little boxes with pretty photos in them.

If that was both in Vue js, it would be doing this V for loop over all of those data objects that make up all of those Pinterest cards on your Pinterest wall.

The last thing we need to look at before we get into the demo application is lifecycle hooks.

So we will cover those in the next video.

Another important concept in Vue j.

s is lifecycle hooks, also called component lifecycle hooks.

So what is the hook and what are component life cycles.

To understand this, I made a quick demo.

Similar to the demo that we started off with in this course, I can click the toggle box button and a box appears.

Now I'm using a V if to take this box, add it you can see it was added to the DOM.

Now if I click again, it was completely removed from the DOM here, that whole process of coming into the DOM.

And then finally leaving the DOM.

That is the life cycle of this box component that I have.

Now, sometimes things might leave the DOM because you navigate to another page, or because something is coming into Vue via scrolling, or because you're hiding and showing something like this example.

In any case, you can use something called lifecycle hooks.

A hook is just a function that will be triggered to run at a specific point in the lifecycle of a component.

For example, it's a function that will be called right when this purple box appears on the screen, or right before it leaves the screen.

If you look at the Vue, j s documentation.

Now this is the version two documentation here, because they don't have what I'm going to show you yet in the version three docks.

But it is the same thing.

So I'm under learn guide.

And then if I scroll down on the sidebar, I'm at the Vue instance and creating a Vue instance.

And I can actually click on the lifecycle diagram here.

So this is a diagram like it says of the instance lifecycle of your Vue instance.

And like it says, You don't need to fully understand everything that goes on right now.

But it is a useful reference.

And this chart isn't just useful for your Vue instance.

But every single Vue component will have access to these lifecycle hooks.

So you can see these two up top in the red.

All of the boxes in the red are the lifecycle hooks, you can see before create and created, these hooks will be run right before and right after Vue.

js has initialized your component.

Now the next two before mount and mounted, the format is run right before your component is mounted to the DOM.

And mounted is run as soon as your component is mounted to the DOM.

components can also go through updates.

So before update and updated, like it says here, this will happen.

Or these updates will be triggered when data changes on your component.

So any of those data variables that you create, if you're incrementing a number or changing some kind of value, then updated and before update will run.

And then when your component is going to leave the DOM.

Now here it says before destroy and destroyed.

Now this terminology has been updated for Vue three for these two lifecycle hooks.

So if we go to the Vue three documentation now and we're on lifecycle hooks here.

I'm going to scroll down so you can see before create created before mount mounted before update and updated.

I'm going to skip over some of these and Now you can see it's before unmount and unmounted, which is in place of before destroy and destroyed.

The lifecycle hooks function exactly the same way, they've just been renamed.

I hope this will become a little bit more clear as we look at a demo.

So in the code, you can see I have the same box that we used before appear.

And here is the toggle box button inside of my Vue template.

But this time, I do have a special test box custom component that I made, which is toggled based off of a V, if so this is my main application.

And the options object with my is visible variable for whether or not the box is visible.

And then I just have a toggle box method, which I call when I click this button.

So again, this is pretty much the same thing that we did before.

Except for this new component here.

I put the box in its own component.

Now Now that we've learned about composing components, and I'm just going to add some lifecycle hooks here really quickly to illustrate when these are called on the component lifecycle.

So I'm just going to add a couple of them here.

We're gonna add created, and then mounted, and then unmounted.

And in each of these, I'll put a console dot log.

And let's see when these console dot logs print out.

Back in my browser, I'm going to hit toggle box here.

And you can see in the terminal at the bottom, created, printed and then mounted printed in the same order that we saw in the VJs documentation.

So this one happened before.

And then this one happened after it was mounted to the screen to the DOM here.

Now if I hit toggle box, again, we can see unmounted prints because that is run after the box leaves the DOM.

Now let's look at another one.

After methods here, I'm going to put lifecycle hook on this component, or on the main Vue instance that we have here.

And I'm going to try updated.

And I'll hit toggle box.

And you can see that we have created and mounted those both print from the box component itself, but from the main instance also updated prints.

And that is because we are updating this data variable from is visible false to is visible true.

And so the update function is triggered on this component because our data updated for that component.

And if we toggle it again, we can see updated is run again, because that variable was changed to false again.

So updated will run every single time the data changes.

Now, why might you want to use a lifecycle hook, some of the most common use cases are checking whether someone is authorized to Vue a certain page or component.

A lot of people use the created and mounted hooks as well to pull data into their application from a back end or from in browser storage.

Sometimes they are also used to initialize events.

And then when the component is about to unmount, you can clean up that event.

Or you can save some data or run some kind of check on before unmount or in the unmounted function.

So those are the basics of lifecycle hooks, I encourage you to test out lifecycle hooks on your different components and see what happens when you use different lifecycle hooks.

In a future course we can get into some more advanced examples and a few of the more advanced lifecycle hooks as well that you won't see as often.

So those are the basics of Vue js.

In the next video, we are going to build a Vue three application from scratch, starting with the Vue COI this time.

This is a demo of the application that we will be building.

It's a simple shop application with a few items.

Now it looks like the web page is already done.

But actually it's just static HTML and CSS so far.

As you can see, if I click the Add to Cart button, nothing happens.

And if I scroll up, the only things that are actually functional on this site right now are these top nav links.

Which are just regular browser anchor tag links to bring you to another page.

So this one goes to the Products page.

And you can see I have this cart, which is not functional.

So if I click the X, nothing happens, it's just fully slid out here to demo how it will look.

And if I click the X, nothing happens, it doesn't delete the item, I can't add items to the cart.

And on this page, I have a past Orders table, which is also just static content right now.

This project is going to be a little bit different than tutorials that you are used to, we are not going to be starting from scratch with some mock ups here.

Instead, we will be starting with a static application with HTML and CSS already coded, then we will figure out step by step how to add Vue JS into the application.

This will help to give you a deeper understanding of how Vue works and how to build real world Vue applications.

First, I will give you an overVue of the code base.

And then we're going to see how it looks in the browser.

And then finally, we will start with the Vue JS portion and implementing our own Vue code into each feature one at a time, the goal is to eventually reach a point where it gets to be difficult to continue to code inside of HTML.

And then we are going to move the project over to a Vue COI setup project where we will have Webpack and the full ecosystem of Vue j s tooling and libraries like Vue x and Vue router.

So let's get started looking at the code.

So I'm going to start here with the package dot JSON.

Now this is the file that's generated by NPM.

You should have seen one of these before if you've worked with JavaScript, and it has some metadata about our project here, and then the scripts section.

So you don't need to know what all of these scripts are doing.

This code will be available for you.

So if you want to dive deeper into each one of these you can.

But since we're focusing on Vue here, the important part is that we have this start server that compiles our styles and serves our application for us.

Now later on, I'll show you how to start an application with the vcli.

But I had to use some kind of a temporary server here in the meantime.

So that's what live server is doing for us, it will serve it on a port, similar to what we did with the live server plugin that we used in VS code for the last demo application.

So to start this application, I'm going to go up to my terminal option here.

And I'm going to choose new terminal.

And my terminal opens at the bottom here inside my current folder.

And I'm going to run the start command.

So NPM start, you can see that automatically opens the application on the correct port here.

And if I scroll down, I can see the same page that you already saw.

Now back in the code, let's look in the source directory.

So the source directory is where all of our JavaScript and other code is going to live.

And this is where we'll also be adding Vue js.

This is our main HTML file for the application, which is the home page.

And you can see the links here go to Vues pages inside of this Vues directory over here.

So the links will take you to the past orders page and also the Products page.

Now to start working with Vue j s, I'm going to start with these cards here.

Right now I want to be able to update and save the quantities and be able to add them to the cart.

So in this app dot html file, I'm going to go ahead and add my link to Vue j s, just like I had in the last demo application.

So I'm going to go to the bottom here and paste the script tag.

So I'm importing vj s.

And now I need to write some custom vj s code to get my application.

So I will create another script tag.

And here I'm going to do let app equal Vue dot create app up a pass it in empty object for right now.

And then here I'm going to do app dot mount and then mounted in the same DOM element as before with the ID of app.

And let me just check here.

Yes, the wrapper div here.

If I fold it, you can see all of the content is created inside of app.

So to get started here I definitely want to create a data method.

And I need to return an object.

And on this object, I want to track my inventory.

So when someone clicks the Add to Cart button, I want to increment or change the amount of inventory that I have.

So inventory itself will be an object.

And you can see the different types of produce that I have here.

So carrots, pineapples, and cherries.

And so I'm going to add these three items to my inventory, carrots, and I'm going to initialize all of these with zero.

That looks good.

Now I need to find these elements inside my application and put the variables there.

So if I look down at these cards, you can see here's the recommended product section.

So I have carrots here.

And I have the price here is the quantity with the input field.

And what I want to do here, instead of setting the value, I want to do v model.

And this should be inventory, dot carrots.

And then I'm going to copy the same thing for the other fields.

So come down here to pineapples, and paste this.

And then cherries as well.

Okay, now let me take a look at that.

And you can see it still shows zero here.

Just like before I can update a number, we do three carats.

And now the number starts at three.

So now we want to do something when someone clicks add to cart, if they have a certain quantity in here, we want to add it to a cart total, we change this back to zero.

So to do that, I need to create a method, we create my methods object, I'll create an Add To Cart method.

And in this method, I need to take in the number of items that someone wants to add to their cart, and also the type of item.

So to do this, I'm going to need another place to store what items are actually in the cart.

So I'm going to create a cart here.

And for right now, I'm just going to copy the same items over.

And then when I call the add to cart method, I need to pass in the type of item and quantity, then I can access my cart variables by doing this, that cart and pass in a variable that I want to access on my cart object, I need to use the square brackets, and then I can pass in type.

So it would be the same as this cart carrots or this card, pineapples, or whichever item we want to access.

And then I'm going to increment by the quantity.

So plus equals quantity.

Now I don't have to return anything from this function.

Because this is really the action that I want to take by calling this function is to update whatever I have in my cart right now.

And to show this, I'm just going to log this out in the console in the browser, so you can see it when I log out this cart.

And I'm gonna open my console here.

So for carrots, I'm going to add three, you can see nothing happened.

That is because I forgot to connect this method to that button.

So let me go up here and add that button.

So I'm just going to add it to carrots right now, here.

So when someone clicks on the Add to Cart button, I'm going to call the add to cart method.

Now I need to call it passing in a few arguments here.

So the first one is going to be the type of item that I want to add to the cart.

So this one will be carrots, and I also need to pass in the quantity.

To pass in the quantity I need to use the inventory carats variable.

So I can just pass that in here.

I could also just call it from inside of my function which is Actually what I'm going to do.

So let me scroll down to see my function again.

And instead of quantity here, instead of passing in this extra variable, I'm going to just update this to this dot, this dot inventory, and then get the type from there.

So let's see if this is working.

Let me add to cart.

And you can see there is definitely a problem because the input value is a string, and it's trying to add it to the numbers zero, so then it turns the expression into a string.

Now Vue has a very easy way of fixing this.

And this is through a modifier just like we learned about a little bit in the last demo that we did.

So let me go up here to the V model.

And we don't want this V model to be considered as a string, we want to go ahead and cast it as a number.

So Vue gives us this modifier as a shortcut.

So v model DOT number.

So now if we look in our application, may add to cart.

And I can see down here that my carrots have one item in it, which is a number so I can add to cart again.

And now it's two, and I can add multiples.

And now there's eight carrots in the cart.

Let's stop here for this video.

And don't forget to download the related code and try out these features for yourself.

In the next video, we will work on displaying the items in the cart.

So now we want to hook up this cart menu or cart slide out.

And right now it's just static content.

So we can only see it from the Products page.

And if you look at the code, we go to the products dot html, I'm going to fold this header, and also the main container, which is this main part of the page right here.

And now I can just see this aside, which is that cart section on the side.

So I basically want to get all of this HTML and make it available on my other pages like my app page, which is the homepage, so that I can use Vue j s to trigger opening or closing the menu.

And I also want to make these cart items dynamic.

So when I add more items to the cart, it can update the quantity and the price.

And I can also set a variable.

So if there are no items in the cart, this will display.

Now HTML itself doesn't have something like an import to import a block of HTML into another HTML file.

A lot of people use PHP or some other back end tool for that.

But we can also easily do this in JavaScript.

So we're going to do this in Vue, j.

s, actually.

So I'm going to remove this sidebar from the page that it is on right now.

And move it into our Vue application.

Of course, our Vue application is nested inside of the app dot html page.

But we can move it outside later.

So that this menu will be accessible on all pages in the future.

So I'm going to fold this Vue create app.

And now I will paste this HTML aside that I have.

Now it's giving me an error or a couple errors right now because it's inside of a script tag.

But I'm going to fix that.

So if you recall, in the earlier lessons, we defined the different components inside of our Vue application.

So this is a perfect use case for a component right now, because it's this reusable block of HTML or template that we want to use on multiple different pages and also interact with.

So I'm going to register this as a component.

And I'm just going to call it sidebar.

And now I pass in the object just as before, and on this options object, I can set the template and then use graves.

And now I want to grab this aside again.

And paste it inside of here.

And so now I have this whole aside all of the code inside of my template for this component.

And now I can add this To the page with the name sidebar.

So I'm going to go ahead and add it here.

And remember that our div wraps the whole Vue application.

So I can put this anywhere inside of that div with ID of app.

I'm going to put it here, actually between the main and the footer, I'm going to put the custom component, sidebar, and Vue will handle putting the template I have down here where this sidebar element is in the template.

So let me go back to the HTML here, you can see the sidebar is no longer on the Products page.

But if I go to the home page, now I have a sidebar here.

So now that the sidebar is in Vue js, I can start making it interactive.

And the first thing I want to do is be able to hide and show the sidebar.

So basically, when this is clicked, I want to hide it.

And then when another button is clicked, I want to show it.

So I need to create a variable for this.

And let me go down to my JavaScript down here.

So inside of my regular create app here, in my main options object, I'm going to add an element to data here.

And I'm going to call it show sidebar, false.

And now I can come to my sidebar, and simply use a vi F, and point it to the variable show sidebar.

So if show sidebar is true, then my custom component will show up on the page.

If it's false, then I shouldn't see the sidebar at all.

And you can see it's false, I don't see any sidebar.

And when I change this to true, I see the sidebar.

Now I just need to add a toggle for this sidebar and change it back to false by default.

And now I can create a method called toggle sidebar.

And I'm going to say this dot show sidebar equals the opposite of whatever it is because it will toggle true or false every time this function is run.

So I'm going to say it equals not this dot show sidebar.

So if it's currently false, that means it will be set equal to true and if it's true, it will be then set equal to false.

Now I just have to call this method.

So the first place that I'm going to put it is on this button here, this cart button should open that cart sidebar.

I'm going to find that on the page.

Here is that Cart button.

And I'm just going to add an ad click here.

Add click equals toggle sidebar, I don't need to pass anything in so I can just leave it as this.

And Vue will automatically look through my methods and find that method.

So let me see if that works.

Go back to the page should be able to click on this now.

And yes, it does toggle.

Now the next thing I need to be able to do is close it and I need to close it using this x here.

So I'll have to go down to my template here.

And here is the button.

That's that x that's in the corner of the header for the sidebar.

So I need to add an app click on this.

And I'll have to do app click.

And now I want to use the function toggle sidebar.

But because this is wrapped in its own component, I actually don't have access to the toggle sidebar function from here, I actually have to pass it into this component to be able to access it.

And I can do that here.

So I'll pass it in as toggle equals toggle sidebar, I'm using my method on the vj s object called toggle sidebar passing it into the sidebar component with the name toggle.

So inside my component here, it's going to be called toggle.

So I'm going to have to accept it as a prop and as accepted as toggle.

And that will be my function name.

So now I have to rename this function and call it toggle.

Let me see if this works.

Go to cart click x and it is not working.

So I do have an error here maximum call stack size exceeded.

So let me see what I do.

Wrong in the code.

So I'm importing the prop toggle, the function should be called from here of toggle sidebar that is pointing to toggle sidebar here.

And, oh, I forgot to make this point to a Vue variable.

Instead, it was just trying to use it as a string before which was causing an error.

So now it should be calling the actual toggle sidebar function.

And let me see that in the code.

Okay, it works just as intended now.

So now on the sidebar, I want to be displaying actually dynamic items here.

For right now, I only have one item hooked up carrots.

And so I'm only going to be working with this one item until the next video.

So let's hook this item up.

When I add items to the cart here, I should it should update in the cart over here.

Now to do that, I need to take this cart object and pass it in to my sidebar, so my sidebar has access to it.

First, let me do some cleanup here.

With this on multiple lines to make it a little bit cleaner.

And I'm going to pass in cart as just cart.

And now I have to receive this prop in my component here.

So I'm going to do it here and call it cart.

And now cart that I'm getting in my component is actually that cart object.

So since I'm only working with carrots for right now, I'm going to just assume that and only add the number here for carrots.

So I'll use my double mustache syntax.

And I have that cart variable.

So I'll do cart dot carrots, and that will be the number of carrots that I have.

So let me go back to here and automatically updated.

Let me add three.

And my cart now is quantity three.

So if I add, let's add five more now this quantity eight in my cart.

So now my cart is dynamic.

Of course the total should also be updated based off of the quantity should be price times quantity equals the total for that item.

So let me do that really quickly.

This is the total number.

So I'm just going to have to do this.

And let's say cart dot carats times the price which it says it's $1.

But here it says 482.

So I'm going to use this price because $1 isn't that interesting.

So I'll do times 482.

And then before that, I need to put in dollars.

And let's see if that works.

To add to cart.

Now there is an error, let's see what the error is unexpected token with a dot.

The reason why it's complaining is because $1 sign followed by curly braces.