DEV Community: Abanoub George

🛠️ Vue Tip: Creating Reusable Components with Slots

Abanoub George — Sun, 26 May 2024 13:45:48 +0000

🛠️ Vue Tip: Creating Reusable Components with Slots

In Vue.js, creating reusable components is essential for building maintainable and scalable applications. One powerful feature that Vue offers for enhancing reusability is slots. Slots allow you to compose components in a flexible and versatile manner, enabling you to pass content from a parent component to a child component.

What Are Slots?

Slots in Vue.js are placeholders inside your components that can be filled with content provided by the parent component. They make it possible to create highly reusable and configurable components.

Types of Slots

Vue provides three types of slots:

Default Slot
Named Slots
Scoped Slots

Let's dive into each type with examples.

Default Slot

The default slot is the simplest form of slots. It allows you to pass content from the parent component to the child component.

Example:

Parent Component:

<template>
  <div>
    <Card>
      <p>This is some content for the card.</p>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue';
</script>

Child Component (Card.vue):

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
</style>

In this example, the content inside the <Card> component in the parent is passed to the Card component and rendered within the <slot> element.

Named Slots

Named slots allow you to define multiple slots with different names, giving you more control over where the content is injected.

Example:

Parent Component:

<template>
  <div>
    <Card>
      <template #header>
        <h3>Card Header</h3>
      </template>
      <template #body>
        <p>This is the body of the card.</p>
      </template>
      <template #footer>
        <small>Card Footer</small>
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue';
</script>

Child Component (Card.vue):

<template>
  <div class="card">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="body">
      <slot name="body"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
.header, .body, .footer {
  margin-bottom: 8px;
}
</style>

With named slots, you can specify different sections of your component to be filled with content.

Scoped Slots

Scoped slots allow you to pass data from the child component back to the parent component, enabling more dynamic and flexible components.

Example:

Parent Component:

<template>
  <div>
    <ItemList :items="items">
      <template #default="slotProps">
        <li>{{ slotProps.item.name }} - {{ slotProps.item.price }}</li>
      </template>
    </ItemList>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ItemList from './ItemList.vue';

const items = ref([
  { name: 'Item 1', price: '$10' },
  { name: 'Item 2', price: '$20' },
]);
</script>

Child Component (ItemList.vue):

<template>
  <ul>
    <slot :item="item" v-for="item in items" :key="item.name"></slot>
  </ul>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
});
</script>

In this example, the child component (ItemList) passes each item object to the parent component, allowing the parent to render the items dynamically.

Conclusion

Using slots in Vue.js is a powerful way to create flexible and reusable components. Whether you're using default slots, named slots, or scoped slots, this feature can significantly enhance the modularity and maintainability of your application.

For more tips and tricks on Vue.js, check out my previous articles:

Happy coding! 🚀

🚀 Vue Tip: Simpler Two-Way Binding with defineModel

Abanoub George — Thu, 23 May 2024 08:53:52 +0000

🚀 Vue Tip: Simpler Two-Way Binding with `defineModel`

Vue 3 introduces several new features to streamline and enhance your development experience. One such feature is defineModel, which makes two-way data binding more straightforward.

What is `defineModel`?

defineModel is a helper function in Vue 3 that simplifies the creation of two-way bindings for props. It reduces boilerplate code and makes your components more concise and readable.

How to Use `defineModel`

To use defineModel, you need to define it in your script setup. It allows you to easily bind props and emit updates, making the code cleaner.

Example:

Let's take a look at a simple example where we use defineModel to create a two-way binding for a title prop.

Without `defineModel`:

<template>
  <input :value="title" @input="$emit('update:title', $event.target.value)" />
</template>

<script setup>
defineProps(['title']);
defineEmits(['update:title']);
</script>

With `defineModel`:

<template>
  <input v-model="title" />
</template>

<script setup>
const title = defineModel('title');
</script>

In the second example, defineModel handles the binding and event emission for you, making the component cleaner and easier to read.

Benefits of Using `defineModel`

Reduced Boilerplate: Less code to write and maintain.
Improved Readability: Cleaner syntax makes the component easier to understand at a glance.
Streamlined Logic: Automatically handles the prop binding and event emission.

Conclusion

Using defineModel in Vue 3 can greatly simplify your two-way binding logic, making your components more concise and maintainable. This is especially beneficial in larger projects where keeping your codebase clean and manageable is crucial.

🔥 Vue Tip: Using Once Watchers

Abanoub George — Thu, 23 May 2024 07:52:18 +0000

Vue Tip: Using Once Watchers

In Vue.js, a watcher's callback function executes every time the watched source changes. However, there might be scenarios where you only want the callback to trigger once on the initial change. This is where the once: true option comes in handy.

