Vue.js Lightbox Component Without any Dependencies

Vue.js Lightbox Component Without any Dependencies

Vue-cool-lightbox is a Vue.js lightbox component without any dependencies, inspired by with zoom and videos supported

Vue-cool-lightbox

Vue-cool-lightbox is a Vue.js lightbox component without any dependencies, inspired by fancybox with zoom and videos supported

Installation

Use the node package manager to install vue-cool-lightbox.

npm install --save vue-cool-lightbox

and use the lightbox:

import CoolLightBox from 'vue-cool-lightbox'

export default {
  components: {
    CoolLightBox,
  },
}
Usage
<template>
  <div id="app">
    <CoolLightBox 
      :items="items" 
      :index="index"
      loop
      @close="index = null">
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        class="image"
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        @click="setIndex(imageIndex)"
        :style="{ backgroundImage: 'url(' + image.src + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
import CoolLightBox from 'vue-cool-lightbox'

export default {
  name: "app",
  data: function () {
    return {
      items: [
        {
          src: 'https://cosmos-images2.imgix.net/file/spina/photo/20565/
          191010_nature.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835',
        },
        {
          src: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/
          images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
        },
      ],
      index: null
    };
  },
  components: {
    CoolLightBox
  },
  methods: {
    setIndex(index) {
      this.index = index
    }
  }
};
</script>

Or items can be just an array:

items: [
  'http://example.com/image.jpg',
  'youtube.com',
  'vimeo.com',
  'mp4',
]

Items Supported attributes

Attribute required type Description
src yes string media source, it can be an image or a Youtube / Vimeo / Mp4 video
title no string the image title
description no string the image description
thumb no string thumb url used in thumbs block

Props Supported

Attribute type Description Default
items Array Array of images/videos
index Number Index of items to open
loop Boolean Enables looping through items true
slideshow Boolean Enables lighbox slideshow true
slideshowColorBar String Color of the slideshow progress bar #fa4242
slideshowDuration Number Duration of slides when slideshow is running (in ms) 3000
srcName String Name of the prop to use as image/video url src
srcThumb String Name of the prop to use as image/video thumb thumb
overlayColor String Overlay color rgba(30, 30, 30, .9)

Slots Supported

Name Description
icon-previous Previous icon
icon-next Next icon
close Close icon
Demo Download

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

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

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.

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.

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.

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.

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.

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

7. vue-svgicon

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

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.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

7 Best Vue Highlight Component for Your Vue App

7 Best Vue Highlight Component for Your Vue App

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I've collected.

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I've collected.

1. vue-snippets

Vue3 Snippets, This extension adds Vue3 Code Snippets into Visual Studio Code.

Download


2. vim-vue-plugin

Vim syntax and indent plugin for vue files

Download


3. vue-highlighter

Vue directive for highlight multiple istances of a word.

Download


4. vue-code-highlight

Beautiful code syntax highlighting as Vue.js component.

Download


5. Vue Prism Editor

A dead simple code editor with syntax highlighting and line numbers. 7kb/gz

Features

  • Code Editing ^^
  • Syntax highlighting
  • Undo / Redo
  • Copy / Paste
  • The spaces/tabs of the previous line is preserved when a new line is added
  • Works on mobile (thanks to contenteditable)
  • Resize to parent width and height
  • Support for line numbers
  • Support for autosizing the editor
  • Autostyling the linenumbers(optional)

Demo

Download


6. vue-highlight-words

A simple port from react-highlight-words

Vue component to highlight words within a larger body of text.

Demo

Download


7. vue-highlight-text

Vue component for highlight multiple istances of a word.

Demo

Download


Thank for read!

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

The 10 Vue markdown components below will give you a clear view.

1. Vue Showdown

Use showdown as a Vue component.

View Demo

Download Source

2. showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.

View Demo

Download Source

3. markdown-it-vue

The vue lib for markdown-it.

View Demo

Download Source

4. perfect-markdown

perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.

View Demo

Download Source

5. v-markdown-editor

Vue.js Markdown Editor component.

View Demo

Download Source

6. markdown-to-vue-loader

Markdown to Vue component loader for Webpack.

View Demo

Download Source

7. fo-markdown-note Component for Vue.js

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

View Demo

Download Source

8. Vue-SimpleMDE

Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0

View Demo

Download Source

9. mavonEditor

A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.

View Demo

Download Source

10. vue-markdown

A Powerful and Highspeed Markdown Parser for Vue.

View Demo

Download Source

Thank for read!