Not finding any vuetify components

[andrewhl]

I'm using dayspan-vuetify version "^0.3.6", and vuetifyversion "^1.3.3". I've followed the installation instructions, but I'm getting a lot of vue warnings:

[Vue warn]: Unknown custom element: <v-navigation-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DsCalendarApp>
       <Temp> at src/views/Temp.vue
         <VApp>
           <App> at src/App.vue
             <Root>

This warning appears for a lot of different components:

• v-tooltip
• v-btn
• v-toolbar-side-icon
• v-toolbar-title
• v-toolbar
  ...
  And dozens more. The calendar appears completely unstyled.

This is my vuetify.js import file:

import Vue from "vue";
import Vuetify from "vuetify/lib";
import DaySpanVuetify from "dayspan-vuetify";

import "vuetify/dist/vuetify.min.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "dayspan-vuetify/dist/lib/dayspan-vuetify.min.css";

Vue.use(Vuetify, {
  iconfont: "fa"
});

Vue.use(DaySpanVuetify, {
  methods: {
    getDefaultEventColor: () => "#1976d2"
  }
});

Which I import into my main.js file:

import "./plugins/vuetify";

I'm mounting the calendar as follows:

<template>
  <v-container>
    <ds-calendar-app :calendar="calendar" />
  </v-container>
</template>

<script>
import { Calendar } from "dayspan";

export default {
  name: "Temp",
  data: () => ({
    calendar: Calendar.months()
  })
};
</script>

<style>
body,
html,
#app,
#dayspan {
  font-family: Roboto, sans-serif;
  width: 100%;
  height: 100%;
}
</style>

I'm not sure why I'm getting these warnings. I have vuetify installed and working correctly in the rest of my application, and have been able to use it without any difficulty.

My only thought is that I am running into some library collisions, as I have the bootstrap and elementUI frameworks installed (I'm currently transitioning to vuetify, and I'm working on removing these other frameworks). Is it possible those frameworks are interfering with this library?

[deka]

https://vuetifyjs.com/en/guides/a-la-carte#vuetify-loader

See vuetify loader limitations

[andrewhl]

That seems to work. Is this normal? Should I have to manually import every single vuetify component just to use this calendar?

import Vuetify, {
  VIcon,
  VBtn,
  VFabTransition,
  VSpacer,
  VCardActions,
  VCardTitle,
  VCard,
  VDialog,
  VList,
  VSelect,
  VContainer,
  VContent,
  VListTileAction,
  VListTile,
  VListTileContent,
  VListTileTitle,
  VMenu,
  VTooltip,
  VToolbarSideIcon,
  VToolbarTitle,
  VToolbar,
  VNavigationDrawer,
  VCardText,
  VTextField,
  VLayout,
  VFlex,
  VCheckbox,
  VTabs,
  VTab,
  VTabItem,
  VTextarea,
  VListTileAvatar
} from "vuetify/lib";

Vue.use(Vuetify, {
  iconfont: "fa",
  components: {
    VIcon,
    VBtn,
    VFabTransition,
    VSpacer,
    VCardActions,
    VCardTitle,
    VCard,
    VDialog,
    VList,
    VSelect,
    VContainer,
    VContent,
    VListTileAction,
    VListTile,
    VListTileContent,
    VListTileTitle,
    VMenu,
    VTooltip,
    VToolbarSideIcon,
    VToolbarTitle,
    VToolbar,
    VNavigationDrawer,
    VCardText,
    VTextField,
    VLayout,
    VFlex,
    VCheckbox,
    VTabs,
    VTab,
    VTabItem,
    VTextarea,
    VListTileAvatar
  }
});

This seems excessive.

[andrewhl]

Also I'm not getting any more console errors, but it still doesn't look quite right:

[pwnz22]

That seems to work. Is this normal? Should I have to manually import every single vuetify component just to use this calendar?

Use this approach if you need some of components to decrease bundle size. If you will use all components of vuetify just import Vuetify like import Vuetify from 'vuetify'

[andrewhl]

Okay, I see. I was doing import Vuetify from 'vuetify/lib'. I switched to import Vuetify from 'vuetify' and that seems better, Styling is still a bit off, but that's probably because of a conflict with either bootstrap or elementUI. I can proceed from here. Thanks.

[0dysseas]

hey @andrewhl , did you figure out why the styling was a bit off? I'm facing the same issues even-though I used the import Vuetify from 'vuetify'

[andrewhl]

@0dysseas Hey. Sorry, I abandoned this a while ago.

[GRTO]

I did all you do before, but it is not working, i dont why vuetify doesnt solve this problem. It is not working if i am importing manually.