How can Vuetify components be imported separately in the right way?

I’m currently getting acquainted with Vuetify and I’m finding it quite challenging to figure out how to import a specific component for use.

My current version of Vuetify is 2.4.2

According to the documentation, they mentioned about the path to vuetify export file but it's unclear on where to locate this.

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

I am trying to implement Tabs and other elements like this. How do I reference a specific component from Vuetify for this?

<v-card>
    <v-tabs show-arrows v-model="tab">
      <v-tabs-slider color="teal"></v-tabs-slider>
      <template v-for="sticker in allStickers">
        <v-tab :key=sticker.id :href="'#tab-'+sticker.id">
          <img :src=sticker.imgurl alt="">
        </v-tab>
      </template>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <template v-for="sticker in allStickers">
        <v-tab-item :key=sticker.id :value="'tab-' + sticker.id">              
          <ul class="liststickers">
            <template v-for="stick in sticker.stickers">
              <li :key=stick.id @click="sendSelectedSticker(stick.id)">
                <img :src=stick.imgurl alt="">
                <p class="stick_price">{{stick.price}}</p>
              </li>
            </template>
          </ul>
        </v-tab-item>
      </template>
    </v-tabs-items>
  </v-card>

Your assistance on this matter is greatly appreciated.

Answer №1

Working with Vue CLI and Vuetify

If you have integrated Vuetify into your Vue CLI project using the vue add vuetify command, the vuetify-loader takes care of handling the component import functionality automatically. According to the Vuetify Treeshaking documentation:

The A la carte system allows you to selectively import components, significantly reducing the build size. New projects initialized with the Vue CLI plugin come with this feature enabled by default.

Manual Setup

If you opt for a manual installation of Vuetify, you can choose between registering components globally or on a per-component basis. Both methods ensure that only the necessary Vuetify components are loaded, but global registration eliminates the need to include the import syntax in every component. Below is an example demonstrating the usage of <v-tabs> with each configuration.

Global Component Registration

Utilize this method if you prefer not having to individually import selected Vuetify components in each component utilizing them.

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp,
  VTabs,
  VTab
} from 'vuetify/lib'

Vue.use(Vuetify, {
  components: {
    VApp,
    VTabs,
    VTab
  },
})
const vuetify = new Vuetify({});

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

You can now utilize <v-app>, <v-tabs>, and <v-tab> across any component.


Per-Component Registration

Employ this approach if you wish to manually register Vuetify components within each component leveraging them.

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)
const vuetify = new Vuetify({});

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

App.vue

import { VApp, VTabs, VTab } from 'vuetify/lib'

