initial-commit

2026-03-17 23:07:22 -04:00
commit 6fa36b26ca
30 changed files with 3233 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,149 @@
+# MacOS
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# VSCode
+.vscode/
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Cloudflare
+.wrangler/
+.dev.vars*
+!.dev.vars.example
+!.env.example
+
+# Vercel
+.vercel/
+
+# Sentry Vite Plugin
+.env.sentry-build-plugin
+
+# aws-cdk
+.cdk.staging
+cdk.out
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,149 @@
+# MacOS
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# VSCode
+.vscode/
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Cloudflare
+.wrangler/
+.dev.vars*
+!.dev.vars.example
+!.env.example
+
+# Vercel
+.vercel/
+
+# Sentry Vite Plugin
+.env.sentry-build-plugin
+
+# aws-cdk
+.cdk.staging
+cdk.out
--- a/README.md
+++ b/README.md
@@ -0,0 +1,45 @@
+Generated with [vike.dev/new](https://vike.dev/new) ([version 599](https://www.npmjs.com/package/create-vike/v/0.0.599)) using this command:
+
+```sh
+npm create vike@latest --- --vue --prettier
+```
+
+## Contents
+
+-   [Vike](#vike)
+    -   [Plus files](#plus-files)
+    -   [Routing](#routing)
+    -   [SSR](#ssr)
+    -   [HTML Streaming](#html-streaming)
+
+## Vike
+
+This app is ready to start. It's powered by [Vike](https://vike.dev) and [Vue](https://vuejs.org/guide/quick-start.html).
+
+### Plus files
+
+[The + files are the interface](https://vike.dev/config) between Vike and your code.
+
+-   [`+config.ts`](https://vike.dev/settings) — Settings (e.g. `<title>`)
+-   [`+Page.vue`](https://vike.dev/Page) — The `<Page>` component
+-   [`+data.ts`](https://vike.dev/data) — Fetching data (for your `<Page>` component)
+-   [`+Layout.vue`](https://vike.dev/Layout) — The `<Layout>` component (wraps your `<Page>` components)
+-   [`+Head.vue`](https://vike.dev/Head) - Sets `<head>` tags
+-   [`/pages/_error/+Page.vue`](https://vike.dev/error-page) — The error page (rendered when an error occurs)
+-   [`+onPageTransitionStart.ts`](https://vike.dev/onPageTransitionStart) and `+onPageTransitionEnd.ts` — For page transition animations
+
+### Routing
+
+[Vike's built-in router](https://vike.dev/routing) lets you choose between:
+
+-   [Filesystem Routing](https://vike.dev/filesystem-routing) (the URL of a page is determined based on where its `+Page.vue` file is located on the filesystem)
+-   [Route Strings](https://vike.dev/route-string)
+-   [Route Functions](https://vike.dev/route-function)
+
+### SSR
+
+SSR is enabled by default. You can [disable it](https://vike.dev/ssr) for all or specific pages.
+
+### HTML Streaming
+
+You can [enable/disable HTML streaming](https://vike.dev/stream) for all or specific pages.
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -0,0 +1,67 @@
+<svg class="hammer" width="41.217" height="41.217" version="1.1" viewBox="-50 -50 41.217 41.217" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <mask id="mask111">
+   <rect x="-19.21" y="-25.7" width="46.217" height="41.217" fill="url(#linearGradient115)"/>
+  </mask>
+  <linearGradient id="linearGradient115" x1="-25.395" x2="-25.395" y1="-9.3005" y2="-18.03" gradientTransform="matrix(1.0589 0 0 .94436 30.79 24.3)" gradientUnits="userSpaceOnUse">
+   <stop offset="0"/>
+   <stop stop-color="#fff" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g transform="translate(-33.29,-24.3)" mask="url(#mask111)">
+  <g stroke-linecap="round" stroke-linejoin="round">
+   <path d="m-8.511-10.449 1.126 4.064 2.707-2.765z" fill="#ababab"/>
+   <path d="m-2.273-24.496-6.238 14.047 3.833 1.299 6.238-14.048z" fill="#949494"/>
+   <path d="m-2.273-24.496 3.465-1.204.368 2.502z" fill="#ababab"/>
+   <path d="m17.511 4.674-2.707 2.766-22.189-13.825 2.707-2.765z" fill="#949494"/>
+  </g>
+  <g stroke="#878787">
+   <path d="m-9.045 20.369-1.169 2.634" stroke-width="9.6"/>
+   <path d="m-12.418 23.191c-1.85-1.153-2.326-2.132-1.086-2.238 1.239-.106 3.642.709 5.493 1.862s2.326 2.132 1.087 2.238c-1.24.106-3.643-.709-5.494-1.862" fill="#878787" stroke-linecap="round" stroke-linejoin="round"/>
+   <path d="m-11.248 20.557c1.851 1.153 4.254 1.968 5.493 1.862 1.24-.106.764-1.085-1.086-2.238-1.851-1.153-4.254-1.968-5.494-1.862-1.239.106-.764 1.085 1.087 2.238" fill="#878787" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <g stroke-linecap="round" stroke-linejoin="round">
+   <path d="m-16.71-9.748 8.199-.701 1.126 4.064-8.199.701z" fill="#949494"/>
+   <path d="m23.749-9.373-6.238 14.047-22.189-13.824 6.238-14.048z" fill="#757575"/>
+   <path d="m10.271-16.073 3.751 3.534c.062.058.083.156.052.238l-1.95 5.128c-.046.121-.18.153-.268.065l-1.024-1.03c-.095-.096-.242-.048-.275.091l-.516 2.152c-.034.145-.191.19-.284.082 0 0-.606-.696-.606-.696-.094-.108-.25-.063-.285.082l-.803 3.384c-.05.212-.317.178-.336-.043l-.014-.147s.058-9.892.058-9.892c.001-.165.165-.253.277-.148l1.077 1.009c.101.095.25.034.274-.111l.597-3.587c.025-.146.174-.206.275-.111z" fill="#fbbf28" stroke="#fbbf28" stroke-width=".6"/>
+  </g>
+  <g stroke="#808080">
+   <path d="m-8.362 18.833-.39.878" stroke-width="9.1"/>
+   <path d="m-10.956 19.899c-1.85-1.153-2.326-2.132-1.086-2.238 1.239-.106 3.642.708 5.493 1.861s2.326 2.132 1.087 2.238c-1.24.106-3.643-.708-5.494-1.861" fill="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
+   <path d="m-10.566 19.021c1.851 1.153 4.254 1.967 5.494 1.861 1.239-.106.764-1.085-1.087-2.238s-4.254-1.967-5.494-1.861c-1.239.106-.764 1.085 1.087 2.238" fill="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
+  </g>
+  <path d="m-16.71-9.748 8.199-.701 6.238-14.047-8.199.701z" fill="#757575" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m-1.754 3.951-6.511 14.662" stroke="#91512b" stroke-width="8.6"/>
+  <g stroke-linecap="round" stroke-linejoin="round">
+   <path d="m-10.468 18.801c-1.851-1.153-2.327-2.132-1.087-2.238 1.239-.106 3.643.709 5.493 1.862 1.851 1.153 2.327 2.132 1.087 2.238-1.239.106-3.643-.708-5.493-1.862" fill="#91512b"/>
+   <path d="m-3.958 4.139c1.851 1.153 4.254 1.968 5.494 1.862 1.239-.106.764-1.086-1.087-2.239s-4.254-1.967-5.493-1.861c-1.24.106-.764 1.085 1.086 2.238" fill="#91512b"/>
+   <path d="m1.192-25.7.368 2.502 22.189 13.825-.368-2.503z" fill="#949494"/>
+   <path d="m-10.472-23.795 8.199-.701 3.465-1.204-8.199.701z" fill="#949494"/>
+  </g>
+  <g stroke="#6e6e6e">
+   <path d="m-.487 1.097-1.17 2.634" stroke-width="9.1"/>
+   <path d="m-3.86 3.92c-1.851-1.153-2.326-2.132-1.087-2.238s3.643.708 5.493 1.861c1.851 1.153 2.327 2.132 1.087 2.238-1.239.106-3.643-.708-5.493-1.861" fill="#6e6e6e" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
+   <path d="m-2.691 1.286c1.851 1.153 4.254 1.967 5.494 1.861 1.239-.106.764-1.085-1.087-2.238s-4.254-1.967-5.493-1.861c-1.24.106-.764 1.085 1.086 2.238" fill="#6e6e6e" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
+  </g>
+  <g stroke-linecap="round" stroke-linejoin="round">
+   <path d="m18.269 6.236-3.465 1.204 2.707-2.766z" fill="#ababab"/>
+   <path d="m14.804 7.44-8.199.701-22.189-13.825 8.199-.701z" fill="#757575"/>
+   <path d="m-16.71-9.748 1.126 4.064-.367-2.502z" fill="#ababab"/>
+   <path d="m24.507-7.812-6.238 14.048-.758-1.562 6.238-14.047z" fill="#949494"/>
+   <path d="m-10.472-23.795-6.238 14.047.759 1.562 6.237-14.048z" fill="#949494"/>
+   <path d="m24.507-7.812-1.126-4.064.368 2.503z" fill="#ababab"/>
+   <path d="m23.381-11.876-8.199.701-22.189-13.824 8.199-.701z" fill="#757575"/>
+   <path d="m-10.472-23.795 3.465-1.204-2.707 2.765z" fill="#ababab"/>
+   <path d="m18.269 6.236-8.199.701-3.465 1.204 8.199-.701z" fill="#949494"/>
+   <path d="m-15.951-8.186.367 2.502 22.189 13.825-.367-2.503z" fill="#949494"/>
+   <path d="m18.269 6.236-8.199.701 6.238-14.048 8.199-.701z" fill="#757575"/>
+   <path d="m-9.714-22.234-6.237 14.048 22.189 13.824 6.237-14.047z" fill="#757575"/>
+   <path d="m2.545-12.79-4.583-1.659c-.076-.027-.156.008-.195.085 0 0-2.463 4.808-2.463 4.808-.058.114-.005.263.107.298l1.296.416c.122.039.171.21.093.321 0 0-1.205 1.722-1.205 1.722-.081.116-.024.294.105.325l.827.196c.128.031.186.209.104.325 0 0-1.899 2.701-1.899 2.701-.118.169.056.41.22.304l.11-.07 6.849-5.661c.115-.095.083-.304-.054-.354l-1.312-.48c-.123-.045-.165-.224-.078-.331 0 0 2.157-2.615 2.157-2.615.087-.106.045-.286-.079-.331z" fill="#fbbf28" stroke="#fbbf28" stroke-width=".6"/>
+   <path d="m24.507-7.812-8.199.701-1.126-4.064 8.199-.701z" fill="#949494"/>
+   <path d="m15.182-11.175-2.707 2.766-22.189-13.825 2.707-2.765z" fill="#949494"/>
+   <path d="m10.07 6.937-3.465 1.204-.367-2.503z" fill="#ababab"/>
+   <path d="m16.308-7.111-6.238 14.048-3.832-1.299 6.237-14.047z" fill="#949494"/>
+   <path d="m16.308-7.111-1.126-4.064-2.707 2.766z" fill="#ababab"/>
+  </g>
+ </g>
+</svg>
--- a/components/Content.vue
+++ b/components/Content.vue
@@ -0,0 +1,25 @@
+<template>
+    <div id="page-container">
+        <div
+            id="page-content"
+            style="padding: 20px; padding-bottom: 50px; min-height: 100vh"
+        >
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style>
+/* Page Transition Animation */
+body.page-transition #page-content {
+    opacity: 0;
+}
+</style>
+
+<style scoped>
+/* Page Transition Animation */
+#page-content {
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+</style>
--- a/components/Counter.vue
+++ b/components/Counter.vue
@@ -0,0 +1,11 @@
+<template>
+    <button type="button" @click="state.count++">
+        Counter {{ state.count }}
+    </button>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const state = reactive({ count: 0 })
+</script>
--- a/components/Link.vue
+++ b/components/Link.vue
@@ -0,0 +1,27 @@
+<template>
+    <a :class="{ active: isActive }">
+        <slot />
+    </a>
+</template>
+
+<script lang="ts" setup>
+import { usePageContext } from 'vike-vue/usePageContext'
+import { computed, useAttrs } from 'vue'
+
+const pageContext = usePageContext()
+const { href } = useAttrs()
+const isActive = computed(() => {
+    const { urlPathname } = pageContext
+    return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
+})
+</script>
+
+<style scoped>
+a {
+    padding: 2px 10px;
+    margin-left: -10px;
+}
+a.active {
+    background-color: #eee;
+}
+</style>
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -0,0 +1,7 @@
+<template>
+    <div style="margin-top: 20px; margin-bottom: 10px">
+        <a href="/">
+            <img src="../assets/logo.svg" height="64" width="64" />
+        </a>
+    </div>
+</template>
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -0,0 +1,15 @@
+<template>
+    <div
+        id="sidebar"
+        style="
+            padding: 20px;
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+            line-height: 1.8em;
+            border-right: 2px solid #eee;
+        "
+    >
+        <slot />
+    </div>
+</template>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+    "scripts": {
+        "dev": "vike dev",
+        "build": "vike build",
+        "preview": "vike build && vike preview"
+    },
+    "dependencies": {
+        "vike": "^0.4.255",
+        "vike-vue": "^0.9.11",
+        "vue": "^3.5.30"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.5",
+        "prettier": "^3.8.1",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.1"
+    },
+    "type": "module"
+}
--- a/pages/+Head.vue
+++ b/pages/+Head.vue
@@ -0,0 +1,9 @@
+<!-- https://vike.dev/Head -->
+
+<template>
+    <link rel="icon" :href="logoUrl" />
+</template>
+
+<script setup lang="ts">
+import logoUrl from '../assets/logo.svg'
+</script>
--- a/pages/+Layout.vue
+++ b/pages/+Layout.vue
@@ -0,0 +1,55 @@
+<!-- https://vike.dev/Layout -->
+
+<template>
+    <div class="layout">
+        <Sidebar>
+            <Logo />
+            <Link href="/"> Welcome </Link>
+            <Link href="/todo"> Todo </Link>
+            <Link href="/star-wars"> Data Fetching </Link>
+        </Sidebar>
+        <Content><slot /></Content>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import Content from '../components/Content.vue'
+import Link from '../components/Link.vue'
+import Logo from '../components/Logo.vue'
+import Sidebar from '../components/Sidebar.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;
+}
+/* Page Transition Animation */
+#page-content {
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+body.page-transition #page-content {
+    opacity: 0;
+}
+</style>
--- a/pages/+config.ts
+++ b/pages/+config.ts
@@ -0,0 +1,13 @@
+import type { Config } from 'vike/types'
+import vikeVue from 'vike-vue/config'
+
+// Default config (can be overridden by pages)
+// https://vike.dev/config
+
+export default {
+    // https://vike.dev/head-tags
+    title: 'My Vike App',
+    description: 'Demo showcasing Vike',
+
+    extends: [vikeVue],
+} as Config
--- a/pages/+onPageTransitionEnd.ts
+++ b/pages/+onPageTransitionEnd.ts
@@ -0,0 +1,4 @@
+export async function onPageTransitionEnd() {
+    console.log('Page transition end')
+    document.body.classList.remove('page-transition')
+}
--- a/pages/+onPageTransitionStart.ts
+++ b/pages/+onPageTransitionStart.ts
@@ -0,0 +1,14 @@
+// https://vike.dev/onPageTransitionStart
+
+import type { PageContextClient } from 'vike/types'
+
+export async function onPageTransitionStart(
+    pageContext: Partial<PageContextClient>,
+) {
+    console.log('Page transition start')
+    console.log(
+        'pageContext.isBackwardNavigation',
+        pageContext.isBackwardNavigation,
+    )
+    document.body.classList.add('page-transition')
+}
--- a/pages/_error/+Page.vue
+++ b/pages/_error/+Page.vue
@@ -0,0 +1,17 @@
+<template>
+    <h1>{{ heading }}</h1>
+    <p>{{ abortReason }}</p>
+</template>
+
+<script lang="ts" setup>
+import { usePageContext } from 'vike-vue/usePageContext'
+
+const pageContext = usePageContext()
+let { is404, abortReason } = pageContext
+if (!abortReason) {
+    abortReason = is404
+        ? 'This page could not be found.'
+        : 'Something went wrong.'
+}
+const heading = is404 ? 'Page Not Found' : 'Internal Error'
+</script>
--- a/pages/index/+Page.vue
+++ b/pages/index/+Page.vue
@@ -0,0 +1,12 @@
+<template>
+    <h1>My Vike app</h1>
+    <p>This page is:</p>
+    <ul>
+        <li>Rendered to HTML.</li>
+        <li>Interactive. <Counter /></li>
+    </ul>
+</template>
+
+<script setup lang="ts">
+import Counter from '../../components/Counter.vue'
+</script>
--- a/pages/star-wars/@id/+Page.vue
+++ b/pages/star-wars/@id/+Page.vue
@@ -0,0 +1,15 @@
+<template>
+    <h1>{{ movie.title }}</h1>
+    Release Date: {{ movie.release_date }}
+    <br />
+    Director: {{ movie.director }}
+    <br />
+    Producer: {{ movie.producer }}
+</template>
+
+<script lang="ts" setup>
+import { useData } from 'vike-vue/useData'
+import type { Data } from './+data.js'
+
+const { movie } = useData<Data>()
+</script>
--- a/pages/star-wars/@id/+data.ts
+++ b/pages/star-wars/@id/+data.ts
@@ -0,0 +1,33 @@
+// https://vike.dev/data
+
+import type { PageContextServer } from 'vike/types'
+import { useConfig } from 'vike-vue/useConfig'
+import type { MovieDetails } from '../types.js'
+
+export type Data = Awaited<ReturnType<typeof data>>
+
+export async function data(pageContext: PageContextServer) {
+    // https://vike.dev/useConfig
+    const config = useConfig()
+
+    const response = await fetch(
+        `https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`,
+    )
+    let movie = (await response.json()) as MovieDetails
+
+    config({
+        // Set <title>
+        title: movie.title,
+    })
+
+    // We remove data we don't need because the data is passed to
+    // the client; we should minimize what is sent over the network.
+    movie = minimize(movie)
+
+    return { movie }
+}
+
+function minimize(movie: MovieDetails): MovieDetails {
+    const { id, title, release_date, director, producer } = movie
+    return { id, title, release_date, director, producer }
+}
--- a/pages/star-wars/index/+Page.vue
+++ b/pages/star-wars/index/+Page.vue
@@ -0,0 +1,23 @@
+<template>
+    <h1>Star Wars Movies</h1>
+    <ol>
+        <li v-for="item in movies" :key="item.id">
+            <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{
+                item.release_date
+            }})
+        </li>
+    </ol>
+    <p>
+        Source:
+        <a href="https://brillout.github.io/star-wars"
+            >brillout.github.io/star-wars</a
+        >.
+    </p>
+</template>
+
+<script lang="ts" setup>
+import { useData } from 'vike-vue/useData'
+import type { Data } from './+data.js'
+
+const { movies } = useData<Data>()
+</script>
--- a/pages/star-wars/index/+data.ts
+++ b/pages/star-wars/index/+data.ts
@@ -0,0 +1,34 @@
+// https://vike.dev/data
+
+import { useConfig } from 'vike-vue/useConfig'
+import type { Movie, MovieDetails } from '../types.js'
+
+export type Data = Awaited<ReturnType<typeof data>>
+
+export async function data() {
+    // https://vike.dev/useConfig
+    const config = useConfig()
+
+    const response = await fetch(
+        'https://brillout.github.io/star-wars/api/films.json',
+    )
+    const moviesData = (await response.json()) as MovieDetails[]
+
+    config({
+        // Set <title>
+        title: `${moviesData.length} Star Wars Movies`,
+    })
+
+    // We remove data we don't need because the data is passed to the client; we should
+    // minimize what is sent over the network.
+    const movies = minimize(moviesData)
+
+    return { movies }
+}
+
+function minimize(movies: MovieDetails[]): Movie[] {
+    return movies.map((movie) => {
+        const { title, release_date, id } = movie
+        return { title, release_date, id }
+    })
+}
--- a/pages/star-wars/types.ts
+++ b/pages/star-wars/types.ts
@@ -0,0 +1,10 @@
+export type Movie = {
+    id: string
+    title: string
+    release_date: string
+}
+
+export type MovieDetails = Movie & {
+    director: string
+    producer: string
+}
--- a/pages/todo/+Page.vue
+++ b/pages/todo/+Page.vue
@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <h1>To-do List</h1>
+        <TodoList />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import TodoList from './TodoList.vue'
+</script>
--- a/pages/todo/+data.ts
+++ b/pages/todo/+data.ts
@@ -0,0 +1,15 @@
+// https://vike.dev/data
+
+import type { PageContextServer } from 'vike/types'
+
+export type Data = Awaited<ReturnType<typeof data>>
+
+export async function data(_pageContext: PageContextServer) {
+    // NOTE: This +data hook is only for demonstration — it doesn't actually retrieve data from a database.
+    // Go to https://vike.dev/new and select a database to scaffold an app with a persisted to-do list.
+    const todoItemsInitial = [
+        { text: 'Buy milk' },
+        { text: 'Buy strawberries' },
+    ]
+    return { todoItemsInitial }
+}
--- a/pages/todo/TodoList.vue
+++ b/pages/todo/TodoList.vue
@@ -0,0 +1,30 @@
+<template>
+    <ul>
+        <li v-for="(item, index) in todoItems" :key="index">
+            {{ item.text }}
+        </li>
+        <li>
+            <form @submit.prevent="submitNewTodo()">
+                <input v-model="newTodo" type="text" />
+
+                <button type="submit">Add to-do</button>
+            </form>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts" setup>
+import type { Data } from './+data'
+import { useData } from 'vike-vue/useData'
+import { ref } from 'vue'
+
+const { todoItemsInitial } = useData<Data>()
+const todoItems = ref<{ text: string }[]>(todoItemsInitial)
+const newTodo = ref('')
+
+const submitNewTodo = async () => {
+    const text = newTodo.value
+    todoItems.value.push({ text })
+    newTodo.value = ''
+}
+</script>
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -0,0 +1,11 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true,
+}
+
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "Bundler",
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "types": ["vite/client"],
+        "noEmit": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true
+    },
+    "exclude": ["dist"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import vue from '@vitejs/plugin-vue'
+import vike from 'vike/plugin'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    plugins: [vike(), vue()],
+})