DEV Community

VIPS
VIPS

Posted on

Add Vue and Vuetify DataTable

  1. https://www.bezkoder.com/vue-3-crud/
  2. 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;
Enter fullscreen mode Exit fullscreen mode

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')

Enter fullscreen mode Exit fullscreen mode

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":"*",
  }
});
Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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,
  },
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Image of Docusign

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

Top comments (6)

Collapse
 
kinjal_lahar_8d2cda75213b profile image
Kinjal lahar
Comment hidden by post author
Collapse
 
kinjal_lahar_8d2cda75213b profile image
Kinjal lahar
Comment hidden by post author
Collapse
 
kinjal_lahar_8d2cda75213b profile image
Kinjal lahar
Comment hidden by post author
Collapse
 
kinjal_lahar_8d2cda75213b profile image
Kinjal lahar
Comment hidden by post author
Collapse
 
kinjal_lahar_8d2cda75213b profile image
Kinjal lahar
Comment hidden by post author
Collapse
 
kinjal_lahar_8d2cda75213b profile image
Kinjal lahar
Comment hidden by post author

Some comments have been hidden by the post's author - find out more

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay