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>

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more