feat!: add support for nuxt 3/nuxt bridge (#94)

* refactor: use @nuxt/kit

* feat: support `vue-meta` and `@vueuse/head`

* feat: use nitro publicAssets

* chore: update lock files

* fix: add semicolon

* chore: use yarn

* chore: add playground

* fix: parse fonts on head

* test: update using `@nuxt/test-utils`

* test: don't rely on nuxt context to get rootDir

* chore: run vitest only once

* chore: upgrade nuxt to rc6

* test: add package.json stubs for windows

nuxt/module-builder#22

* test:  simplify

Co-authored-by: Daniel Roe <[email protected]>

.github/workflows/ci.yml

@@ -3,10 +3,10 @@ name: ci
 on:
   push:
     branches:
-      - master
+      - main
   pull_request:
     branches:
-      - master
+      - main
 
 jobs:
   ci:
@@ -15,7 +15,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
-        node: [12, 14]
+        node: [14, 16, 18]
 
     steps:
       - uses: actions/setup-node@v3
@@ -32,9 +32,11 @@ jobs:
           key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
 
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
         run: yarn
 
+      - name: Prepare TypeScript environment
+        run: yarn dev:prepare
+
       - name: Lint
         run: yarn lint
 

.gitignore

@@ -9,4 +9,5 @@ coverage
 dist
 sw.*
 .env
+.output
 test/fixture/download/assets

README.md

@@ -8,7 +8,7 @@
 [![Codecov][codecov-src]][codecov-href]
 [![License][license-src]][license-href]
 
-> [Google Fonts](https://developers.google.com/fonts) module for [NuxtJS](https://nuxtjs.org)
+> [Google Fonts](https://developers.google.com/fonts) module for [Nuxt](https://nuxtjs.org)
 
 - [✨  Release Notes](https://google-fonts.nuxtjs.org/releases)
 - [📖  Documentation](https://google-fonts.nuxtjs.org)
@@ -27,35 +27,17 @@
 
 [📖  Read more](https://google-fonts.nuxtjs.org)
 
-## Setup
+## Contributing
 
-1. Add `@nuxtjs/google-fonts` dependency to your project
+You can contribute to this module online with CodeSandBox:
 
-```bash
-yarn add --dev @nuxtjs/google-fonts # or npm install --save-dev @nuxtjs/google-fonts
-```
+[![Edit @nuxtjs/google-fonts](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxt-community/google-fonts-module/?fontsize=14&hidenavigation=1&theme=dark)
 
-2. Add `@nuxtjs/google-fonts` to the `buildModules` section of `nuxt.config.js`
-
-```js
-{
-  buildModules: [
-    // Simple usage
-    '@nuxtjs/google-fonts',
-
-    // With options
-    ['@nuxtjs/google-fonts', { /* module options */ }]
-  ]
-}
-```
-
-:warning: If you are using Nuxt **< v2.9** you have to install the module as a `dependency` (No `--dev` or `--save-dev` flags) and use `modules` section in `nuxt.config.js` instead of `buildModules`.
-
-## Development
+Or locally:
 
 1. Clone this repository
-2. Install dependencies using `yarn install` or `npm install`
-3. Start development server using `yarn dev` or `npm run dev`
+2. Install dependencies using `yarn install`
+3. Start development server using `yarn dev`
 
 ## License
 

package.json

@@ -1,43 +1,49 @@
 {
   "name": "@nuxtjs/google-fonts",
   "version": "2.0.0",
-  "description": "Google Fonts module for NuxtJS",
+  "description": "Google Fonts module for Nuxt",
   "repository": "nuxt-community/google-fonts",
   "license": "MIT",
   "contributors": [
     "Ricardo Gobbo de Souza <[email protected]>"
   ],
-  "main": "./dist/module.js",
-  "types": "./dist/module.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/module.cjs",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "siroc build",
-    "prepublishOnly": "yarn build",
-    "dev": "nuxt dev test/fixture/basic",
-    "lint": "eslint --ext .js,.ts,.vue .",
-    "release": "yarn test && yarn build && standard-version && git push --follow-tags && npm publish",
-    "test": "yarn lint && yarn jest"
+    "build": "nuxt-module-build",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev": "nuxt dev playground",
+    "lint": "eslint --ext .js,.ts,.vue",
+    "prepack": "yarn build",
+    "release": "yarn test && standard-version && git push --follow-tags && npm publish",
+    "test": "yarn lint && nuxi test --coverage"
   },
   "dependencies": {
-    "consola": "^2.15.3",
-    "defu": "^6.0.0",
-    "google-fonts-helper": "^2.0.1"
+    "@nuxt/kit": "^3.0.0-rc.6",
+    "google-fonts-helper": "^3.1.0",
+    "pathe": "^0.3.2"
   },
   "devDependencies": {
-    "@babel/preset-typescript": "latest",
-    "@nuxt/test-utils": "latest",
-    "@nuxt/types": "latest",
+    "@nuxt/module-builder": "latest",
+    "@nuxt/test-utils": "^3.0.0-rc.6",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@types/jest": "latest",
-    "@types/node": "latest",
+    "c8": "latest",
     "del": "latest",
     "eslint": "latest",
-    "jest": "latest",
-    "nuxt": "latest",
-    "siroc": "latest",
-    "standard-version": "latest"
+    "nuxt": "^3.0.0-rc.6",
+    "standard-version": "latest",
+    "vitest": "latest"
   },
   "publishConfig": {
     "access": "public"

playground/app.vue

@@ -0,0 +1,12 @@
+
+<template>
+  <div>
+    <h1>Google Fonts</h1>
+    <div style="font-family: 'Roboto';">
+      Roboto
+    </div>
+    <div style="font-family: 'Mulish';">
+      Mulish
+    </div>
+  </div>
+</template>

playground/nuxt.config.ts

@@ -0,0 +1,14 @@
+import { defineNuxtConfig } from 'nuxt'
+import GoogleFontsModule from '..'
+
+export default defineNuxtConfig({
+  modules: [
+    GoogleFontsModule
+  ],
+  googleFonts: {
+    families: {
+      Roboto: true,
+      Mulish: true
+    }
+  }
+})

playground/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@nuxtjs/google-fonts-playground"
+}