How to Use Once Watchers

By default, Vue watchers are designed to listen to changes continuously. To alter this behavior so that the callback is triggered only once, you can simply add the once: true option when defining your watcher.

Example:

<script setup lang="ts">
watch(
  source,
  (newValue, oldValue) => {
    // when the source changes, triggers only once
  },
  { once: true }
)
</script>

In this example, the watcher on the source will trigger the callback when the source changes, but only once. Subsequent changes to source will not trigger the callback.

Benefits of Using Once Watchers

Performance Optimization: Reduces the number of times the callback is executed, which can be particularly useful in performance-sensitive applications.
Simpler Logic: Avoids the need for additional logic to ensure a callback only runs once.
Use the once: true option to streamline your Vue watchers and improve the efficiency of your reactive code.

Easy Way to Dark Mode

Abanoub George — Thu, 03 Nov 2022 14:42:09 +0000

We will use the VueUse

you can Read the Docs here VueUse

What's the VueUse ?

VueUse is a collection of hundreds of essential Vue Composition Utilities for interacting with various browser, sensor, animation, and state apis, plus more!

In this Topic, we’ll sample some hand picked functions from each category to give you an idea of what’s possible with VueUse and hopefully wet your appetite to utilize VueUse in your own projects.

let Start install the VueUse

npm i @vueuse/core

then will use one of the Utilities named useDark

we will import the Utilities into our component

import { useDark, useToggle } from '@vueuse/core'

And will Define them as Variables

const isDark = useDark() // True of False
const toggleDark = useToggle(isDark)

the isDark will give us the Boolean result True or False but by defualt will be False

<template>
  <div>{{isDark}}</div>
</template>

we will see the output

Then we will use the toggleDark Button to switch between true or false

  <button @click="toggleDark()">
    Is Dark: {{ isDark }}
  </button>

when we toggle between the Dark mode the useDark add variable in LocalStorage named `vueuse-color-scheme` the value by default (false) is `Auto` and when toggle (true) will be `dark`

also useDark add class to HTML tag

<html lang="en" class="dark">

Now we can add Style for Dark Mode

.dark {
  background: #252525;
  color: #fff;
}

you can see how the Dark mode is applied

🤩 🥳 WOW now you have an Easy Dark Mode Applied in less Than one Minute💪

You can Find the Repo Here
Or you can see the live code Here
Read More about UseDark Here

Follow Me in Linkedin ☺️ 😊 😇

Thanks For Reading My Topic waiting for More topic in VueUse☺️ 😊 😇

Form Handling With API Tutorial

Abanoub George — Fri, 14 Jan 2022 21:59:49 +0000

The Vue CLI is an awesome tool to kick-start your Vue projects. But by default — and rightly so — it comes with very little in the way of styling. Follow along and I’ll show you how to Create a Form With API using JSON Server on Vue

Getting set up the Vue Project

In order to show every step from start to finish, I’m going to create a new project from scratch. If you already have a project (that you set up with Vue CLI 3), you can skip this section.

If you don’t already have Vue CLI version 3, install it.

Once the app is created, move into the directory and serve the app.

> cd vue-form-api
> npm run serve

Your new Vue app is available at http://localhost:8080/

Getting set up the JSON Server for API

JSON Server Creating demo APIs For Your Project

