Creating a TabView Widget without Editing HTML Template in Cara Membuat

In this blog post, we will discuss how to create a TabView widget without editing the HTML template in Cara Membuat. For those who are new to Cara Membuat, it is an open-source platform for building web applications with Vue.js and Livewire. This tutorial assumes that you have a basic understanding of HTML, CSS, and JavaScript.

Prerequisites

Before we begin, make sure you have the following:

1. An account on Cara Membuat (sign up for free at Cara Membuat)
2. A new or existing project in Cara Membuat
3. Familiarity with Vue.js components and Livewire

Creating the TabView Components

The first step is to create two separate components for each tab in our TabView widget. Let's call them Tab1.vue and Tab2.vue. Each component will contain unique content for their respective tabs.

Creating Tab1.vue

Create a new file called Tab1.vue under the resources/js/components folder in your project. Add the following code:

<template>
  <div class="tab-pane fade show active" id="tab-1">
    <h3>Tab One</h3>
    <p>Content for Tab One goes here.</p>
  </div>
</template>

Creating Tab2.vue

Create a new file called Tab2.vue under the same folder as above. Add the following code:

<template>
  <div class="tab-pane fade" id="tab-2">
    <h3>Tab Two</h3>
    <p>Content for Tab Two goes here.</p>
  </div>
</template>

Creating the Main Component

Now, let's create the main component that will contain both tabs. Let's call it TabView.vue. Create a new file under the same resources/js/components folder and add the following code:

<template>
  <div id="tabview">
    <ul class="nav nav-tabs mb-3" role="tablist">
      <li class="nav-item">
        <button
          class="nav-link active"
          data-bs-toggle="tab"
          data-bs-target="#tab-1"
          role="tab"
          aria-controls="tab-1"
          aria-selected="true"
        >
          Tab One
        </button>
      </li>
      <li class="nav-item">
        <button
          class="nav-link"
          data-bs-toggle="tab"
          data-bs-target="#tab-2"
          role="tab"
          aria-controls="tab-2"
        >
          Tab Two
        </button>
      </li>
    </ul>
    <div id="tab-content" class="tab-content">
      <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-one-tab">
        <Tab1 />
      </div>
      <div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-two-tab">
        <Tab2 />
      </div>
    </div>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';

export default {
  components: {
    Tab1,
    Tab2,
  },
};
</script>

Adding the Component to your Application

Finally, register and use the TabView.vue component in your application. Update your main JavaScript file (resources/js/app.js) as follows:

import Vue from 'vue';
import App from './components/App.vue';
import TabView from './components/TabView.vue';

Vue.component('tabview', TabView);

new Vue({
  render: h => h(App),
}).$mount('#app');

Now, you can use the tabview component in your layout file (resources/views/welcome.blade.php) as follows:

<x-app-layout>
  <div class="container">
    <tabview></tabview>
  </div>
</x-app-layout>

Conclusion

In this tutorial, we learned how to create a TabView widget without editing the HTML template in Cara Membuat. We created two separate components for each tab and combined them into one main component called TabView.vue. By following these steps, you can easily create more complex tabbed interfaces with Livewire and Vue.js in Cara Membuat.

Published June, 2015