[  Vue.js coding  ][  Vuetify templates  ][  Vue.js setup for Vuetify  ][  Vue headless CMS site  ]

Vue.js setup for Vuetify

 

vue.config.js

This file is located at the root of the project.

Basic config

module.exports = {
  …
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "HTML_HEAD_TITLE";
      return args;
    });
  },

  runtimeCompiler: true,
};

Configure Vuetify to import your custom Sass files globally

The prependData will load _app.variables.scss and _app.mixins.scss first in the stylesheets cascade to make them globally available with component's <style lang="scss" scoped>.

module.exports = {
  …
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        prependData: `@import "@/styles/_app.variables.scss";`,
        prependData: `@import "@/styles/_app.mixins.scss";`,
      },
    },
  },
  …
  runtimeCompiler: true,
};

Configure Vuetify for multilingual

Supporting multiple languages requires the i18n plugin.

module.exports = {
  …
  pluginOptions: {
    i18n: {
      locale: "en",
      fallbackLocale: "en",
      localeDir: "locales",
      enableInSFC: false,
    },
  },
  …
  runtimeCompiler: true,
};