Chris/vike pinia

.github/workflows/build.yml

@@ -16,13 +16,14 @@ jobs:
  - examples/onBeforeRender
  - examples/ssr-spa
  - examples/with-vue-plugin
+ - examples/with-vike-pinia
 
  steps:
  - uses: actions/checkout@v4
  - uses: pnpm/action-setup@v2
  - run: pnpm install
 
- - name: Build vike-vue
+ - name: Build packages
  run: pnpm run build
 
  - name: Test building example

examples/with-vike-pinia/.gitignore

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

examples/with-vike-pinia/components/Counter.vue

@@ -0,0 +1,9 @@
+<template>
+ <button type="button" @click="counterStore.increment">Counter {{ counterStore.count }}</button>
+</template>
+
+<script lang="ts" setup>
+import { useCounterStore } from '../stores/useCounterStore';
+
+const counterStore = useCounterStore();
+</script>

examples/with-vike-pinia/components/Link.vue

@@ -0,0 +1,25 @@
+<template>
+ <a :class="{ active: isActive }">
+ <slot />
+ </a>
+</template>
+<style scoped>
+a {
+ padding: 2px 10px;
+ margin-left: -10px;
+}
+a.active {
+ background-color: #eee;
+}
+</style>
+<script lang="ts" setup>
+import { useAttrs, computed } from 'vue'
+import { usePageContext } from 'vike-vue/usePageContext'
+
+const pageContext = usePageContext()
+const { href } = useAttrs() as { href: string }
+const isActive = computed(() => {
+ const { urlPathname } = pageContext
+ return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
+})
+</script>

examples/with-vike-pinia/layouts/HeadDefault.vue

@@ -0,0 +1,3 @@
+<template>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+</template>

examples/with-vike-pinia/layouts/LayoutDefault.vue

@@ -0,0 +1,61 @@
+<template>
+ <div class="layout">
+ <div class="navigation">
+ <a href="/" class="logo">
+ <img src="../assets/logo.svg" height="64" width="64" />
+ </a>
+ <Link href="/">Welcome</Link>
+ <Link href="/about">About</Link>
+ </div>
+ <div class="content"><slot /></div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import Link from '../components/Link.vue'
+</script>
+
+<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;
+ padding-bottom: 50px;
+ min-height: 100vh;
+ flex-grow: 1;
+}
+.navigation {
+ padding: 20px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ line-height: 1.8em;
+ border-right: 2px solid #eee;
+}
+.logo {
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+.content {
+ transition: opacity 0.1s ease-in;
+}
+.content.page-transition {
+ opacity: 0;
+}
+</style>

examples/with-vike-pinia/package.json

@@ -0,0 +1,19 @@
+{
+ "scripts": {
+ "dev": "vite dev",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@vitejs/plugin-vue": "^5.0.2",
+ "pinia": "^2.1.7",
+ "typescript": "^5.3.3",
+ "vike": "0.4.156",
+ "vike-pinia": "0.0.1",
+ "vike-vue": "0.5.3",
+ "vite": "^5.0.11",
+ "vue": "^3.4.7"
+ },
+ "type": "module"
+}

examples/with-vike-pinia/pages/+config.h.ts

@@ -0,0 +1,19 @@
+import type { Config } from 'vike/types'
+import logoUrl from '../assets/logo.svg'
+import Layout from '../layouts/LayoutDefault.vue'
+import Head from '../layouts/HeadDefault.vue'
+import vikeVue from 'vike-vue'
+import vikePinia from 'vike-pinia'
+
+// Default configs (can be overridden by pages)
+export default {
+ Layout,
+ Head,
+ // <title>
+ title: 'My Vike + Vue + Pinia App',
+ // <meta name="description">
+ description: 'Demo showcasing Vike + Vue + Pinia',
+ // <link rel="icon" href="${favicon}" />
+ favicon: logoUrl,
+ extends: [vikeVue, vikePinia]
+} satisfies Config

examples/with-vike-pinia/pages/_error/+Page.vue

@@ -0,0 +1,25 @@
+<template>
+ <div class="center">
+ <p>{{ abortReason }}</p>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { usePageContext } from 'vike-vue/usePageContext'
+
+const ctx = usePageContext()
+let { is404, abortReason } = ctx
+if (!abortReason) {
+ abortReason = is404 ? 'Page not found.' : 'Something went wrong.'
+}
+</script>
+
+<style>
+.center {
+ height: calc(100vh - 100px);
+ display: flex;
+ font-size: 1.3em;
+ justify-content: center;
+ align-items: center;
+}
+</style>

examples/with-vike-pinia/pages/about/+Page.vue

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

examples/with-vike-pinia/pages/about/+config.h.ts

@@ -0,0 +1,5 @@
+import type { Config } from 'vike/types'
+
+export default {
+ title: 'About - My Vike + Vue App'
+} satisfies Config

examples/with-vike-pinia/pages/index/+Page.vue

@@ -0,0 +1,24 @@
+<template>
+ <h1>My Vike + Vue app</h1>
+ This page is:
+ <ul>
+ <li>Rendered to HTML.</li>
+ <li>Interactive.</li>
+ </ul>
+ <h2>Counters synced via shared store</h2>
+ <Counter />
+ <hr>
+ <Counter />
+</template>
+
+<script lang="ts" setup>
+import { onServerPrefetch } from 'vue';
+import Counter from '../../components/Counter.vue'
+import { useCounterStore } from '../../stores/useCounterStore'
+
+const { increment } = useCounterStore()
+onServerPrefetch(() => {
+ // Show that hydration works - the counter should start at 1
+ increment()
+})
+</script>

examples/with-vike-pinia/readme.md

@@ -0,0 +1,8 @@
+Example of using [Pinia](https://pinia.vuejs.org/) with the `vike-pinia` extension.
+
+```bash
+git clone [email protected]:vikejs/vike-vue
+cd vike-vue/examples/with-vue-plugin/
+npm install
+npm run dev
+```

examples/with-vike-pinia/stores/useCounterStore.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useCounterStore = defineStore("counter", () => {
+ const count = ref(0)
+
+ const increment = () => count.value++
+
+ return { count, increment }
+})

examples/with-vike-pinia/tsconfig.json

@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "module": "ES2020",
+ "moduleResolution": "Node",
+ "target": "ES2020",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+ "esModuleInterop": true
+ }
+}

