Vue Final Modal is a customizable, stackable, detachable and lightweight modal component

Vue Final Modal

Introduction

features:

Tailwind CSS friendly
Renderless component
SSR support
Stackable
Detachable
Scrollable
Transition support
Mobile friendly
3.2kb gzipped

vue-final-modal has no predefined styles. There are only three classes inside vue-final-modal, including .vfm__containter, .vfm__content, .vfm__overlay. These classes have only the necessary styles and you can still easily override these styles through these props: classes, content-class, overlay-class

Here is the simplified template of entire vue-final-modal

<div class="vfm">
  <div class="vfm__overlay">
  <div class="vfm__container">
    <div class="vfm__content">
      <slot />
    </div>
  </div>
</div>

Install

NPM:

npm install vue-final-modal --save

Yarn:

yarn add vue-final-modal

How to use

<button @click="showModal = true">Show modal</button>

<vue-final-modal v-model="showModal">
  <button @click="showModal = false">close modal</button>
</vue-final-modal>

import { VueFinalModal } from 'vue-final-modal'

export default {
  components: {
    VueFinalModal,
  },
  data: () => ({
    showModal: false
  })
}

Properties

Name	Type	Required	Default	Description
ssr	Boolean	—	true	use v-show(true) or v-if(false)
classes	[String, Object, Array]	—	‘’	custom class names for Modal container element
contentClass	[String, Object, Array]	—	‘’	custom class names for Modal content element
lockScroll	Boolean	—	true	whether scroll of body is disabled while Dialog is displayed
hideOverlay	Boolean	—	false	Hides the display of the overlay.
clickToClose	Boolean	—	true	Clicking outside of the element will not close Modal.
preventClick	Boolean	—	false	The click event will not be blocked by overlay
overlayClass	String	—	‘’	Add classes to the overlay element.
transition	String	—	‘vfm’	CSS transition applied to the modal window.
overlayTransition	String	—	‘vfm’	CSS transition applied to the overlay (background).
attach	any	—	‘body’	Specifies which DOM element that this component should detach to. Set `false` will disabled this feature. String can be any valid querySelector and Object can be any valid Node. Component will attach to the element by default.

Slots

Name	Description
content-before	inject an element before `content` slot
content	inject an element has class `vfm__content` by default
-	content of Modal inside slot `content`
content-after	inject an element after `content` slot

Events

Name	Description
@before-open	Emits while modal is still invisible, but before transition starting.
@opened	Emits after modal became visible and transition ended.
@before-close	Emits before modal is going to be closed.
@closed	Emits right before modal is destroyed

Here is template structure:

<div class="vfm__container">
  <slot name="content-before" />
  <slot name="content">
    <div class="vfm__content">
      <slot />
    </div>
  </slot>
  <slot name="content-after" />
</div>

CDN

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/vue-final-modal"></script>

Unpkg

<script src="https://unpkg.com/vue-final-modal"></script>

Roadmap

If you have any ideas for optimization of vue-final-modal, feel free to open issues or pull request.

These are the features that will be added in the comming weeks:

draggable modal
resizable modal
duplicate overlay property
dynamic emit modal component with vue directive like:
- this.$modal.show('hello-world')
- this.$modal.hide('hello-world')
support Vue 3.0

Download Details:

Author: hunterliu1003

Demo: https://hunterliu1003.github.io/vue-final-modal/examples

Source Code: https://github.com/hunterliu1003/vue-final-modal

#vuejs #vue #javascript

What is GEEK

Buddha Community

Vue Final Modal is a customizable, stackable, detachable and lightweight modal component

Raja Tamil

1661169600

Make Pop-Up Modal Window In Vanilla JavaScript [2022]

Make Pop-Up Modal Window In Vanilla JavaScript

Learn how to create a simple responsive pop-up modal window using Vanilla JavaScript along with HTML and CSS with a bit of Flexbox.

Create A Button That Opens Pop Up Modal Window

Declare a <button> HTML element with an id open-modal.

<button id="open-modal">Open Modal Window</button>

The goal is when a user presses this button, the pop-up modal window will open.

Style the button using CSS Flexbox and centre it on the screen.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

button:hover {
    background: rgba(0, 0, 0, 0.7);
}

Create Pop-Up Modal Overlay

Normally, pop-up modal windows have overlays with a transparent darker background that covers the entire browser screen.

Define a div with an id model-overlay which will cover the entire screen.

