• This repository has been archived on 10/Jun/2023
  • Stars
    star
    1,201
  • Rank 37,598 (Top 0.8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Material web components for Vue.js

If you're looking for vue-mdl, check the mdl branch. To learn about what's happening, check #139



last version Circle CI Codecov Coverage Discord


Vue Material Components web

Material Components Web for Vue.js

This is the adaptation of Material Components web for Vue.js. Keeping them fast, easy to use and, SSR ready.

The docs will be the demo, until then you can check the test folder and the Material Components web demo

Installation

$ npm install --save vue-mdc
# or
$ yarn add vue-mdc

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueMdc from 'vue-mdc'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mdc/dist/vue-mdc.css'

Vue.use(VueMdc)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-mdc/dist/vue-mdc.css"></link>
<script src="vue-mdc/dist/vue-mdc.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-mdc/dist/vue-mdc.css"></link>
<script src="https://unpkg.com/vue-mdc"></script>

Docs

WIP ๐Ÿ˜

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it ๐Ÿš€
npm publish

License

MIT

More Repositories

1

vue-promised

๐Ÿ’ Composable Promises & Promises as components
TypeScript
1,792
star
2

vim-vue

Syntax Highlight for Vue.js components
Vim Script
1,285
star
3

unplugin-vue-router

Next Generation file based typed routing for Vue Router
TypeScript
1,279
star
4

catimg

๐Ÿฆฆ Insanely fast image printing in your terminal
C
1,239
star
5

mande

<700 bytes convenient and modern wrapper around fetch with smart extensible defaults
TypeScript
1,105
star
6

vuexfire

Check
JavaScript
559
star
7

pinia-colada

๐Ÿน The smart data fetching layer for Pinia
TypeScript
453
star
8

vite-tailwind-starter

Starter using Vite + Tailwind for super fast prototyping
Vue
452
star
9

vuex-mock-store

โœ…Simple and straightforward Vuex Store mock for vue-test-utils
JavaScript
273
star
10

focus-trap-vue

Vue component to trap the focus within a DOM element
JavaScript
200
star
11

vue-plugin-template

๐Ÿš€ Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
JavaScript
192
star
12

vue-router-mock

๐Ÿงช Easily mock routing interactions in your Vue apps
TypeScript
187
star
13

vue-local-scope

๐Ÿ–‡ Generate local scopes in templates to compute data from other scoped slots or simply to have variables in templates
JavaScript
168
star
14

vue-reactive-refs

Make $refs reactive so they can be used in computed properties and watchers
TypeScript
160
star
15

vue-ts-lib

Vue 3 library starter in TS with lint, auto release, changelog and tests
JavaScript
156
star
16

sounds-webpack-plugin

๐Ÿ”ŠNotify or errors, warnings, etc with sounds
JavaScript
124
star
17

vue-tweezing

๐Ÿ’ƒ Easy, customizable and automatic tweening nicely served in scoped slots
JavaScript
100
star
18

vue-compose-promise

๐Ÿ’ Promises using vue composition api
TypeScript
76
star
19

vue-coerce-props

Coerce props to whatever you want
JavaScript
75
star
20

vue-use-spring

๐Ÿ’ซ Naturally fluid animations for Vue
TypeScript
72
star
21

shapify

๐ŸŒ€Easily transform objects/rename keys with full TypeScript support
JavaScript
67
star
22

pinia-plugin-debounce

Config-based action debouncing made easy
TypeScript
64
star
23

markdown-it-custom-block

Handle custom blocks transformations for markdown-it
JavaScript
53
star
24

state-animation-demos

Demos for Vue.js amsterdam/roadtrip talk: State animations, getting them right
Vue
43
star
25

task-logger.sh

๐ŸŽจ shell library to log tasks with nice output. Supports zsh and bash
Shell
43
star
26

vue-router-view-transition

Properly time out-in transitions with scrollBehavior
JavaScript
40
star
27

vuefire-nuxt-example

Example project using VueFire with Nuxt
Vue
31
star
28

vue-prop-data-fallback

Vue mixin to support an optional prop by falling back to a local data
JavaScript
31
star
29

vuefire-emoji-panel

Nuxt + VueFire Demo code
TypeScript
30
star
30

size-check-action

A custom size action
TypeScript
28
star
31

2021-amsterdam-demos

Vue
25
star
32

rollit

๐ŸŒฏ Zero config js library bundling using rollup with support for Vue
JavaScript
24
star
33

talk-vuejs-and-typescript-a-complicated-relationship

Talk Vue.js and Typescript, a complicated relationship
21
star
34

unplugin-vue-router-demo

Demo for the talk "Stop writing your routes"
TypeScript
21
star
35

vue-recomputed

Recomputable computed properties
JavaScript
21
star
36

vuefire-vite-example

Example project using VueFire in a vite project
Vue
21
star
37

onlysponsors

Tracker for Only Sponsors
20
star
38

nuxt--vuefire-example-spark-plan

๐Ÿ”ฅ Nuxt + VueFire template to bootstrap your Firebase App
Vue
19
star
39

p-singleton

Ensure only one instance of a promise is created until rejected or resolved
JavaScript
19
star
40

clipboard-text

Simple and small copy-text-to-the-clipboard-utility with IE11 support
TypeScript
13
star
41

how2

Exercise building a scalable web app like how2 cli using Vue
JavaScript
12
star
42

nuxt--vuefire-example-blaze-plan

๐Ÿ”ฅ Nuxt + VueFire template to bootstrap your Firebase App with the Blaze plan
Vue
12
star
43

faked-promise

Create a fake promise that can be resolve and rejected programatically
JavaScript
11
star
44

jest-mock-warn

Mock console.log warn calls and assert their calls
JavaScript
11
star
45

lib-boilerplate-ts

personal boilerplate for a lib with ts
JavaScript
11
star
46

esm.dev

๐Ÿ‘จโ€๐Ÿ’ป my personal website
TypeScript
10
star
47

dotfiles

๐Ÿ“ My dotfiles
Vim Script
9
star
48

phaser-webpack-ts

Starter for Phaser 3 with Typescript, webpack and weback DLLPlugin
JavaScript
8
star
49

mocha-requirejs-boilerplate

JavaScript
7
star
50

paths.esm.dev

๐Ÿ›ฃ A Vue Router path debugger
Vue
7
star
51

mocha-css

A mocha stylesheet for the HTML reporter that let you append visual tests
CSS
7
star
52

eslint-config-posva

๐Ÿคบ Opinionated eslint set of rules with support for Vue
JavaScript
7
star
53

vitesse-unplugin-vue-router

Test repo for unplugin-vue-router + vitesse
TypeScript
6
star
54

minesweeper.rs

Learning project with Rust: Minesweeper
Rust
5
star
55

OUTDATED_nuxt-vuefire-example

wip
Vue
5
star
56

renovate-config

Renovate config for Open Source
5
star
57

vitepress-theme-nuxt-content

Vitepress theme imitating Nuxt Content
Vue
4
star
58

pinia-ssr-example-cw

TypeScript
4
star
59

instacraper

Scrap images from Instagram post
JavaScript
4
star
60

nuxt--vuefire-demo

Nuxt VueFire Demo
Vue
4
star
61

vercel-nuxt-example

Vue
3
star
62

vue-pinia-example

Created with CodeSandbox
JavaScript
3
star
63

vuefire-vitesse-example

Example of using VueFire with SSR
TypeScript
3
star
64

vuefire-core

mirror to test something with codecov
JavaScript
3
star
65

bug-vue-loader-slot

Vue
2
star
66

store-code-split-demo

demo to showcase ideal codesplit for a store like Vuex
JavaScript
2
star
67

bug-report-vca

JavaScript
2
star
68

nuxt-composition-api-185

Vue
2
star
69

configure-script

โšก Simple script to generate Makefiles for your project. It's mainly aimed for C/C++ but can be adapted to other languages
Shell
2
star
70

vuefire-examples

Various examples showcasing vuefire/vuexfire
HTML
2
star
71

.github

Default .github folder
2
star
72

2d-collisions

Collision for 2D using the SAT theorem with Rectangles
C++
2
star
73

mangare-angular

๐Ÿ™ Download Manga in convenient formats!
JavaScript
1
star
74

mille-bornes

mille bornes card game for 2 players only with AI and online
CoffeeScript
1
star
75

slides

๐Ÿ“ข Talks I have given somewhere, sometime
HTML
1
star
76

blog.esm.dev

Vue
1
star
77

awesome-latex-workspace

๐Ÿ“‘ Watcher + commit based diff generator
Shell
1
star
78

vue-merge-options

Helpers to merge vue custom options
1
star
79

bcn-marfeel-demo

Demo for the meetup @marfeel the 19/07/2018
Vue
1
star
80

bug-report-nuxt-plugin

TypeScript
1
star
81

lerna-test

Testing things with lerna
JavaScript
1
star
82

imag-utils

Scripts ou autres infos utiles ร  l'Ensimag
JavaScript
1
star
83

Rndm

Random number generation for vim
Vim Script
1
star
84

portfolio

1
star
85

planet-noise

Test to generate planet terrain using libnoise. SFML to render the image
C++
1
star
86

app-dep-test-renovate

JavaScript
1
star
87

vue-mdc.js.org

Documentation for vue-mdc
JavaScript
1
star
88

literate-couscous

1
star
89

lab-vue-getting-started

tech.io lab
JavaScript
1
star
90

tetris

โฌ› A simple engine of tetris that can be used along with another printing system
C
1
star
91

pretty-hrtime.sh

๐Ÿ•’ Pretty High Resolution Time in shell
Shell
1
star
92

nuxt--vuefire-repro-template

Nuxt VueFire template for reproductions
Vue
1
star
93

posva

๐ŸŒฎ๐ŸŒฎ๐ŸŒฎ
1
star
94

app-dep-test

JavaScript
1
star
95

test-pr-lib

JavaScript
1
star
96

MangaDown

Allow to download mangas from websites using a parsing file
C++
1
star
97

gotta-go-fast-vim

๐ŸŽ Language agnostic starter kit for vim
Shell
1
star
98

pinia.esm.dev-redirect

Redirect site from pinia.esm.dev to pinia.vuejs.org
1
star
99

hydrogen

iGam4ER
JavaScript
1
star