How to use Slots to Populate Content with Vue 3

Vue 3 is in beta and it’s subject to change.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to use slots to populate content with Vue 3.

Slots

We can add slots to let us distribute content to the location we want.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <click-button>click me</click-button>
    </div>
    <script>
      const app = Vue.createApp({});
      app.component("click-button", {
        template: `
          <button>
            <slot></slot>
          </button>`
      });
      app.mount("#app");
    </script>
  </body>
</html>

We created the click-button component with a slot inside so that we can add our own content between the tags.

#javascript #programming #vuejs #vue

Slots

medium.com

How to use Slots to Populate Content with Vue 3