<div id="modal-overlay">
<div>

Then, make it to full screen using height:100vh CSS property.

Bring it in front of the button by using position:absolute with a transparent background colour.

#modal-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
}

I just added the border to see the boundaries of the modal-overlay element.

Center Pop-Up Modal Window To The Modal Overlay

Create a div with an id modal inside the modal-overlay element, which will be an actually pop-up modal window that user interacts with.

<div id="modal-overlay">
  <div id="modal">
  </div>
<div>

Add CSS style to make it visible on the screen.

Adding width:100% and max-width:650px will make sure the width of the pop-up modal window won’t exceed when the browser width is more than 650px.

If the browser width is less than 650px, the pop-up modal window will stretch the width to fill the screen which is normally for mobile viewports.

#modal-overlay #modal {
    max-width: 650px;
    width: 100%;
    background: white;
    height: 400px;
}

Centre the pop-up modal window to the screen using Flexbox.

To do that, just add the three lines of Flexbox code to the modal-overlay which are

display:flex → Convert an HTML element to Flexbox
align-items:center → centre the pop-up modal window vertically to the viewport
justify-content:center → centre the pop-up modal window horizontally to the viewport

#modal-overlay {
   ...
  
   display: flex;
   align-items: center;
   justify-content: center;
}

Open Up Pop-Up Modal Window On Button Click

Now we have the basic pop-up modal window designed using CSS.

Make it visible when a user presses the open modal button.

To do that,

First, hide the modal overlay by default by changing its display property from flex to none.

#modal-overlay {
   ...
  
   display: none; // Changed from flex to none
   align-items: center;
   justify-content: center;
}

Create a DOM reference to the open-modal button as well as the modal-overlay elements.

const openModalButton = document.getElementById("open-modal");
const modalWindowOverlay = document.getElementById("modal-overlay");

Attach a click event to the openModalButton with the callback arrow function showModalWindow.

const showModalWindow = () => {
    modalWindowOverlay.style.display = 'flex';
}

openModalButton.addEventListener("click", showModalWindow);

Set the display property of the modalWindowOverlay to flex inside showModalWindow() function which will open up the modal window.

As you can see, there is no way we can close/hide the pop-up modalwindow after its became visible on the screen.

Let’s fix it!

Close/Hide Pop-Up Modal Window On Button Click

Typically, there will be a close button on the top or bottom right side of the pop-up modal window.

Let’s add a close button on the bottom left side of the modal window.

Define header, content and footer HTML elements inside the pop-up modal window.

<div id="modal">

    <div class="modal-header">
        <h2>Modal Pop Up Window</h2>
    </div>

    <div class="modal-content">
        <p>Modal Content</p>
    </div>
    
    <div class="modal-footer">
        <button id="close-modal">Close</button>
        <button>Save</button>
    </div>

</div>

Generally, you’ll have two buttons on the footer of the pop-up modal window, which may be save and close.

Let’s push the buttons to the bottom using Flexbox.

Turn the display property of the pop-up modal window to flex and set the flex direction to column.

#JavaScript #programming #webdev #softauthor

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Jack Downson

1579951364

A Vue JS Modal Component Mobile Friendly

Vue.js modal

Simple to use, highly customizable, mobile-friendly Vue.js 2.0+ modal with SSR support.

Install

npm install vue-js-modal --save

How to use

Include plugin in your main.js file.

import VModal from 'vue-js-modal'

Vue.use(VModal)

/*
By default, the plugin will use "modal" name for the component.
If you need to change it, you can do so by providing "componentName" param.

Example:

Vue.use(VModal, { componentName: "foo-modal" })
...
<foo-modal name="bar"></foo-modal>
*/

Create modal:

<modal name="hello-world">
  hello, world!
</modal>

Call it from anywhere in the app:

methods: {
  show () {
    this.$modal.show('hello-world');
  },
  hide () {
    this.$modal.hide('hello-world');
  }
}

You can easily send data into the modal:

this.$modal.show('hello-world', { foo: 'bar' })

And receive it in beforeOpen event handler:

<modal name="hello-world" @before-open="beforeOpen"/>

methods: {
  beforeOpen (event) {
    console.log(event.params.foo);
  }
}

If you use Bower package manager - you will have to initialize library differently:

Vue.use(window["vue-js-modal"].default);

Dialog

It is a simplified version of the modal, which has most parameters set by default and is pretty useful for quick prototyping, showing alerts or creating mobile-like modals.

