CODEWITHSUNDEEP
vue.jswebpackvuetify.jsvue-cli
Jake
Jake

Reputation: 1438

Vuetify options not taken into account in vue-cli library build

My app is correctly wrapped with <v-app> and my vuetify options work fine in development mode or if I build normally using vue-cli-service build for example.

Vue.use(Vuetify, {
  iconfont: 'fa',
  theme: {
    primary: '#213e79',
    secondary: '#c0d8ed', 
    accent: '#4ea3ed',
    error: '#b71c1c',
    info: '#2196f3',
    success: '#66bb6a', 
    warning: '#f57f17'
  }
});

However, if I build in library mode (ex: vue-cli-service build --target lib --name xxx), the above options are NOT taken into account. I'm forced to modify vuetify/dist/vuetify.js for lack of a better solution..

Any idea what could be the issue ? If any of you has a workaround laying around, that would be great :)

Upvotes: 2

Views: 678

Answers (1)

Jason Smith
Jason Smith

Reputation: 1209

When the Vue CLI's build target is lib, your original entry point (e.g. main.js) is not used. This behavior is described in the Vue CLI docs. This entry point file is where the Vuetify plugin is typically imported. To work around this, simply move the import of Vuetify into the main .vue component in your project. This is usually called App.vue, but may have another name if you didn't use the CLI to scaffold your project.

In the main .vue file, import Vuetify and your Vuetify options. Then, in the component declaration, simply include a vuetify property populated with your imported Vuetify instance. Below is the App.vue component from Vuetify's basic "Hello World" sample app, modified for compatibility with exporting as a lib:

<script>
import HelloWorld from './components/HelloWorld';

import vuetify from './plugins/vuetify'     //IMPORT THE VUETIFY CONFIG FILE

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),

  vuetify, //ADD IT TO THE COMPONENT DECLARATION
};
</script>

Update:

In order to load Vuetify in a component using Vuetify 2.x, the Vuetify plugin file should follow this pattern:

import Vue from 'vue'
import Vuetify from 'vuetify';
import '@/assets/stylus/main.styl';

Vue.use(Vuetify)

export default new Vuetify ({
  iconfont: 'fa',
  theme: {
    primary: '#213e79',
    secondary: '#c0d8ed',
    accent: '#4ea3ed',
    error: '#b71c1c',
    info: '#2196f3',
    success: '#66bb6a',
    warning: '#f57f17'
  }
})

FOR VUETIFY 1.5.x

There are a few differences when using Vuetify 1.5.x instead of Vuetify 2.x.

First, it is not necessary to include the vuetify object in the component declaration. You should still import the ./plugins/vuetify file.

Second, the theme and icons must be configured separately in the beforeCreate life-cycle hook. Here is an example:

beforeCreate() {

    //Override the default icons with the Font-Awesome preset
    this.$vuetify.icons = {
      'complete': 'fas fa-check',
      'cancel': 'fas fa-times-circle',
      'close': 'fas fa-times',
      'delete': 'fas fa-times-circle', // delete (e.g. v-chip close)
      'clear': 'fas fa-times-circle', // delete (e.g. v-chip close)
      'success': 'fas fa-check-circle',
      'info': 'fas fa-info-circle',
      'warning': 'fas fa-exclamation',
      'error': 'fas fa-exclamation-triangle',
      'prev': 'fas fa-chevron-left',
      'next': 'fas fa-chevron-right',
      'checkboxOn': 'fas fa-check-square',
      'checkboxOff': 'far fa-square', // note 'far'
      'checkboxIndeterminate': 'fas fa-minus-square',
      'delimiter': 'fas fa-circle', // for carousel
      'sort': 'fas fa-sort-up',
      'expand': 'fas fa-chevron-down',
      'menu': 'fas fa-bars',
      'subgroup': 'fas fa-caret-down',
      'dropdown': 'fas fa-caret-down',
      'radioOn': 'far fa-dot-circle',
      'radioOff': 'far fa-circle',
      'edit': 'fas fa-edit',
      'ratingEmpty': 'far fa-star',
      'ratingFull': 'fas fa-star',
      'ratingHalf': 'fas fa-star-half'
    }

    //Override the theme colors.
    this.$vuetify.theme = {
        primary: '#213e79',
        secondary: '#c0d8ed', 
        accent: '#4ea3ed',
        error: '#b71c1c',
        info: '#2196f3',
        success: '#66bb6a', 
        warning: '#f57f17'
    }
}

Upvotes: 6

Related Questions