You can check the JSON Server [https://www.npmjs.com/package/json-server]
we can use JSON Server and run it by following steps

Install it npm i json-server

in you Project will create the new folder and add the db.json like we did in this project

last step we just need to run the JSON Server json-server --watch Backend/db.json

Adding Bootstrap styles

I’m going to add a Bootstrap component to the app
Still inside the vue-form-api directory, install Bootstrap and its dependencies

> npm install bootstrap jquery popper.js

Note: If you’re not going to use Bootstrap’s JavaScript, and only going to use its styles, don’t worry about installing jQuery or Popper.js.

Finally, import it into the main script by adding these lines to the top of vue-form-api/src/main.js:

> import 'bootstrap'
> import 'bootstrap/dist/css/bootstrap.min.css'

Again, if you only want the styles, and not the JavaScript functionality, just leave off the first line and only include the CSS.

Note: we will clear the Project from unused files

Add Html Form using Bootstrap Form and add a small table

            <!-- Title -->
            <h1 class=" text-info border-bottom py-2 ">Vue Form API</h1>
            <!-- Form -->
              <form class="row g-3  p-3 shadow mt-4 rounded">
                <!-- First Name -->
                <div class="col-md-6">
                  <label for="inputFirstName" class="form-label">First Name</label>
                  <input required type="text" class="form-control" id="inputFirstName">
                </div>
                <!-- Last Name -->
                <div class="col-md-6">
                  <label for="inputLastName" class="form-label">Last Name</label>
                  <input required type="text" class="form-control" id="inputLastName">
                </div>
                <!-- Email  -->
                <div class="col-md-6">
                  <label for="inputEmail" class="form-label">Email</label>
                  <input  required type="email" class="form-control" id="inputEmail">
                </div>
                <!-- Password -->
                <div class="col-md-6">
                  <label for="inputPassword" class="form-label">Password</label>
                  <input required type="password" class="form-control" id="inputPassword">
                </div>
                <!-- Address -->
                <div class="col-12">
                  <label for="inputAddress" class="form-label">Address</label>
                  <input  required type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                </div>
                <div class="col-12 text-center">
                  <button type="submit" class="btn btn-primary ">Submit</button>
                </div>
              </form>
          </div>
          <div class="col-md-6">
            <!-- List User Information -->
            <div class="user-info ">
              <h1 class=" text-info border-bottom py-2">Users List</h1>
                  <table class="table table-striped table-dark mt-4 ">
                    <thead>
                      <tr>
                        <th scope="col">Full Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">password</th>
                        <th scope="col">address</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr >
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
            </div></div>

Store the Data

we will create the object that has all data from inputs we will store
it in userInfo Object

  data() {
    return {
      userInfo:{
        firstName:'',
        lastName:'',
        email:'', 
        password:'',
        address:'',
      }
    }
  },

We Will Use `v-model` to bind the value form inputs

Note: v-model is the two-way data binding in Vue.js bind the value from inputs

Note: we use the v-model like v-model="userInfo.firstName" userInfo.firstName write the userInfo as the main object and access the keys from this object

Add Function to get all Data

   methods : {
    addUser(){
      // we will send the Data from Here
    }
  }

add function addUser in methods to get all data from the userInfo Object and Send it to API
add the Function addUser in Form to handle the Function Note : @submit.prevent="addUser()" use the prevent To stop this behavior,

Create Services Folder and Add our Calling API Function

we create a new folder Services then add the file Users.services.js
install the Axios Library Axios is a Javascript library used to make HTTP npm i axios

Import and make Variable

Import Axios to use
Add base Url when we call the API each time did not need to write it we will store it in Variable

We will Add Class and Functions

Add a javascript Class to contain our Functions UsersManageServices
Add the First function to Get all Users to form API getAllUsersServices
Add Second function to Add New to APIaddUsersServices

import axios from 'axios'

const baseUrl = axios.create({baseURL:'http://localhost:3000'})

// Users Information Class
class UsersManageServices {

 // Create a Function for get All Users
  static getAllUsersServices() {
    return baseUrl.get('users')
  }
// Add New User
  static addUsersServices(user) {
    return baseUrl.post('/users' , user)
  }
}
export default UsersManageServices

Import our Services in our `App.vue`

Import UsersManageServices

// Import Users Services
import UsersManageServices from '@/Services/Users.services'

Add new variable in data Object to store the Data from API

   // it will be an empty Array for now
    AllUsers:[],

You Remember our Object userInfo who store your data from Inputs

   // it will be our Object to send the Data to API
     userInfo:{
        firstName:'',
        lastName:'',
        email:'', 
        password:'',
        address:'',
      },

in our methods we will add a Function to add a new User > we already have UsersManageServices Class then we need to access the addUsersServices function and send our userInfo Object as Parameter

    addUser(){
      UsersManageServices.addUsersServices(this.userInfo).then(res => {
        console.log('Added Success')
      }).catch((error) => {
        console.error(error)
      })
    }

Then we need to list your users to table so we will add a Function to list the users > we already have UsersManageServices Class then we need to access the getAllUsersServices function to get the users and store it in AllUsers our empty Array

  // Get All User 
    getAllUser(){
      UsersManageServices.getAllUsersServices().then(res => {
        this.AllUsers = res.data
      }).catch((error) => {
        console.error(error)
      })
    },

we have the data stored in AllUsers will add it to our table > we will check first if our Array has a data or not v-if=" AllUsers" then use the v-for to loop in our Array of Object to show the data , our Table will be like That

Finally the Form and User Information will be like

You can find the Code in [Github] 😍(https://github.com/abanoub2017/vue-form-api)

You can Follow Me in [Linkedin] 😍(https://www.linkedin.com/in/abanoub-george-9235b1160/)

And that’s it! I hope you enjoyed 😍

Form Handling Tutorial

Abanoub George — Mon, 13 Sep 2021 19:41:07 +0000

Getting set up

In order to show every step from start to finish, I’m going to create a new project from scratch. If you already have a project (that you set up with Vue CLI 3), you can skip this section.

If you don’t already have Vue CLI version 3, install it.

Now create the app.

> vue create vue-form

I named my app “vue-form”, but you can name yours whatever you like

Once the app is created, move into the directory and serve the app.

> cd vue-form 
> npm run serve

Your new Vue app is available at http://localhost:8080/

Adding Bootstrap styles

I’m going to add a Bootstrap component to the app
Still inside the vue-form directory, install Bootstrap and its dependencies

> npm install bootstrap jquery popper.js

Note: If you’re not going to use Bootstrap’s JavaScript, and only going to use its styles, don’t worry about installing jQuery or Popper.js.

Finally, import it into the main script by adding these lines to the top of vue-form/src/main.js:

> import 'bootstrap'
> import 'bootstrap/dist/css/bootstrap.min.css'

Again, if you only want the styles, and not the JavaScript functionality, just leave off the first line and only include the CSS.

Clear the Project

remove the src/components/HelloWorld.vue
remove all code in src/App.vue

Add Html Form using Bootstrap Form

The form will be like

Store the Data

we will create the object have all data from inputs we will store
it in userInfo Object

  data() {
    return {
      userInfo:{
        firstName:'',
        lastName:'',
        email:'', 
        password:'',
        address:'',
      }
    }
  },

We Will Use `v-model` to bind the value form inputs

Note: v-model is the two way data binding in Vue.js bind the value from inputs

Note: we use the v-model like v-model="userInfo.firstName" userInfo.firstName write the userInfo as the main object and access the keys from this object

Add Function to get all Data

   methods : {
    addUser(){
      console.log(this.userInfo)
    }
  }

1.add function addUser in methods to get all data form the userInfo Object and console.log the data

add the Function addUser in Form to handle the Function Note : @submit.prevent="addUser()" use the prevent To stop this behavior,
show the data in console will be like

lets show the data in Browser

add showUserInfo as Boolean value in data to show the user information if user click in submit , by default will be false

  data() {
    return {
      userInfo:{
        firstName:'',
        lastName:'',
        email:'', 
        password:'',
        address:'',
      },
      showUserInfo: false
    }
  },

add Html Code
to switch the value of Boolean value from False to true to show the data

  methods : {
    addUser(){
      this.showUserInfo = true;
    }
  }

Finally the Form and User Information will be like

you can find the Code in Github

And that’s it! i hope you enjoyed

DEV Community: Abanoub George

🛠️ Vue Tip: Creating Reusable Components with Slots

🛠️ Vue Tip: Creating Reusable Components with Slots

What Are Slots?

Types of Slots

Default Slot

Example:

Named Slots

Example:

Scoped Slots

Example:

Conclusion

Read More

🚀 Vue Tip: Simpler Two-Way Binding with defineModel

🚀 Vue Tip: Simpler Two-Way Binding with defineModel

What is defineModel?

How to Use defineModel

Example:

Without defineModel:

With defineModel:

Benefits of Using defineModel

Conclusion

🔥 Vue Tip: Using Once Watchers

Vue Tip: Using Once Watchers

How to Use Once Watchers

Benefits of Using Once Watchers

Easy Way to Dark Mode

We will use the VueUse

What's the VueUse ?

let Start install the VueUse

when we toggle between the Dark mode the useDark add variable in LocalStorage named vueuse-color-scheme the value by default (false) is Auto and when toggle (true) will be dark

also useDark add class to HTML tag

Now we can add Style for Dark Mode

Form Handling With API Tutorial

Getting set up the Vue Project

Getting set up the JSON Server for API

Adding Bootstrap styles

Add Html Form using Bootstrap Form and add a small table

Store the Data

We Will Use v-model to bind the value form inputs

Add Function to get all Data

Create Services Folder and Add our Calling API Function

Import and make Variable

We will Add Class and Functions

Import our Services in our App.vue

Finally the Form and User Information will be like

You can find the Code in [Github] 😍(https://github.com/abanoub2017/vue-form-api)

You can Follow Me in [Linkedin] 😍(https://www.linkedin.com/in/abanoub-george-9235b1160/)

Form Handling Tutorial

Getting set up

Adding Bootstrap styles

Clear the Project

Add Html Form using Bootstrap Form

Store the Data

We Will Use v-model to bind the value form inputs

Add Function to get all Data

lets show the data in Browser

Finally the Form and User Information will be like

you can find the Code in Github

🚀 Vue Tip: Simpler Two-Way Binding with `defineModel`

What is `defineModel`?

How to Use `defineModel`

Without `defineModel`:

With `defineModel`:

Benefits of Using `defineModel`

when we toggle between the Dark mode the useDark add variable in LocalStorage named `vueuse-color-scheme` the value by default (false) is `Auto` and when toggle (true) will be `dark`

We Will Use `v-model` to bind the value form inputs

Import our Services in our `App.vue`

We Will Use `v-model` to bind the value form inputs