feat: compatible with Nuxt 2.14 and typescript 4 (#395)

Co-authored-by: Xin Du (Clark) <[email protected]>

Author: micheldenegri

package.json

@@ -38,19 +38,20 @@
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@nuxt/typescript-build": "^0.6.7",
-    "@nuxt/typescript-runtime": "^0.4.10",
-    "@nuxtjs/eslint-config-typescript": "^1.0.2",
-    "@types/jest": "^25.2.3",
+    "@nuxt/types": "^2.15.6",
+    "@nuxt/typescript-build": "^2.0.3",
+    "@nuxt/typescript-runtime": "^2.0.0",
+    "@nuxtjs/eslint-config-typescript": "^4.0.0",
+    "@types/jest": "^26.0.15",
     "@types/sass": "^1.16.0",
     "codecov": "^3.8.2",
-    "eslint": "^6.8.0",
-    "husky": "^4.3.8",
-    "jest": "^25.5.4",
-    "nuxt-edge": "2.11.1-26378723.c5d0067",
+    "eslint": "^7.11.0",
+    "husky": "^4.2.5",
+    "jest": "^26.6.0",
+    "nuxt": "^2.15.6",
     "nuxt-webfontloader": "^1.1.0",
     "standard-version": "^9.3.0",
-    "ts-jest": "^25.5.1",
-    "typescript": "~3.8"
+    "ts-jest": "^26.4.1",
+    "typescript": "~4.0"
   }
 }

src/font.ts

@@ -1,5 +1,7 @@
 import { ModuleThis } from '@nuxt/types/config/module'
 
+import type { SassOptionsV10 } from './sass'
+
 export interface FontOptions {
   family?: string | string[]
   size?: number
@@ -8,19 +10,20 @@ export interface FontOptions {
 export default function setupFont (this: ModuleThis, options: FontOptions) {
   const family = `${options.family}:100,300,400,500,700,900&display=swap`
 
+  /* istanbul ignore else */
   if (this.options.modules!.some(mod => mod === 'nuxt-webfontloader')) {
     this.options.webfontloader = this.options.webfontloader || {}
     this.options.webfontloader.google = this.options.webfontloader.google || {}
     this.options.webfontloader.google.families = [...this.options.webfontloader.google.families || [], family]
-  } else {
-    this.options.head!.link!.push({
+  } else if (typeof this.options.head === 'object') {
+    this.options.head.link!.push({
       rel: 'stylesheet',
       type: 'text/css',
       href: `https://fonts.googleapis.com/css?family=${family}`
     })
   }
 
-  const sass = this.options.build!.loaders!.sass!
+  const sass : SassOptionsV10 = this.options.build!.loaders!.sass!
 
   // Add font-family custom variable (only if not Roboto, cause already default in Vuetify styles)
   if (options.family !== 'Roboto') {

src/icons.ts

@@ -11,7 +11,7 @@ export type IconPreset = keyof typeof presetsCDN
 
 export default function setupIcons (this: ModuleThis, preset: IconPreset) {
   // istanbul ignore else
-  if (presetsCDN[preset]) {
+  if (presetsCDN[preset] && typeof this.options.head === 'object') {
     this.options.head!.link!.push({
       rel: 'stylesheet',
       type: 'text/css',

src/options.ts

@@ -7,13 +7,6 @@ import { ModuleThis } from '@nuxt/types/config/module'
 import { FontOptions } from './font'
 import { IconPreset } from './icons'
 
-export interface TreeShakeOptions {
-  components?: string[]
-  directives?: string[]
-  loaderOptions?: VuetifyLoaderOptions
-  transitions?: string[]
-}
-
 export interface VuetifyLoaderOptions {
   match?(originalTag: string, context: {
     kebabTag: string,
@@ -23,6 +16,13 @@ export interface VuetifyLoaderOptions {
   }): [string, string] | undefined
 }
 
+export interface TreeShakeOptions {
+  components?: string[]
+  directives?: string[]
+  loaderOptions?: VuetifyLoaderOptions
+  transitions?: string[]
+}
+
 export interface Options extends Omit<UserVuetifyPreset, 'preset'> {
   customVariables?: string[]
   defaultAssets?: {

src/sass.ts

@@ -1,10 +1,13 @@
-import { NuxtConfigurationLoaders } from '@nuxt/types/config/build'
+import { NuxtOptionsLoaders } from '@nuxt/types/config/build'
 import { ModuleThis } from '@nuxt/types/config/module'
 import dartSass from 'sass'
+import { Options as SassOptions } from 'sass-loader'
 import { Options } from './options'
 
+export type SassOptionsV10 = SassOptions & { additionalData?: string, indentedSyntax?: boolean }
+
 export default function setupSass (this: ModuleThis, customVariables: Options['customVariables']) {
-  const { sass, scss } = this.options.build!.loaders as Required<Pick<NuxtConfigurationLoaders, 'sass' | 'scss'>>
+  const { sass, scss } : { sass: SassOptionsV10, scss: SassOptionsV10} = this.options.build!.loaders as Required<Pick<NuxtOptionsLoaders, 'sass' | 'scss'>>
 
   // Use Dart Sass
   sass.implementation = scss.implementation = dartSass

test/module.test.ts

@@ -1,4 +1,4 @@
-import { Nuxt } from '@nuxt/core-edge'
+import { Nuxt } from '@nuxt/core'
 import dartSass from 'sass'
 import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'
 

tsconfig.test.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "lib": ["dom", "esnext"],
+    "target": "es2019",
+    "lib": ["dom", "es2019"],
     "module": "esnext",
     "moduleResolution": "node",
     "skipLibCheck": true,