merge /examples/with-vue-plugin/ into /examples/basic/

vikejs · Apr 8, 2024 · 9a66cd6 · 9a66cd6
1 parent b3da5f9
commit 9a66cd6
Show file tree

Hide file tree

Showing 21 changed files with 30 additions and 329 deletions.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -2,8 +2,8 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "vite preview",
-    "test": "vue-tsc --noEmit"
+    "preview": "vite build && vite preview",
+    "test:sfc-types": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -16,6 +16,7 @@
     "vike-vue": "0.6.3",
     "vite": "^5.1.1",
     "vue": "^3.4.18",
+    "vue-toast-notification": "^3.1.2",
     "vue-tsc": "^1.8.27"
   },
   "type": "module"

diff --git a/...les/with-vue-plugin/pages/+onCreateApp.ts → examples/basic/pages/+onCreateApp.ts b/...les/with-vue-plugin/pages/+onCreateApp.ts → examples/basic/pages/+onCreateApp.ts
diff --git a/examples/basic/pages/index/+Page.vue b/examples/basic/pages/index/+Page.vue
@@ -12,3 +12,26 @@ import Counter from '../../components/Counter.vue'
 const components = { Counter }
 export default { components }
 </script>
+
+<script lang="ts" setup>
+import * as toastPlugin from 'vue-toast-notification'
+import { onBeforeUnmount, onMounted } from 'vue'
+
+onMounted(() => {
+  const useToast = toastPlugin.useToast()
+  useToast.success('I am a Vue plugin!', {
+    position: 'bottom',
+    duration: 0, // infinite
+  })
+})
+
+onBeforeUnmount(() => {
+  const useToast = toastPlugin.useToast()
+  useToast.clear()
+})
+</script>
+
+<style>
+/* see https://stackoverflow.com/questions/55206901/how-to-import-css-files-in-vue-3-child-components */
+@import 'vue-toast-notification/dist/theme-sugar.css';
+</style>
diff --git a/examples/basic/readme.md b/examples/basic/readme.md
@@ -7,6 +7,7 @@ Basic example of using `vike-vue`, showcasing:
 - [markdown pages](https://vike.dev/markdown)
 - [configs](https://vike.dev/config)
 - [error pages](https://vike.dev/error-page)
+- Installing additional [Vue plugin](https://vuejs.org/guide/reusability/plugins.html)
 
 ```bash
 git clone [email protected]:vikejs/vike-vue

diff --git a/examples/with-vue-plugin/.gitignore b/examples/with-vue-plugin/.gitignore
diff --git a/examples/with-vue-plugin/assets/logo.svg b/examples/with-vue-plugin/assets/logo.svg
diff --git a/examples/with-vue-plugin/components/Counter.vue b/examples/with-vue-plugin/components/Counter.vue
diff --git a/examples/with-vue-plugin/components/Link.vue b/examples/with-vue-plugin/components/Link.vue
diff --git a/examples/with-vue-plugin/layouts/HeadDefault.vue b/examples/with-vue-plugin/layouts/HeadDefault.vue
diff --git a/examples/with-vue-plugin/layouts/LayoutDefault.vue b/examples/with-vue-plugin/layouts/LayoutDefault.vue
diff --git a/examples/with-vue-plugin/package.json b/examples/with-vue-plugin/package.json
diff --git a/examples/with-vue-plugin/pages/+config.ts b/examples/with-vue-plugin/pages/+config.ts
diff --git a/examples/with-vue-plugin/pages/_error/+Page.vue b/examples/with-vue-plugin/pages/_error/+Page.vue
diff --git a/examples/with-vue-plugin/pages/about/+Page.vue b/examples/with-vue-plugin/pages/about/+Page.vue
diff --git a/examples/with-vue-plugin/pages/about/+config.ts b/examples/with-vue-plugin/pages/about/+config.ts
diff --git a/examples/with-vue-plugin/pages/index/+Page.vue b/examples/with-vue-plugin/pages/index/+Page.vue
diff --git a/examples/with-vue-plugin/readme.md b/examples/with-vue-plugin/readme.md
diff --git a/examples/with-vue-plugin/tsconfig.json b/examples/with-vue-plugin/tsconfig.json
diff --git a/examples/with-vue-plugin/vite.config.ts b/examples/with-vue-plugin/vite.config.ts
diff --git a/examples/with-vue-plugin/vue-shim.d.ts b/examples/with-vue-plugin/vue-shim.d.ts