add minimal example

examples/minimal/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/minimal/components/Counter.vue

@@ -0,0 +1,15 @@
+<template>
+  <button type="button" @click="state.count++">Counter {{ state.count }}</button>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue'
+export default {
+  setup(props) {
+    const state = reactive({ count: 0 })
+    return {
+      state
+    }
+  }
+}
+</script>

examples/minimal/package.json

@@ -0,0 +1,15 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite build && vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vike": "^0.4.165",
+    "vike-vue": "0.6.3",
+    "vite": "^5.1.1",
+    "vue": "^3.4.18"
+  },
+  "type": "module"
+}

examples/minimal/pages/+Layout.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="layout">
+    <div class="navigation">
+      <a class="navitem" href="/">Home</a>
+      <a class="navitem" href="/about">About</a>
+    </div>
+    <div class="content"><slot /></div>
+  </div>
+</template>
+
+<style>
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+</style>
+
+<style scoped>
+.layout {
+  display: flex;
+  max-width: 900px;
+  margin: auto;
+}
+.content {
+  padding: 20px;
+  border-left: 2px solid #eee;
+  padding-bottom: 50px;
+  min-height: 100vh;
+}
+.navigation {
+  padding: 20px;
+  padding-top: 42px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.8em;
+}
+.navitem {
+  padding: 3px;
+}
+</style>

examples/minimal/pages/+config.js

@@ -0,0 +1,6 @@
+import vikeVue from 'vike-vue/config'
+
+// Default configs (can be overridden by pages)
+export default {
+  extends: vikeVue
+}

examples/minimal/pages/about/+Page.vue

@@ -0,0 +1,4 @@
+<template>
+  <h1>About</h1>
+  <p>Example of using Vike.</p>
+</template>

examples/minimal/pages/index/+Page.vue

@@ -0,0 +1,14 @@
+<template>
+  <h1>My Vike + Vue app</h1>
+  This page is:
+  <ul>
+    <li>Rendered to HTML.</li>
+    <li>Interactive. <Counter /></li>
+  </ul>
+</template>
+
+<script lang="ts">
+import Counter from '../../components/Counter.vue'
+const components = { Counter }
+export default { components }
+</script>

examples/minimal/readme.md

@@ -0,0 +1,8 @@
+Minimal example of using `vike-vue`.
+
+```bash
+git clone [email protected]:vikejs/vike-vue
+cd vike-vue/examples/minimal/
+npm install
+npm run dev
+```

examples/minimal/vite.config.js

@@ -0,0 +1,6 @@
+import vue from '@vitejs/plugin-vue'
+import vike from 'vike/plugin'
+
+export default {
+  plugins: [vue(), vike()]
+}