How to Create Responsive Layout with Vue Slots

Subscribe to my email list now at http://jauyeung.net/subscribe/ .

Follow me on Twitter at https://twitter.com/AuMayeung

Slots is a useful feature of Vue.js that allows you to separate different parts of a component into an organized unit. With your component compartmentalized into slots, you can reuse components by putting them into the slots you defined. It also makes your code cleaner since it lets you separate the layout from the logic of the app.

Also, if you use slots, you no longer have to compose components with parent child relationship since you can put any components into your slots.

A simple example of Vue slots would be the following. You define your slot in Layout.vue file:

<template>
  <div class="frame">
    <slot name="frame"></slot>
  </div>
</template>

Then in another file, you can add:

<Layout>
  <template v-slot:frame>
     <img src="an-image.jpg">
   </template>
</Layout>

To use the slot in your Layout component.

We will clarify the above example by building an example app. To illustrate the use of slots in Vue.js, we will build a responsive app that displays article snippets from the New York Times API and a search page where users can enter a keyword to search the API.

The desktop layout will have a list of item names on the left and the article snippets on the right. The mobile…