Search results

Getting started with Vue Message component

31 Jan 2023 / 3 minutes to read

The following section explains the required steps to build the Vue Message component with its basic usage in step by step procedure.

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

The following list of dependencies are required to use the Message component in the application.

Copied to clipboard
|-- @syncfusion/ej2-vue-notifications
  |-- @syncfusion/ej2-base
  |-- @syncfusion/ej2-buttons
  |-- @syncfusion/ej2-popups
  |-- @syncfusion/ej2-notifications
  |-- @syncfusion/ej2-vue-base

Installation and configuration

Use Vue CLI to setup vue applications.

To install Vue CLI, use the following command.

Copied to clipboard
npm install -g @vue/cli

Start a new project using the following Vue CLI command.

Copied to clipboard
vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in the npmjs.com registry.

To install the Message component, use the following command.

Copied to clipboard
npm install @syncfusion/ej2-vue-notifications --save

Registering Message Component

For registering Vue Message component, two ways are available. They are as follows.

  • Vue.use()
  • Vue.component()

Using Vue.use()

Import the Message component plugin from the ej2-vue-notifications package and register the same using the Vue.use() with component plugin as its argument.

Refer the following code sample.

Copied to clipboard
import { MessagePlugin } from '@syncfusion/ej2-vue-notifications';

Vue.use(MessagePlugin);

Using Vue.component()

Import the Message component and Message component plugin from the ej2-vue-notifications package and register it using the Vue.component() with the name of the Message component plugin and the Vue Message component as its arguments.

Refer the following code sample.

Copied to clipboard
import { MessageComponent, MessagePlugin } from '@syncfusion/ej2-vue-notifications';

Vue.component(MessagePlugin.name, MessageComponent);

Adding Message Component

Add the EJ2 Vue Message by using the <ejs-message> selector to the <template> section of the App.vue file in the src directory. The content attribute of the Message component is provided as content in the data option of the <script> section.

Copied to clipboard
<template>
  <ejs-message id="msg" :content="content"></ejs-message>
</template>
<script>
import Vue from "vue";
import { MessagePlugin } from "@syncfusion/ej2-vue-notifications";

Vue.use(MessagePlugin);
export default {
  data () {
return {
  content: "Please read the comments carefully"
}
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";
</style>

Adding CSS Reference

Add the Message component’s styles as follows in the <style> section of the App.vue file.

Copied to clipboard
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>

Running the Application

Now, run the npm run dev command in the console, it will build the application and open in the browser.

Source
Preview
app.vue
Copied to clipboard
<template>
  <ejs-message id="msg" :content="content"></ejs-message>
</template>
<style>
  .e-message {
margin: 100px;
  }
</style>
<script>
import Vue from "vue";
import { MessagePlugin } from "@syncfusion/ej2-vue-notifications";

Vue.use(MessagePlugin);
export default {
  name: "app",
  data() {
return {
  content: "Please read the comments carefully"
};
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";
</style>