Load Vuex, and use Alert component

cylc · Oct 4, 2021 · 34b414b · 34b414b
1 parent bf9009f
commit 34b414b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
@@ -3,17 +3,22 @@ if (typeof window !== 'undefined') {
   window.global = window
 }
 
+import Alert from '@/components/core/Alert.vue'
 import Job from '@/components/cylc/Job.vue'
 // import Menu from '@/components/cylc/cylcObject/Menu'
 // Otherwise we get 'Uncaught ReferenceError: global is not defined' from 'at Object../node_modules/markdown-it-toc-and-anchor/dist/index.js'
 const Menu = require('@/components/cylc/cylcObject/Menu.vue').default
 import Task from '@/components/cylc/Task.vue'
 import '@/styles/index.scss'
 import Vuetify from 'vuetify'
+import store from '@/store/index'
 
 export default ({ Vue, options, router, siteData }) => {
   Vue.use(Vuetify);
   options.vuetify = new Vuetify({})
+  Vue.use(store);
+  Vue.mixin({ store: store })
+  Vue.component('alert', Alert)
   Vue.component('menu', Menu)
   Vue.component('job', Job)
   Vue.component('task', Task)

diff --git a/docs/components/alert.md b/docs/components/alert.md
@@ -5,11 +5,23 @@ A component used to display errors in the application.
 ## Example
 
 ::: demo
-<menu />
+<alert />
+
+<script>
+import Alert from '@/model/Alert.model';
+import '~vuetify/src/styles/styles.sass';
+
+export default {
+  created () {
+    const alert = new Alert('the text', 'mdi-file', 'error');
+    this.$store.commit('SET_ALERT', alert);
+  }
+}
+</script>
 :::
 
 ## Source Code
 
 <SourceCode>
-<<< src/components/cylc/cylcObject/Menu.vue
+<<< src/components/core/Alert.vue
 </SourceCode>