To start using <v-dialog/> you must set dialog: true in plugin configuration:

Vue.use(VModal, { dialog: true })

And include it in your project:

<v-dialog/>

Call it (all params except of “text” are optional):

this.$modal.show('dialog', {
  title: 'Alert!',
  text: 'You are too awesome',
  buttons: [
    {
      title: 'Deal with it',
      handler: () => { alert('Woot!') }
    },
    {
      title: '',       // Button title
      default: true,    // Will be triggered by default if 'Enter' pressed.
      handler: () => {} // Button click handler
    },
    {
      title: 'Close'
    }
 ]
})

Vue.js modal

Dynamic Modals

In order to instantiate modals at runtime (for lazy-loading or decluttering templates), it is possible to create modals dynamically.

To start using this feature you must set dynamic: true in plugin configuration:

Vue.use(VModal, { dynamic: true, dynamicDefaults: { clickToClose: false } })

And include the <modals-container/> component it in your project:

<modals-container/>

Alternatively, the modals container can be automatically appended to the document body once the plugin is loaded using injectModalsContainer: true:

Vue.use(VModal, { dynamic: true, injectModalsContainer: true })

Call it (the first argument is the component definition, the second are component properties, the third modal parameters, and the fourth the modal event listeners):

this.$modal.show({
  template: `
    <div>
      <h1>This is created inline</h1>
      <p>{{ text }}</p>
    </div>
  `,
  props: ['text']
}, {
  text: 'This text is passed as a property'
}, {
  height: 'auto'
}, {
  'before-close': (event) => { console.log('this will be called before the modal closes'); }
})

It can also be used with .vue files:

import MyComponent from './MyComponent.vue'

this.$modal.show(MyComponent, {
  text: 'This text is passed as a property'
}, {
  draggable: true
})

Other than defining the name modal parameter, it’s also possible to close dynamic modals emitting a 'close' event:

this.$modal.show({
  template: `
    <div>
      <p>Close using this button:</p>
      <button @click="$emit('close')">Close</button>
    </div>
  `
})

If using the injectModalsContainer flag, the first mounted Vue instance without parents will be treated as the application root. This is only important to keep in mind if more than one root Vue instance is being used, which is unlikely. But if that’s the case, the root to use can be indicated with the root parameter when invoking dynamic modals or modifying this plugin’s rootInstance attribute:

import App from './App.vue'
import VModal from 'vue-js-modal'

const app1 = new Vue({
  el: '#app-1',
  render: h => h(App)
})

const app2 = new Vue({
  el: '#app-2',
  render: h => h(App)
})

VModal.rootInstance = app2

It is possible to set default property values for dynamic modals.

Example:

import VueJsModal from 'plugin'

Vue.use(VueJsModal, {
  dynamic: true,
  dynamicDefaults: {
    foo: 'foo'
  }
})

{
    showDynamicRuntimeModal () {
      this.$modal.show({
        template: `
          <div class="example-modal-content">
            <p>{{ text }}</p>
            <p>Default Property: {{ foo }} - value is "foo"</p>
          </div>
        `,
        props: ['text', 'foo']
      }, {
        text: 'This text is passed as a property'
      })
    },
}

Note: keep in mind that there are some limitations in using dynamic modals. If you need full functionality then use ordinary modal instead.

SSR

Include plugin in your nuxt.config.js file:

module.exports = {
  plugins: ['~plugins/vue-js-modal']
}

And your plugins/vue-js-modal.js will look like:

import Vue from 'vue'
import VModal from 'vue-js-modal/dist/ssr.index'

Vue.use(VModal)

Extracted CSS

There is also an SSR build with CSS file extracted. Take a look in /dist folder.

Properties

