Vue.js is a progressive JavaScript framework that has gained immense popularity among developers for crafting interactive user interfaces. A significant part of Vue.js's appeal lies in its ability to create reusable components, allowing for cleaner and more efficient code. In this post, we will focus on two essential features of Vue.js: Filters and Slots.

What are Vue.js Filters?

Filters in Vue.js are a simple way to format data for display purposes. They can be chained together and are useful for common data transformations, such as formatting dates, currency, or text.

Syntax and Usage

Filters are denoted by a pipe | symbol in the template markup. Here is an example of how a basic filter looks:

{{ message | capitalize }}

In the above case, we would create a filter named capitalize that transforms the string by capitalizing the first letter.

Defining a Filter

You can define a filter in your Vue instance or globally. Here's how to define a global filter:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Example of Using Filters

Let’s see a more practical example of how filters can be used.

<template>
  <div>
    <p>{{ message | capitalize }}</p>
    <p>Original Amount: {{ amount }}</p>
    <p>Formatted Amount: {{ amount | currency }}</p>
  </div>
</template>

<script>
Vue.filter('currency', function (value) {
  return '$' + parseFloat(value).toFixed(2)
})

export default {
  data() {
    return {
      message: 'hello world',
      amount: 23.5
    }
  }
}
</script>

In this example, the string "hello world" is capitalized, and the amount is formatted as currency.

What are Vue.js Slots?

Slots in Vue.js allow you to create components that are more flexible and reusable. They provide a way to pass content into child components, enabling developers to create components that can accommodate various types of content.

Types of Slots

There are mainly two types of slots:

1. Default Slots: The most straightforward type, it allows you to pass content within the component tags.
2. Named Slots: These allow multiple slots in a single component and provide more control over where content should go.

Example of Using Default Slots

Here’s how you can create a simple component using a default slot.

<template>
  <div>
    <h1>My Card</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyCard'
}
</script>

You can then use this component as follows:

<MyCard>
  <p>This is the content of the card!</p>
</MyCard>

Example of Using Named Slots

Now, let’s look at an example that utilizes named slots:

<template>
  <div>
    <h2>My Layout</h2>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyLayout'
}
</script>

You can use the named slots like this:

<MyLayout>
  <template v-slot:header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content Area</p>

  <template v-slot:footer>
    <p>Footer Content</p>
  </template>
</MyLayout>

In this example, we defined a component with a header, main content, and footer, neatly utilizing named slots for better organization.

Why Use Filters and Slots?

The combination of Filters and Slots empowers developers to create more organized and maintainable code structures. Filters allow for data manipulation right in the template, while slots give you the flexibility to pass content to components dynamically.

By mastering these two features, you can enhance the usability and readability of your Vue.js applications significantly.