crip-vue-notice
A Vue.js project to add global notices on a page. Take a look to demo page
Usage
Install
> npm i -S crip-vue-noticePrerequisites
- Font Awesome: Add font awesome css to make ikons in notices visible:
<head> ... <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head>Setup
import Vue from 'vue' import CripNotice from 'crip-vue-notice' // Install component in to Vue instance. Vue.use(CripNotice)Display notification
// App.vue <template> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2"> <button class="btn btn-default" @click="notice('open')">Normal</button> <button class="btn btn-default" @click="notice('error')">Error</button> <button class="btn btn-default" @click="notice('info')">Info</button> <button class="btn btn-default" @click="notice('success')">Success</button> <button class="btn btn-default" @click="notice('warning')">Warning</button> </div> </div> </div> </template> <script> export default { methods: { notice (type) { this.$notice[type]({ title: `Notice of ${type} type`, description: `Notice of ${type} type was clicked and it popped up!` }) }, }, } </script>Build Setup
# install dependencies and serve with hot reload at localhost:8080 > npm i && npm run devRelease steps
> npm run release
