CODEWITHSUNDEEP
vuetify.js
GerryMM88
GerryMM88

Reputation: 191

Is it possible to use Vuetify without Vue?

On my site I have +10 pages. One of them uses Vue and Vuetify and it works well together with Vue when I do something like this:

new Vue({
            el: '#navbar',
            vuetify: new Vuetify(),
})

But on other pages. I only need, lets say some input-fields, because I am using .net core MVC to handle it. Is it possible to use certain classes on Inputs (similar to Bootstrap)?

I have found out that the Grid-system works.

So I would love to have something like this: <input type="text" class="here-is-the-classes-i-need"> So I guess my question is.

Could I use Vuetify in a similar way as bootstrap? Or do I need to add Bootstrap too?

I am afraid that will be much to load for the user?!

Upvotes: 1

Views: 1632

Answers (3)

mrrrk
mrrrk

Reputation: 2301

Vuetify uses Google's 'Material Design', which you can use separately:

https://m2.material.io/components?platform=web

The documentation is perhaps a little less friendly compared to Vuetify's though - and the set of 'components' is a bit thinner.

Upvotes: 0

Anees Hameed
Anees Hameed

Reputation: 6544

You can't vuetify with vue. But if you need you can use vue in any isolated part of an application.

Suppose that you have a page where you need to use data-table from vuetify and the rest all on the page is from any other x-framework, you can do that.

Just import vue and vuetify directly to the head section of the HTML and mount the app.

<head>
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>
    
<div id="app">
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</div>
<script>
  const myueApp = new Vue({
    el: "#app",
    vuetify: new Vuetify(),
    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%',
          },
          // You know what else is going to come here, I am skipping to make the answer clean, https://vuetifyjs.com/en/components/data-tables
        ]
      }
    }
  });
</script>

You can use all the vue api's in the app myVueApp . And the best part is that you can even access functions and data from outside the vueApp. to do that just use const temp = myVueApp.desserts;

Upvotes: 1

Thibaut Maurice
Thibaut Maurice

Reputation: 617

No, you can't run Vuetify without Vue.

The reason is pretty simple, most of Vuetify is built with vue and most of those components require their script to run, so everything that's not entirely css based will not work.

But at the end of the day, that's fine. Once compiled, if you've imported Vuetify's components manually (and not the whole lib at once), the bundle size shouldn't be that bad.

Upvotes: 0

Related Questions