Getting Started
16 Mar 20233 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.
|-- @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.
npm install -g @vue/cli
Start a new project using the following Vue CLI command.
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.
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.
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.
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.
<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.
<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.
<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>