export default {
  components: {
    VApp,
    VTabs,
    VTab
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Renaming a file to a custom name in React JS: A step-by-step guide for

Is there a way to custom name the downloaded PDF file when opening it in base64 format using window.open()? Currently, the PDF is being downloaded as "download.pdf" and I would like to specify a different name for the file. Thank you in advance. fetc ...

Sharing the outcome of a $.get request with another function for optimal results

I am facing an issue with the callback function of the jquery $.get() ajax function. Currently, I am working with the DataTables plugin and attempting to implement the "expanding row to see children details" example from (https://www.datatables.net/exam ...

Issue with React hooks: Callback functions from library events (FabricJS) not receiving the updated state values

Why am I not receiving the updated state values within FabricJS events like object:modified, mouse:up, etc... even though I can set state values inside those callback functions. Upon attempting to retrieve the state value, it consistently returns the init ...

Component cannot be shown on the screen

<template> <div v-for="corpus in getCorpora" v-bind:key="corpus.id"> <Corpus v-bind="corpus" /> </div> </template> <script> import Corpus from "../components/Corpus"; impor ...

What is the best way to display or conceal an array object using a toggle switch?

I'm trying to implement a show/hide functionality for descriptions when toggling the switch. Additionally, I want the switch to be initially checked and only show the description of each respective result. However, my current code is displaying all de ...

Bizarre String Behavior in jQuery JSON Through Ajax Request

Something unusual is occurring: whenever I try to send the string "??" to the server using AJAX $.ajax({ type: 'POST', url: path, dataType: 'json', data: JSON.stringify({ text: "??" }) }); it consistently results in send ...

Locating the dot character within regular expression challenges

Having difficulty replacing terms like "joe." using a regular expression. Look at the snippet below: var phrases = new Array("joe","sam"); sentence = "joe.id was here as well as sam.id"; for(i = 0; i < phrases.length; i++) { regex = new RegEx ...

Apply express middleware to all routes except for those starting with /api/v1

Is it possible to define a catchall route like this? app.get(/^((?!\/api/v1\/).)*$/, (req, res) => { res.sendFile(path.join(__dirname, '../client/build', 'index.html'));}); ...

What is the correct way to establish an array variable containing objects?

What is the correct way to declare an object within an array variable? I encountered the following error message: "TypeError: Cannot set property 'name' of undefined" Here is the code snippet in question: let data = [] data[0].name = "john" ...

Guide on retrieving documents from a collection in mongodb by utilizing the $nin operator

My user schema looks like this const userSchema= new mongoose.Schema({ Username:{ type:String, trim:true, required:true }, email:{ type:String, trim:true, required:true }, hashed_password:{ type:String, trim:t ...

Arranging website elements to conform to a compact grid system

Recently, I've been brainstorming a unique concept for a website layout that involves a background composed of tiny color-shifting squares, each measuring about 10px. The challenge I'm facing is aligning the elements on the page with this grid, a ...

How can I code a div to automatically scroll to the top of the page?

I'm attempting to implement something similar in WordPress - I want a div containing an advertisement to initially start 300px down the page, then scroll up with the page until it reaches the top, and finally stay there if the user continues to scroll ...

Creating a flipbook out of a PDF file

I am looking for a cost-effective solution to convert my numerous PDF files into flipbooks for easy reading. I have been unable to find a free tool for this purpose, so I am curious if it is possible to create a flipbook using only HTML, CSS, and JavaScr ...

How to Share Your Vuejs Component with the World by Publishing it on npm

I have recently developed a Vue.js 2 project using webpack which consists of 2 components. My goal is to share this project as an npm package so that the components can be easily reused in multiple projects. After publishing the project on npm with npm pu ...

What is the importance of using $scope.$apply after assigning values to ng-model within forms?

Let's talk about a form: <form name="placeThis" id="placeThis" novalidate ng-submit="submitForm();"> <input type="hidden" ng-model="placeThis.target"/> </form> My goal is to assign a default value to placeThis.target from my co ...

Switching between different sections of a webpage

Seeking assistance with implementing a transition effect between sections on a single-page application. All sections are located on the same page, but only one section is displayed at a time. When an event occurs, the display property of the requested sect ...

Tips for optimizing performance by preloading external CSS and JavaScript files from a third-party source in a ReactJS project with webpack

Is there a method similar to using ProvidePlugin for preloading jQuery that can be used to preload third-party CSS and JS files without using import in the entry JS file? The reason I am interested in preloading these files is because I encountered an err ...

Passing multiple checkbox values with JavaScript's DOM Event

I am working on a form that contains multiple checkbox options. Users have the ability to select one or more options. Here is the HTML code: <div id="container"> <h1 id="title">RGB Color</h1> <div id=" ...

How can I show an array of objects that is nested within another object using Vue.js?

Currently, I am attempting to showcase an array of messages that are stored as objects. These messages are housed within a conversation, which is the main object. While I am able to view the data when expanding in the Vue developer tools, I am struggling t ...

Bizarre symbols observed while extracting data from HTML tables produced by Javascript

I am in the process of extracting data from Specifically, my focus is on the "tournament-page-data-results" div within the source code. Upon inspecting the HTML source code, the data does show up, but it appears with a mix of real information and random c ...