feat: optionsPath + function behavior (#99)

* feat: optionsPath + function behavior

* fix: typo

* fix: typo

* chore: add directory aliases notice

* chore: remove useless option given to plugin template

Author: kevinmarrec

README.md

@@ -53,7 +53,7 @@ yarn add --dev @nuxtjs/vuetify # or npm install --save-dev @nuxtjs/vuetify
 }
 ```
 
-## Module Options
+## Options
 
 ### `customVariables`
 
@@ -121,68 +121,67 @@ Please refer to [Vuetify Icons documentation](https://vuetifyjs.com/en/customiza
 
 You can also set the whole `defaultAssets` option to `false` to prevent any automatic add of these two assets.
 
-### `treeShake`
+### `optionsPath`
 
-- Type: `Boolean`
-- Default: `process.env.NODE_ENV === 'production'`
+- Type: `String`
 
-Uses [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader) to enable automatic [tree-shaking](https://vuetifyjs.com/en/customization/a-la-carte).
-Enabled only for production by default.
+Location of the Vuetify options that will be passed to Vuetify.
 
-## Vuetify Options
+This file will be compiled by **webpack**, which means you'll benefit fast hot reload when changing these options, but also be able to use TypeScript without being forced to use TypeScript runtime.
 
-Except the prior `customVariables`, `defaultAssets` and `treeShaking` options, all other options will be passed to Vuetify.
+```js
+// nuxt.config.js
+export default {
+  vuetify: {
+    optionsPath: './vuetify.options.js'
+  }
+}
+```
 
+> Note that you can also use [Directory Aliases](https://nuxtjs.org/guide/directory-structure#aliases) like `'~/path/to/option.js'`
 
-It includes : 
+All vuetify options are supported, it includes : 
 - [**Breakpoints**](https://vuetifyjs.com/en/customization/breakpoints)
 - [**Icons**](https://vuetifyjs.com/en/customization/icons)
 - [**Internationalization (i18n)**]()
 - [**RTL (bidirectionality)**](https://vuetifyjs.com/en/customization/rtl)
 - [**Theme**](https://vuetifyjs.com/en/customization/theme) 
 
+
 ```js
-// nuxt.config.js
+// vuetify.options.js
 export default {
-  vuetify: {
-    breakpoint: {},
-    icons: {},
-    lang: {},
-    rtl: true,
-    theme: {}
-  }
+  breakpoint: {},
+  icons: {},
+  lang: {},
+  rtl: true,
+  theme: {}
 }
 ```
 
-### Hot reload of options in development
-
-In development mode, passing Vuetify options through module options in your configuration file means Nuxt will have to do a full rebuild of your application when changing them. That being said, it may not be ideal if you're tweaking a lot these options to find the ones that fits best for you.
+> Notice that passing the Vuetify options directly to Module options is still supported, but it will trigger Nuxt entire rebuild if options are changed.
 
-That's why we implemented a feature that will in a close future (Nuxt 2.9) used by more modules, that consist of being able to customize options through an external file compiled by Webpack instead of runtime.
+If you need to access Nuxt context within the options file, you need to export a function instead :
 
-In the case of this module, the options need to sit in `~/app/vuetify/options.js`
 
 ```js
-// app/vuetify/options.js
-export default {
-  theme: {
-    dark: true
+// vuetify.options.js
+export default function ({ app }) {
+  return {
+    lang: {
+      t: (key, ...params) => app.i18n.t(key, params)
+    }
   }
 }
 ```
 
-The `app` folder can be customized in `nuxt.config.js` this way :
+### `treeShake`
 
-```js
-// nuxt.config.js
-export default {
-  dir: {
-    app: 'somewhere' // Nuxt will then look for 'somewhere/vuetify/options.js'
-  }
-}
-```
+- Type: `Boolean`
+- Default: `process.env.NODE_ENV === 'production'`
 
-> Note that if you don't think having to change a lot Vuetify options, keeping the options in your `nuxt.config.js` is totally fine. This feature is above all present to fill the need of fast hot reload in development when changing the Vuetify options.
+Uses [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader) to enable automatic [tree-shaking](https://vuetifyjs.com/en/customization/a-la-carte).
+Enabled only for production by default.
 
 ## TypeScript
 

lib/module.js

@@ -8,6 +8,7 @@ const defaults = {
     font: true,
     icons: 'mdi'
   },
+  optionsPath: undefined,
   treeShake: process.env.NODE_ENV === 'production'
 }
 
@@ -99,15 +100,16 @@ module.exports = function (moduleOptions) {
     const vuetifyOptions = { ...options }
     delete vuetifyOptions.customVariables
     delete vuetifyOptions.defaultAssets
+    delete vuetifyOptions.optionsPath
     delete vuetifyOptions.treeShake
 
-    const app = this.options.dir.app || 'app'
-    const userOptions = path.join(this.options.srcDir, app, 'vuetify', 'options.js')
-    const userOptionsExists = fs.existsSync(userOptions)
+    const optionsPath = this.nuxt.resolver.resolveAlias(options.optionsPath ||
+      path.join(this.options.dir.app || 'app', 'vuetify', 'options.js'))
 
+    // Register options template
     this.addTemplate({
       fileName: 'vuetify/options.js',
-      src: userOptionsExists ? userOptions : path.join(__dirname, 'templates/options.js'),
+      src: fs.existsSync(optionsPath) ? optionsPath : path.join(__dirname, 'templates/options.js'),
       options: vuetifyOptions
     })
 
@@ -117,8 +119,7 @@ module.exports = function (moduleOptions) {
       src: path.resolve(__dirname, 'templates/plugin.js'),
       options: {
         defaultIconPreset,
-        treeShake: options.treeShake,
-        vuetifyOptions
+        treeShake: options.treeShake
       }
     })
   })

lib/templates/plugin.js

@@ -4,13 +4,15 @@ import options from './options'
 
 Vue.use(Vuetify)
 
+export default (ctx) => {
+  const vuetifyOptions = typeof options === 'function' ? options(ctx) : options
+
 <% if (options.defaultIconPreset) { %>
-options.icons = options.icons || {}
-options.icons.iconfont = '<%= options.defaultIconPreset %>'
+  vuetifyOptions.icons = vuetifyOptions.icons || {}
+  vuetifyOptions.icons.iconfont = '<%= options.defaultIconPreset %>'
 <% } %>
 
-export default (ctx) => {
-  const vuetify = new Vuetify(options)
+  const vuetify = new Vuetify(vuetifyOptions)
 
   ctx.app.vuetify = vuetify
   ctx.$vuetify = vuetify.framework

test/fixture/nuxt.config.js

@@ -12,7 +12,8 @@ module.exports = {
   modules: [
     [
       require('../..'), {
-        customVariables: ['~/assets/variables.scss']
+        customVariables: ['~/assets/variables.scss'],
+        optionsPath: './vuetify.options.js'
       }
     ]
   ]