How to make Vuetify component in Codepen using by Typescript?

Question

I have used nuxt.js in my company project. I really wanted to test easily, so I decided to register Codepen Pro. I just want to show v-data-table components in codepen, but it didn't work.

My code just referred to Vuetify website. I chose Typescript, Vue and Vuetify in codepen and saved.

I have been searching someone trying to make same components, but I couldn't find out.....

Does anyone know how to write Vuetify code in codepen?

my code is below↓

html    
<div id=app>
<template>
  <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
</template>
</div>




 Typescript
new Vue ({
  el=#app
  headers = [
    {
      text: "Dessert (100g serving)",
      align: "start",
      sortable: false,
      value: "name"
    },
    { text: "Calories", value: "calories" },
    { text: "Fat (g)", value: "fat" },
    { text: "Carbs (g)", value: "carbs" },
    { text: "Protein (g)", value: "protein" },
    { text: "Iron (%)", value: "iron" }
  ];
  desserts = [
    {
      name: "Frozen Yogurt",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: "1%"
    },
    {
      name: "Ice cream sandwich",
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: "1%"
    }
  ];
})

milmal · Accepted Answer · 2020-08-19 20:20:16Z

1

There are some issues with your code. First off, you should return the data as following:

new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "start",
          sortable: false,
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" }
      ],
       desserts: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: "1%"
        }
      ]
    }
  }
});

Second, in order to use Vuetify you need a <v-app> wrapping around the content. So your html should look something like this:

<div id="app">
  <v-app>
    <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
  </v-app>
</div>

Here's a codepen example using vuetify that I found: https://codepen.io/charlesok/pen/yqmEXE

Note that he also added several CDNs for Vue, Vuetify and babel-polyfill in order for the Vue and Vuetify to be displayed correctly.

answered Aug 19, 2020 at 20:20

milmal

5711 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

drunkdolphin Over a year ago

Thanks a lot!!! I really appreciate your whole advise! Thank you so much!!

Collectives™ on Stack Overflow

How to make Vuetify component in Codepen using by Typescript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related