Vuetify Basic

by HemalathaThanigaivel

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

<div id="app">
  <v-app>
    <v-treeview activatable :items="items" @update:active="checkFun">
      <template v-slot:prepend="{ item, active }">
        <div @click="active ? $event.stopPropagation() : null" style="margin:-1px;padding:1px">
          <v-icon v-if="item.children" :color="active ? 'primary' : ''">
            folder
          </v-icon>
          <v-icon v-else :color="active ? 'primary' : ''">
            person
          </v-icon>
        </div>
      </template>
      <template v-slot:label="{ item, active }">
        <div @click="active ? $event.stopPropagation() : null" style="width:100%;margin:-5px;padding:5px">
          {{ item.name }}
        </div>
      </template>
    </v-treeview>
  </v-app>
</div>

JavaScript

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  data: {
      items: [
        {
          id: 1,
          name: 'Applications :',
          active: true,
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' }
          ]
        },
        {
          id: 5,
          name: 'Documents :',
          children: [
            {
              id: 6,
              name: 'vuetify :',
              children: [
                {
                  id: 7,
                  name: 'src :',
                  children: [
                    { id: 8, name: 'index : ts' },
                    { id: 9, name: 'bootstrap : ts' }
                  ]
                }
              ]
            },
            {
              id: 10,
              name: 'material2 :',
              children: [
                {
                  id: 11,
                  name: 'src :',
                  children: [
                    { id: 12, name: 'v-btn : ts' },
                    { id: 13, name: 'v-card : ts' },
                    { id: 14, name: 'v-window : ts' }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: 15,
          name: 'Downloads :',
          children: [
            { id: 16, name: 'October : pdf' },
            { id: 17, name: 'November : pdf' },
            { id: 18, name: 'Tutorial : html' }
          ]
        },
        {
          id: 19,
          name: 'Videos :',
          children: [
            {
              id: 20,
              name: 'Tutorials :',
              children: [
                { id: 21, name: 'Basic layouts : mp4' },
                { id: 22, name: 'Advanced techniques : mp4' },
                { id: 23, name: 'All about app : dir' }
              ]
            },
            { id: 24, name: 'Intro : mov' },
            { id: 25, name: 'Conference introduction : avi' }
         ...