Parsing error when using a vuetify locale

[eiggiotti]

Hi!

I've encountered a bug while trying to use the vuetify french locale with this config:

import { fr } from 'vuetify/locale';

export default defineNuxtConfig({
  devtools: { enabled: false },
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      locale: {
        locale: 'fr',
        messages: { fr },
      },
    },
  },
});

The console gives this error:

 ERROR  Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

And the page displays this error:

I've created this stackblitz to see the bug for yourself.

The problem seems to come from this code:

        return `${result.imports}

export const isDev = ${ctx.isDev}
export function vuetifyConfiguration() {
  const options = JSON.parse('${JSON.stringify(newVuetifyOptions)}')
  ${result.directives}
  ${result.aliases}
  ${result.components}
  ${result.messages}
  return options
}
${deepCopy
  ? `function deepCopy(src,des) {
    for (const key in src) {
      if (typeof src[key] === 'object') {
        if (typeof des[key] !== 'object') des[key] = {}
        deepCopy(src[key], des[key])
      } else {
        des[key] = src[key]
      }
    }
  }
  `
  : ''
}
`

When newVuetifyOptions contains a single quote character, as it is the case when using the french locale, the generated code is no longer valid.

[userquin]

@eiggiotti I'm fixing the configuration when providing locale.messages (in the meantime, if you are using only fr entries you can remove messages entry and the import and use localeMessages instead):

    vuetifyOptions: {
      locale: {
        locale: 'fr',
      },
      localeMessages: ['fr'],
    },

[eiggiotti]

Thank you @userquin, that fixes it!