Name	Required	Type	Default	Description
name	true	[String, Number]		Name of the modal
delay	false	Number	0	Delay between showing overlay and actual modal box
resizable	false	Boolean	false	If true allows resizing the modal window, keeping it in the center of the screen.
adaptive	false	Boolean	false	If true, modal box will try to adapt to the window size
draggable	false	[Boolean, String]	false	If true, modal box will be draggable.
scrollable	false	Boolean	false	If `height` property is `auto` and the modal height exceeds window height - you will be able to scroll modal
reset	false	Boolean	false	Resets position and size before showing modal
clickToClose	false	Boolean	true	If set to `false`, it will not be possible to close modal by clicking on the background
transition	false	String		Transition name
overlayTransition	false	String	‘overlay-fade’	Transition name for the background overlay
classes	false	[String, Array]	‘v–modal’	Classes that will be applied to the actual modal box, if not specified, the default `v--modal` class will be applied
width	false	[String, Number]	600	Width in pixels or percents (e.g. 50 or “50px”, “50%”)
height	false	[String, Number]	300	Height in pixels or percents (e.g. 50 or “50px”, “50%”) or `"auto"`
minWidth	false	Number (px)	0	The minimum width to which modal can be resized
minHeight	false	Number (px)	0	The minimum height to which modal can be resized
maxWidth	false	Number (px)	Infinity	The maximum width of the modal (if the value is greater than window width, window width will be used instead
maxHeight	false	Number (px)	Infinity	The maximum height of the modal (if the value is greater than window height, window height will be used instead
pivotX	false	Number (0 - 1.0)	0.5	Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from left) of the window
pivotY	false	Number (0 - 1.0)	0.5	Vertical position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window
root	false	Vue instance	null	Root instance to obtain modal container from. This property is only necessary when using dynamic modals with more than one root instance, which is uncommon

Events

Name	Description
before-open	Emits while modal is still invisible, but was added to the DOM
opened	Emits after modal became visible or started transition
before-close	Emits before modal is going to be closed. Can be stopped from the event listener calling `event.stop()` (example: you are creating a text editor, and want to stop closing and ask the user to correct mistakes if the text is not valid)
closed	Emits right before modal is destroyed

Example:

<template>
  <modal name="example"
         :width="300"
         :height="300"
         @before-open="beforeOpen"
         @before-close="beforeClose">
    <b>{{time}}</b>
  </modal>
</template>
<script>
export default {
  name: 'ExampleModal',
  data () {
    return {
      time: 0,
      duration: 5000
    }
  },
  methods: {
    beforeOpen (event) {
      console.log(event)
      // Set the opening time of the modal
      this.time = Date.now()
    },
    beforeClose (event) {
      console.log(event)
      // If modal was open less then 5000 ms - prevent closing it
      if (this.time + this.duration < Date.now()) {
        event.stop()
      }
    }
  }
}
</script>

Example with a dynamic modal:

<script>
export default {
  name: 'ExampleModal',
  data () {
    return {
      time: 0,
      duration: 5000
    }
  },
  methods: {
    openModal () {
      this.$modal.show({
        template: `<b>{{time}}</b>`,
        props: ['time']
      }, {
        time: this.time
      }, {
        width: 300,
        height: 300
      }, {
        'before-open': this.beforeOpen,
        'before-close': this.beforeClose
      })
    },
    beforeOpen (event) {
      console.log(event)
      // Set the opening time of the modal
      this.time = Date.now()
    },
    beforeClose (event) {
      console.log(event)
      // If modal was open less then 5000 ms - prevent closing it
      if (this.time + this.duration < Date.now()) {
        event.stop()
      }
    }
  }
}
</script>

This example initializes time variable every time the modal is being opened. And then forbids closing it for the next 5000 ms

Other

Height: “auto”

From v1.2.6 height can be set to “auto”. If you want to be able to scroll modal in case it’s height exceeds window height - you can set flag scrollable="true".

p.s. scrollable will only work with height="auto".

Example:

<modal name="foo" height="auto" :scrollable="true">...</modal>

Auto height:

Scrollable content & auto height:

Close button

If you want to have a Close (x) button in the top-right corner, you can use “top-right” slot for it. There is deliberately no predefined Close button style - you will have to implement/use your own button.

Example:

<template>
  <modal name="foo">

    <div slot="top-right">
      <button @click="$modal.hide('foo')">
        ❌
      </button>
    </div>

    Hello, ☀️!

  </modal>
</template>

Draggable handler

Draggable property can accept not only Boolean but also String parameters. With String value, you can specify a CSS selector to the element which will be a “handler” for dragging.

Example:

<modal name="bar" draggable=".window-header">
  <div class="window-header">DRAG ME HERE</div>
  <div>
     Hello, 🌎!
  </div>
</modal>

Overlay background color

If you want to change overlay background color, you can easily do it using CSS.

For all modals:

.v--modal-overlay {
  background: red;
}

For specific modal:

.v--modal-overlay[data-modal="my_modal_name"] {
  background: transparent;
}

Fullscreen

<modal name="fs" :adaptive="true" width="100%" height="100%">
Dont forget about close button :)
</modal>

