docs: update Nuxt docs and examples

radial-color-picker · Oct 14, 2021 · 16b639d · 16b639d
1 parent 4cd76de
commit 16b639d
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 31 deletions.
diff --git a/docs/guide/faq.md b/docs/guide/faq.md
@@ -4,7 +4,7 @@
 
 The good news: yes, via Vite's server-side rendering.
 
-The bad news: Nuxt v2.x doesn't support Vue 3 and until it does the `ColorPicker` isn't compatible with Nuxt's server-side rendering/static site generation.
+The bad news: As of this writing Nuxt v3 has been released, but it is still in Beta. Use at your own risk.
 
 ## What's the browser support?
 

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -50,11 +50,17 @@ Depending on your build tool of choice you may have to setup the appropriate loa
 If you don't want to register the component everywhere it's used you can instead register it globally:
 
 ```js
-// in your App.vue or main.js file
+// in your main.js file
+import { createApp } from 'vue';
+import App from './App.vue';
+
 import ColorPicker from '@radial-color-picker/vue-color-picker';
 import '@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';
 
-Vue.use(ColorPicker);
+const app = createApp(App);
+
+app.use(ColorPicker);
+app.mount('#app');
 ```
 
 ## Using CDN
@@ -63,7 +69,7 @@ You can also use the minified sources directly:
 
 ```html
 <head>
-    <script src="https://unpkg.com/vue@3.1.5/dist/vue.global.prod.js"></script>
+    <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.prod.js"></script>
     <script src="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.umd.min.js"></script>
     <link href="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css" rel="stylesheet">
 </head>

diff --git a/examples/with-nuxt/.gitignore b/examples/with-nuxt/.gitignore
@@ -17,3 +17,8 @@ package-lock.json
 *.njsproj
 *.sln
 *.sw*
+
+# Nuxt files
+.nuxt
+nuxt.d.ts
+.output
diff --git a/examples/with-nuxt/README.md b/examples/with-nuxt/README.md
@@ -1,10 +1,8 @@
 # Example - With Nuxt.js
 
-**Note:** Current version of Nuxt (v2.x) doesn't support Vue 3. The example will be updated with the upcoming Nuxt major release.
-
 ---
 
-Example shows how to setup `vue-color-picker` with [Nuxt.js](https://nuxtjs.org). Setup process is the same as an app built with Vue CLI, but the CSS is configured globally for all pages in `next.config.js`.
+Example shows how to setup `vue-color-picker` with [Nuxt.js](https://v3.nuxtjs.org/). Setup process is the same as an app built with Vue CLI or Vite, but the CSS is configured globally for all pages in `next.config.ts`.
 
 ## How to use
 Download the example [or clone the whole project](https://github.com/radial-color-picker/vue-color-picker.git):
@@ -30,4 +28,4 @@ npm run build
 npm start
 ```
 
-For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
+For detailed explanation on how things work, checkout [Nuxt.js docs](https://v3.nuxtjs.org/).
diff --git a/examples/with-nuxt/pages/index.vue → examples/with-nuxt/app.vue b/examples/with-nuxt/pages/index.vue → examples/with-nuxt/app.vue
@@ -1,15 +1,16 @@
 <template>
-    <div id="app">
+    <div>
         <color-picker v-bind="color" @input="onInput" />
         <h1>{{ msg }}</h1>
         <pre>{{ color }}</pre>
     </div>
 </template>
 
 <script>
-    // Note: you don't have to import and declare the color-picker component
-    // This is done automatically in `nuxt.config.js`
+    import ColorPicker from '@radial-color-picker/vue-color-picker';
+
     export default {
+        components: { ColorPicker },
         data() {
             return {
                 msg: 'Welcome to Your Vue.js App',

diff --git a/examples/with-nuxt/nuxt.config.js b/examples/with-nuxt/nuxt.config.js
diff --git a/examples/with-nuxt/nuxt.config.ts b/examples/with-nuxt/nuxt.config.ts
@@ -0,0 +1,6 @@
+import { defineNuxtConfig } from 'nuxt3';
+
+export default defineNuxtConfig({
+    // Add the Color Picker component's CSS globally
+    css: ['@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css'],
+});
diff --git a/examples/with-nuxt/package.json b/examples/with-nuxt/package.json
@@ -5,13 +5,14 @@
   "author": "Rosen Kanev",
   "private": true,
   "scripts": {
-    "dev": "nuxt",
+    "dev": "nuxt dev",
     "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate"
+    "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@radial-color-picker/vue-color-picker": "latest",
-    "nuxt": "^2.0.0"
+    "@radial-color-picker/vue-color-picker": "latest"
+  },
+  "devDependencies": {
+    "nuxt3": "latest"
   }
 }
diff --git a/examples/with-nuxt/static/favicon.ico b/examples/with-nuxt/static/favicon.ico
diff --git a/examples/with-nuxt/tsconfig.json b/examples/with-nuxt/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": false,
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ]
+  }
+}