A Minimalist Dark Design System for Vue.js

vuedarkmode is a modern and very small UI component library that helps you easily create darkly designed Vue.js applications.

vue dark mode, vuetify dark mode, vue tailwind dark mode, vue a11ydark mode, vuetify theme cache, vue theme, buefy dark mode, vuetify dark mode toggle

Components included:

Alert

Avatar
Badge
Button
Divider
Heading
Icon
ProgressBar
Spinner
Toast
Checkbox
ImageUploader
Input
InputNumber
Radio
Select
Tabs
Textarea
Toggle

How to make use of it:

Install & Download:

npm install @growthbunker/vuedarkmode

# Or if you prefer using yarn
yarn add @growthbunker/vuedarkmode

1. In your main.js file:

import Vue from "vue"
import VueDarkMode from "@growthbunker/vuedarkmode"

Vue.use(VueDarkMode)

2. Create a new plugin in plugins/vuedarkmode.js:

import Vue from "vue"
import VueDarkMode from "@growthbunker/vuedarkmode"

Vue.use(VueDarkMode)

3. Add this new plugin to nuxt.config.js.

module.exports = {
  // ...
  plugins: [{ src: "@/plugins/vuedarkmode.js" }];
}

4. Get the latest version from jsdelivr, and import the JavaScript file to your page.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/vuedarkmode@latest/dist/vuedarkmode.min.js"></script>