Developers

To run an example:

# Clone repo
git clone https://github.com/euvl/vue-js-modal.git

# Run unit tests
npm run unit

# Run linter
npm run lint

# Build main library for client & SSR
cd vue-js-modal
npm install
npm run build

# Build and run demo
cd demo/client_side_rendering
npm install
npm run dev

Unit Testing in Vue 2.0 using Jest

Include the plugin to your <Component>.spec.js.

For example: If you’re using the plugin in your Main component, then you should include the plugin to your Main.spec.js file.

import VModal from 'vue-js-modal'

Vue.use(VModal)

#vue-modal #vue-js #vue-modal-component

Asmait Ermias

1598721420

Vue Final Modal is a customizable, stackable, detachable and lightweight modal component

Vue Final Modal

Documentation

Examples

CDN example

Introduction

features:

Tailwind CSS friendly
Renderless component
SSR support
Stackable
Detachable
Scrollable
Transition support
Mobile friendly
3.2kb gzipped

Here is the simplified template of entire vue-final-modal

<div class="vfm">
  <div class="vfm__overlay">
  <div class="vfm__container">
    <div class="vfm__content">
      <slot />
    </div>
  </div>
</div>

Install

NPM:

npm install vue-final-modal --save

Yarn:

yarn add vue-final-modal

How to use

<button @click="showModal = true">Show modal</button>

<vue-final-modal v-model="showModal">
  <button @click="showModal = false">close modal</button>
</vue-final-modal>

import { VueFinalModal } from 'vue-final-modal'

export default {
  components: {
    VueFinalModal,
  },
  data: () => ({
    showModal: false
  })
}

Properties

Name	Type	Required	Default	Description
ssr	Boolean	—	true	use v-show(true) or v-if(false)
classes	[String, Object, Array]	—	‘’	custom class names for Modal container element
contentClass	[String, Object, Array]	—	‘’	custom class names for Modal content element
lockScroll	Boolean	—	true	whether scroll of body is disabled while Dialog is displayed
hideOverlay	Boolean	—	false	Hides the display of the overlay.
clickToClose	Boolean	—	true	Clicking outside of the element will not close Modal.
preventClick	Boolean	—	false	The click event will not be blocked by overlay
overlayClass	String	—	‘’	Add classes to the overlay element.
transition	String	—	‘vfm’	CSS transition applied to the modal window.
overlayTransition	String	—	‘vfm’	CSS transition applied to the overlay (background).
attach	any	—	‘body’	Specifies which DOM element that this component should detach to. Set `false` will disabled this feature. String can be any valid querySelector and Object can be any valid Node. Component will attach to the element by default.

Slots

Name	Description
content-before	inject an element before `content` slot
content	inject an element has class `vfm__content` by default
-	content of Modal inside slot `content`
content-after	inject an element after `content` slot

Events

Name	Description
@before-open	Emits while modal is still invisible, but before transition starting.
@opened	Emits after modal became visible and transition ended.
@before-close	Emits before modal is going to be closed.
@closed	Emits right before modal is destroyed

Here is template structure:

<div class="vfm__container">
  <slot name="content-before" />
  <slot name="content">
    <div class="vfm__content">
      <slot />
    </div>
  </slot>
  <slot name="content-after" />
</div>

CDN

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/vue-final-modal"></script>

Unpkg

<script src="https://unpkg.com/vue-final-modal"></script>

Roadmap

If you have any ideas for optimization of vue-final-modal, feel free to open issues or pull request.

These are the features that will be added in the comming weeks:

draggable modal
resizable modal
duplicate overlay property
dynamic emit modal component with vue directive like:
- this.$modal.show('hello-world')
- this.$modal.hide('hello-world')
support Vue 3.0

Download Details:

Author: hunterliu1003

Demo: https://hunterliu1003.github.io/vue-final-modal/examples

Source Code: https://github.com/hunterliu1003/vue-final-modal

#vuejs #vue #javascript

Sofia Kelly

1578061020

10 Best Vue Icon Component For Your Vue.js App

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert’s fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Animated SweetAlert Icons for Vue

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

vue-svg-transition

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Vue-Awesome

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

vue-transitioning-result-icon

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

vue-zondicons

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

vicon

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

vue-svgicon

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

vue-material-design-icons