@nuxtjs/color-mode 3.0.0

v3.0.0

on Node.js NPM

v3 of @nuxtjs/color-mode requires either Nuxt Bridge or Nuxt 3. If you are using Nuxt 2 without Bridge, you should continue to use v2.

• ▶️  Online playground

🔥 Notable changes

1. Uses @nuxt/module-builder to build module.
2. Refactor structure (lib -> src/dist, templates -> runtime)
3. rewrite in TypeScript
4. Move from templating options to creating a virtual module for greater performance
5. Use esbuild to minify the script - note: ⚠️ it's likely this raises the minimum browser target ⚠️

👉 Migration

1. The main change between Nuxt 2 -> Nuxt 3 is that you will define your color mode at the page level with definePageMeta:

     <template>
       <h1>This page is forced with light mode</h1>
     </template>
     
     <script>
   - export default {
   -   colorMode: 'light',
   - }
   + definePageMeta({
   +   colorMode: 'light',
   + })
     </script>

   ⚠️ If you are using Nuxt Bridge, you should not use definePageMeta but instead continue using the component option colorMode.

2. The $colorMode helper remains the same, but there is also a new composable (useColorMode) which is the recommended way of accessing color mode information.

3. If you were directly importing color mode configuration types, note that this has been renamed to ModuleOptions.