What should the optionsPath file look like example?

[movepixels]

I have my nuxt.config.js file set and it works in dev only. In production if i hit F5 / Refresh the page i get Error cannot assign to read only propery base of object '# object ' and it directly relates to my optionsPath: "~/vuetify.options.js", file.

If i delete everything in that file no problems, but then all my custom icons are go so thats no solution.

This is what my file looks like.

import colors from "vuetify/es5/util/colors"

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

Vue.use(Vuetify)

import {
  mdiPanDown
} from '@mdi/js'

export default new Vuetify ({
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#263238', 
        secondary: colors.pink,
        accent: colors.cyan, 
        error: '#a81d4d',
        warning: '#F9CDAD',
        info: '#DDF0F4',
        success: '#00B28C',
      },
      dark: {
        primary: colors.red,
        test: colors.blue
      }
    }
  },
  icons: {
    iconfont: 'mdiSvg',
    values: {
      dropdown: mdiPanDown,
      select: mdiPanDown, //select input arrow for dropdown
    },
  },
});

Anyone see anything wrong? What I am missing or where i messed up?

Thanks,

Dave

[t1mwillis]

Here's an example of what my nuxt.config.js looks like:

vuetify: {
    customVariables: ['@/assets/styles/vuetify/index.scss'],
    treeShake: !process.env.NO_TREE_SHAKE,
    optionsPath: './vuetify.options.js'
  },

and my vuetify options:

import fouroneoneTheme from '~/vuetify/themes/411.js'
import wpTheme from '~/vuetify/themes/wp.js'
import thresholds from '~/vuetify/thresholds/thresholds.js'

export default ({ req, nuxtState }) => {
  const is411 = process.server ? req.env.ENABLE_411 : nuxtState.ENABLE_411
  return {
    breakpoint: {
      thresholds,
      scrollBarWidth: 0
    },
    icons: {
      iconfont: 'mdi'
    },
    theme: {
      dark: false,
      themes: is411 ? fouroneoneTheme : wpTheme,
      options: {
        customProperties: true
      }
    },
    lang: {
      current: 'en'
    }
  }
}

[t1mwillis]

Give the ./ a try instead of the ~/

[mimbo119]

Here's my example:

nuxt.config.js

vuetify: {
    treeShake: true,
    optionsPath: './vuetify.options.js',
    options: {
      customProperties: true
    }
  }

vuetify.options.js

export default {
  theme: {
    light: true,
    themes: {
      light: {
        primary: '#A1A1A1',
        secondary: '#A1A1A1',
        accent: '#A1A1A1',
        error: '#A1A1A1',
        info: '#A1A1A1',
        success: '#4CAF50',
        warning: '#FFC107'
      }
    }
  }
}