Native Components
    Wrapper Components
      Introduction
    • Barcodes
    • Buttons
    • Charts
    • Chat
    • DataSource
    • Date Inputs
    • Diagram
    • Dialog
    • Dropdowns
    • DropDownTree
    • Editor
    • Gantt
    • Gauges
    • Grid (wrapper)
    • Inputs
    • Layout
    • List Views
    • ListBox
    • Map
    • MediaPlayer
    • PivotGrid
    • Popups
    • Scheduler
    • ScrollView
    • Spreadsheet
    • TreeList
    • TreeMap
    • TreeView
    • Upload
    • Validator
    • Window
    • Framework & Features
    • Globalization
    • Troubleshooting
    Styling & Themes
    Common Features
    Project Setup
    Changelog

Popups Overview

The Popups display content that provides information to the user on various occasions.

The Popups Package is part of Kendo UI for Vue, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates how to initialize the Notification and Tooltip.

Example
View Source
Edit In Stackblitz  
Change Theme:

Installation

To initialize the Popups, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI Popups package for Vue.

    npm install --save @progress/kendo-popups-vue-wrapper

    The package also exports the following wrappers for individual components:

    • Notification
    • Tooltip
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui' // This will import the entire Kendo UI library
    // As an alternative, you could import only the scripts that are used by a specific widget:
    // import '@progress/kendo-ui/js/kendo.tooltip' // Imports only the Tooltip script and its dependencies
    // import '@progress/kendo-ui/js/kendo.notification' // Imports only the Notification script and its dependencies
    
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { Tooltip,
        Notification,
        KendoPopupsInstaller } from '@progress/kendo-popups-vue-wrapper'
    
    Vue.use(KendoPopupsInstaller)
    
    new Vue({
      el: '#app',
      components: {
        KendoTooltip,
        KendoNotification
      }
    })