examples/with-vike-pinia/vite.config.ts

@@ -0,0 +1,14 @@
+import vue from '@vitejs/plugin-vue'
+import vike from 'vike/plugin'
+import { UserConfig } from 'vite'
+
+const config: UserConfig = {
+ plugins: [
+ vike({ prerender: true }),
+ vue({
+ include: [/\.vue$/, /\.md$/]
+ })
+ ]
+}
+
+export default config

examples/with-vike-pinia/vue-shim.d.ts

@@ -0,0 +1,11 @@
+// Without this file, `tsc` will fail with such errors:
+// pages/+config.h.ts:3:20 - error TS2307: Cannot find module '../layouts/LayoutDefault.vue' or its corresponding type declarations.
+// import Layout from "../layouts/LayoutDefault.vue"
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+//
+// See https://stackoverflow.com/questions/71477277/typescript-cannot-find-module-in-vue-project
+
+declare module "*.vue" {
+ import Vue from "vue";
+ export default Vue;
+}

package.json

@@ -1,7 +1,7 @@
 {
  "scripts": {
  "dev": "cd vike-vue/ && pnpm run dev",
- "build": "cd vike-vue/ && pnpm run build",
+ "build": "cd vike-vue/ && pnpm run build && cd ../packages/vike-pinia/ && pnpm run build",
  "release": "cd vike-vue/ && pnpm run release",
  "========= Clean": "",
  "clean": "git clean -Xdf",
@@ -11,7 +11,8 @@
  },
  "pnpm": {
  "overrides": {
- "vike-vue": "link:./vike-vue/"
+ "vike-vue": "link:./vike-vue/",
+ "vike-pinia": "link:./packages/vike-pinia/"
  }
  },
  "packageManager": "[email protected]"

packages/vike-pinia/.gitignore

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

packages/vike-pinia/package.json

@@ -0,0 +1,54 @@
+{
+ "name": "vike-pinia",
+ "version": "0.0.1",
+ "description": "",
+ "main": "./dist/+config.js",
+ "types": "./dist/+config.d.ts",
+ "type": "module",
+ "scripts": {
+ "dev": "tsc --watch",
+ "build": "rm -rf dist && tsc",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "exports": {
+ ".": "./dist/+config.js",
+ "./renderer/installPinia": "./dist/installPinia.js",
+ "./renderer/dehydratePinia": "./dist/dehydratePinia.js",
+ "./renderer/hydratePinia": "./dist/hydratePinia.js"
+ },
+ "typesVersions": {
+ "*": {
+ ".": [
+ "./dist/+config.d.ts"
+ ],
+ "renderer/installPinia": [
+ "./dist/installPinia.d.ts"
+ ],
+ "renderer/dehydratePinia": [
+ "./dist/dehydratePinia.d.ts"
+ ],
+ "renderer/hydratePinia": [
+ "./dist/hydratePinia.d.ts"
+ ]
+ }
+ },
+ "peerDependencies": {
+ "vike": "^0.4.152",
+ "pinia": "^2.0.0",
+ "vike-vue": "^0.5.3",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@brillout/release-me": "^0.1.14",
+ "@types/node": "^20.10.7",
+ "pinia": "^2.1.7",
+ "typescript": "^5.3.3",
+ "vike": "0.4.156",
+ "vike-vue": "0.5.3",
+ "vue": "^3.4.7"
+ },
+ "files": [
+ "dist"
+ ],
+ "license": "MIT"
+}