Coder Social home page Coder Social logo

socheatsok78 / vuetify-kbar Goto Github PK

View Code? Open in Web Editor NEW
12.0 2.0 1.0 2.78 MB

[Incubation] A simple plug-n-play cmd+k interface for Vuetify

Home Page: https://npmjs.com/@socheatsok78/vuetify-kbar

License: MIT License

JavaScript 7.91% Vue 67.88% TypeScript 19.98% HTML 4.23%
vuetify kbar cmdk

vuetify-kbar's Introduction

Vuetify kBar

A simple plug-n-play cmd+k interface for Vuetify.

Live demo

⚠️⚠️ This project is currently is in work-in-progress stage.

Screen Shot 2021-10-31 at 8 27 36 PM

Guide

Install

Note: You'll need to bring your own vuetify.
You can install vuetify via npm install vuetify or yarn add vuetify.

$ npm install @socheatsok78/vuetify-kbar@next
# or
$ yarn add @socheatsok78/vuetify-kbar@next

Usage

<template>
  <v-app id="app">
    <v-kbar :actions="actions" />
  </v-app>
</template>

<script>
import { mdiClipboard } from '@mdi/js'

const actions = [
  {
    id: 'blog',
    name: 'Blog',
    description: '',
    shortcut: ['b'],
    keywords: 'writing words',
    perform: () => (window.location.pathname = 'blog')
  },
  {
    id: 'contact',
    name: 'Contact',
    shortcut: ['c'],
    keywords: 'email',
    perform: () => (window.location.pathname = 'contact')
  }
]

export default {
  name: 'App',
  components: {
    VKbar
  },
  data: () => ({
    actions: actions
  })
}
</script>

Development

This project was created using @vue/cli service.

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

vuetify-kbar's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

bardoapp

vuetify-kbar's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.