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

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry 🕒

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read 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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay