Morioh
Login
NodeJS Tutorial

NodeJS Tutorial

4 years ago

A Minimalist Dark Design System for Vue.js

A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.

Installation

npm install @growthbunker/vuedarkmode

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

Vue.js

In your main.js file:

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

Vue.use(VueDarkMode)

Nuxt.js

Create a new plugin in plugins/vuedarkmode.js:

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

Vue.use(VueDarkMode)

Add this new plugin to nuxt.config.js.

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

CDN

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

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

We recommend our users to lock Vue Dark Mode’s version when using CDN. Requesting the latest version (as opposed to “latest major” or “latest minor”) is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing.

Base Components

Field Components

#vue-js #based-component #vue-dark-design

A Minimalist Dark Design System for Vue.js
12.85 GEEK