Add Vue and Vuetify DataTable

#vue #vuetify #data #table

https://www.bezkoder.com/vue-3-crud/
vue create projectName vue add vuetify npm install axios npm install vue-router@4 npm remove @vue/cli-plugin-eslint

https://www.bezkoder.com/vue-3-crud/

https://vuetifyjs.com/en/components/data-tables/basics/

Create Router.js file

import { createWebHistory, createRouter } from "vue-router";

const routes =  [
  {
    path: "/",
    alias: "/Tutorial",
    name: "Tutorial",
    component: () => import("./components/Tutorial")
  }

];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Update Main.js

import 'vuetify/styles'
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import 'vuetify/labs/VDataTable'
loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')

add http-common.js please update 7017 to our port number

import axios from "axios";

export default axios.create({
  baseURL: "https://localhost:7017/api", 
  headers: {
    "Content-type": "application/json",
    "Access-Control-Allow-Origin":"*",
  }
});

Update App.vue

<template>
  <v-app>
    <v-main>
      <Tutorial/>
    </v-main>
  </v-app>
</template>

<script>
import Tutorial from './components/Tutorial.vue'

export default {
  name: 'App',

  components: {
    Tutorial,
  },

  data: () => ({
    //
  }),
}
</script>

Create services folder then create TutorialDataService.js file.

import http from "../http-common";

class TutorialDataService {
  getAll() {
    return http.get("/Tutorial");
  }

  get(id) {
    return http.get(`/Tutorial/${id}`);
  }

  update(id, data) {
    return http.put(`/Tutorial/${id}`, data);
  }
  create(data) {
    return http.post("/Tutorial", data);
  }
}

export default new TutorialDataService();

Update plugin-->vuetify.js to below code.

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createVuetify } from 'vuetify'
import * as labs from 'vuetify/labs/components'

export default createVuetify({
  components: {
    ...labs,
  },
})

Create New Componenet Tutorial.vue

<template>
  <v-data-table :headers="headers" :items="communities" :sort-by="[{ key: 'surname', order: 'asc' }]" class="elevation-1">
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>My CRUD</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ props }">
            <v-btn color="primary" dark class="mb-2" v-bind="props">
              New Item
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field disabled hide-details v-model="editedItem.id" label=""></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field :rules="['Required']" v-model="editedItem.givenName" label="Given Name"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field :rules="['Required']" v-model="editedItem.surname" label="Sur Name"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field :rules="['Required']" v-model="editedItem.birthDate" label="Birth Date"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.email" label="Email"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.phoneNumber" label="Phone Number"></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue-darken-1" variant="text" @click="close">
                Cancel
              </v-btn>
              <v-btn color="blue-darken-1" variant="text" @click="save">
                Save
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue-darken-1" variant="text" @click="closeDelete">Cancel</v-btn>
              <v-btn color="blue-darken-1" variant="text" @click="deleteItemConfirm">OK</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>

    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">
        mdi-pencil
      </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">
        Reset
      </v-btn>
    </template>
  </v-data-table>
</template>

<script>
import TutorialDataService from '@/services/TutorialDataService'
export default {

  data: () => ({
    dialog: false,
    dialogDelete: false,
    headers: [
      {
        title: 'Given Name',
        align: 'start',
        sortable: false,
        key: 'givenName',
      },
      { title: 'SurName', key: 'surname' },
      { title: 'Birth Date', key: 'birthDate' },
      { title: 'Email', key: 'email' },
      { title: 'Phone Number', key: 'phoneNumber' },
      { title: 'Actions', key: 'actions', sortable: false },
    ],
    communities: [],
    editedIndex: -1,
    editedItem: {
      id: null,
      givenName: '',
      surname: '',
      birthDate: new Date().toISOString().substr(0, 10),
      email: '',
      phoneNumber: '',
    },

  }),

  computed: {

  },

  watch: {
    dialog(val) {
      val || this.close()
    }
  },

  created() {
    this.initialize()
  },

  methods: {

    initialize() {

    // Call get api

    },


    editItem(item) {
      //call edit api
    },


    close() {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    save() {

      call update api
      this.close()
    },
  },
}
</script>