diff --git a/examples/vue-pinia/layouts/LayoutDefault.vue b/examples/vue-pinia/layouts/LayoutDefault.vue
index 0e88a0c4..17e26bbc 100644
--- a/examples/vue-pinia/layouts/LayoutDefault.vue
+++ b/examples/vue-pinia/layouts/LayoutDefault.vue
@@ -45,10 +45,6 @@ a {
line-height: 1.8em;
border-right: 2px solid #eee;
}
-.logo {
- margin-top: 20px;
- margin-bottom: 10px;
-}
.content {
transition: opacity 0.1s ease-in;
}
diff --git a/examples/vue-query/.test.ts b/examples/vue-query/.test.ts
index f4094c1b..ff9b5594 100644
--- a/examples/vue-query/.test.ts
+++ b/examples/vue-query/.test.ts
@@ -1,33 +1,44 @@
-import { test, expect, run, fetchHtml, page, getServerUrl } from '@brillout/test-e2e'
+import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry } from '@brillout/test-e2e'
runTest()
+const fetchedText = 'A New Hope'
+const url = '/'
+
function runTest() {
run('pnpm run dev')
- const textLandingPage = 'A New Hope'
- const title = 'Star Wars Movies'
- testUrl({
- url: '/',
- title,
- text: textLandingPage,
- })
-}
-
-function testUrl({ url, title, text }: { url: string; title: string; text: string }) {
- test(url + ' (HTML)', async () => {
+ test('HTML', async () => {
const html = await fetchHtml(url)
- expect(html).toContain(text)
- expect(getTitle(html)).toBe(title)
+ expect(html).toContain(fetchedText)
})
- test(url + ' (Hydration)', async () => {
+
+ test('Hydration', async () => {
await page.goto(getServerUrl() + url)
- const body = await page.textContent('body')
- expect(body).toContain(text)
+ await testDOM()
})
+
+ test('Navigation', async () => {
+ await page.click('a[href="/about"]')
+ await page.click('a[href="/"]')
+ await testDOM()
+ })
+}
+
+async function testDOM() {
+ await testCounter()
+ const body = await page.textContent('body')
+ expect(body).toContain(fetchedText)
}
-function getTitle(html: string) {
- const title = html.match(/
(.*?)<\/title>/i)?.[1]
- return title
+async function testCounter() {
+ // autoRetry() for awaiting client-side code loading & executing
+ await autoRetry(
+ async () => {
+ expect(await page.textContent('button')).toBe('Counter 0')
+ await page.click('button')
+ expect(await page.textContent('button')).toContain('Counter 1')
+ },
+ { timeout: 5 * 1000 },
+ )
}
diff --git a/examples/vue-query/assets/logo.svg b/examples/vue-query/assets/logo.svg
deleted file mode 100644
index 94d3caa0..00000000
--- a/examples/vue-query/assets/logo.svg
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
diff --git a/examples/vue-query/layouts/HeadDefault.vue b/examples/vue-query/layouts/HeadDefault.vue
deleted file mode 100644
index c06f9223..00000000
--- a/examples/vue-query/layouts/HeadDefault.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
-
-
diff --git a/examples/vue-query/layouts/LayoutDefault.vue b/examples/vue-query/layouts/LayoutDefault.vue
index 60c78c44..17e26bbc 100644
--- a/examples/vue-query/layouts/LayoutDefault.vue
+++ b/examples/vue-query/layouts/LayoutDefault.vue
@@ -1,10 +1,8 @@
-
-
-
Welcome
+
About
@@ -47,10 +45,6 @@ a {
line-height: 1.8em;
border-right: 2px solid #eee;
}
-.logo {
- margin-top: 20px;
- margin-bottom: 10px;
-}
.content {
transition: opacity 0.1s ease-in;
}
diff --git a/examples/vue-query/package.json b/examples/vue-query/package.json
index 1e6b76b6..3bb445b6 100644
--- a/examples/vue-query/package.json
+++ b/examples/vue-query/package.json
@@ -9,15 +9,13 @@
"@types/node-fetch": "^2.6.11",
"@tanstack/vue-query": "^5.0.0",
"node-fetch": "^3.3.2",
+ "typescript": "5.4.5",
"vike": "^0.4.195",
"vike-vue-query": "^0.1.2",
"vike-vue": "^0.8.4",
"vite": "^5.4.0",
- "vue": "^3.4.36"
- },
- "type": "module",
- "devDependencies": {
- "typescript": "5.4.5",
+ "vue": "^3.4.36",
"vue-tsc": "^1.8.27"
- }
+ },
+ "type": "module"
}
diff --git a/examples/vue-query/pages/+config.ts b/examples/vue-query/pages/+config.ts
index d1df26d8..9cdf0db7 100644
--- a/examples/vue-query/pages/+config.ts
+++ b/examples/vue-query/pages/+config.ts
@@ -1,15 +1,9 @@
import type { Config } from 'vike/types'
import Layout from '../layouts/LayoutDefault.vue'
-import Head from '../layouts/HeadDefault.vue'
import vikeVue from 'vike-vue/config'
import vikeVueQuery from 'vike-vue-query/config'
-// Default configs (can be overridden by pages)
export default {
Layout,
- Head,
- //
- title: 'My Vike + Vue + TanStack Query App',
-
extends: [vikeVue, vikeVueQuery],
} satisfies Config
diff --git a/examples/vue-query/pages/+queryClientConfig.ts b/examples/vue-query/pages/+queryClientConfig.ts
index 2792d3d8..3dada269 100644
--- a/examples/vue-query/pages/+queryClientConfig.ts
+++ b/examples/vue-query/pages/+queryClientConfig.ts
@@ -1,3 +1,5 @@
+export { queryClientConfig }
+
import type { QueryClientConfig } from '@tanstack/vue-query'
// set query client options - e.g. not refetching when window loses or gains focus during development
@@ -8,5 +10,3 @@ const queryClientConfig: QueryClientConfig = {
},
},
}
-
-export default queryClientConfig
diff --git a/examples/vue-query/pages/_error/+Page.vue b/examples/vue-query/pages/_error/+Page.vue
deleted file mode 100644
index ae13b3f2..00000000
--- a/examples/vue-query/pages/_error/+Page.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
diff --git a/examples/vue-query/pages/about/+Page.vue b/examples/vue-query/pages/about/+Page.vue
new file mode 100644
index 00000000..f957b96f
--- /dev/null
+++ b/examples/vue-query/pages/about/+Page.vue
@@ -0,0 +1,4 @@
+
+ About
+ Example of using TanStack Query.
+
diff --git a/examples/vue-query/pages/index/+Page.vue b/examples/vue-query/pages/index/+Page.vue
index 05895751..efaa30f7 100644
--- a/examples/vue-query/pages/index/+Page.vue
+++ b/examples/vue-query/pages/index/+Page.vue
@@ -14,12 +14,6 @@
Source: brillout.github.io/star-wars.
-
- While initial data is fetched on the server, the client will refresh after rendering.
-
- Refreshing: {{ isFetching ? 'Yes' : 'No' }}
-
-
This page is:
diff --git a/examples/vue-query/pages/index/+title.ts b/examples/vue-query/pages/index/+title.ts
deleted file mode 100644
index 8eeb1024..00000000
--- a/examples/vue-query/pages/index/+title.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const title = 'Star Wars Movies'
diff --git a/examples/vue-query/vite.config.ts b/examples/vue-query/vite.config.ts
index 92bc2a14..278c7ad2 100644
--- a/examples/vue-query/vite.config.ts
+++ b/examples/vue-query/vite.config.ts
@@ -2,13 +2,6 @@ import vue from '@vitejs/plugin-vue'
import vike from 'vike/plugin'
import { defineConfig } from 'vite'
-const config = defineConfig({
- plugins: [
- vike({ prerender: true }),
- vue({
- include: [/\.vue$/, /\.md$/],
- }),
- ],
+export default defineConfig({
+ plugins: [vike(), vue()],
})
-
-export default config
diff --git a/packages/vike-vue-pinia/package.json b/packages/vike-vue-pinia/package.json
index 87343644..368f230a 100644
--- a/packages/vike-vue-pinia/package.json
+++ b/packages/vike-vue-pinia/package.json
@@ -51,7 +51,7 @@
"vue-tsc": "^2.0.13"
},
"files": [
- "dist"
+ "dist/"
],
"license": "MIT"
}
diff --git a/packages/vike-vue-query/integration/+config.ts b/packages/vike-vue-query/integration/+config.ts
index 7c7bf8eb..1f3ae3c0 100644
--- a/packages/vike-vue-query/integration/+config.ts
+++ b/packages/vike-vue-query/integration/+config.ts
@@ -1,15 +1,18 @@
+export { config as default }
+
import type { DehydratedState, QueryClient, QueryClientConfig } from '@tanstack/vue-query'
import type { Config } from 'vike/types'
import type _ from 'vike-vue/config' // Needed for declaration merging of Config
-export default {
+const config = {
name: 'vike-vue-query',
require: {
'vike-vue': '>=0.7.0',
},
- onCreateApp: 'import:vike-vue-query/__internal/integration/installVueQuery:installVueQuery',
- onAfterRenderHtml: 'import:vike-vue-query/__internal/integration/dehydrateVueQuery:dehydrateVueQuery',
- onBeforeRenderClient: 'import:vike-vue-query/__internal/integration/hydrateVueQuery:hydrateVueQuery',
+ passToClient: ['_vueQueryInitialState'],
+ onCreateApp: 'import:vike-vue-query/__internal/integration/onCreateApp:onCreateApp',
+ onAfterRenderHtml: 'import:vike-vue-query/__internal/integration/onAfterRenderHtml:onAfterRenderHtml',
+ onBeforeRenderClient: 'import:vike-vue-query/__internal/integration/onBeforeRenderClient:onBeforeRenderClient',
meta: {
queryClientConfig: {
env: {
diff --git a/packages/vike-vue-query/integration/dehydrateVueQuery.ts b/packages/vike-vue-query/integration/dehydrateVueQuery.ts
deleted file mode 100644
index b646d6d9..00000000
--- a/packages/vike-vue-query/integration/dehydrateVueQuery.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { dehydrate } from '@tanstack/vue-query'
-import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
-
-export { dehydrateVueQuery }
-
-const dehydrateVueQuery: OnAfterRenderHtmlSync = (pageContext): ReturnType => {
- pageContext._vueQueryInitialState = dehydrate(pageContext.queryClient!)
-}
diff --git a/packages/vike-vue-query/integration/onAfterRenderHtml.ts b/packages/vike-vue-query/integration/onAfterRenderHtml.ts
new file mode 100644
index 00000000..adc02ef6
--- /dev/null
+++ b/packages/vike-vue-query/integration/onAfterRenderHtml.ts
@@ -0,0 +1,13 @@
+export { onAfterRenderHtml }
+
+import { dehydrate } from '@tanstack/vue-query'
+import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
+
+const onAfterRenderHtml: OnAfterRenderHtmlSync = (pageContext): ReturnType => {
+ dehydrateVueQuery(pageContext)
+}
+
+type PageContext = Parameters[0]
+function dehydrateVueQuery(pageContext: PageContext) {
+ pageContext._vueQueryInitialState = dehydrate(pageContext.queryClient!)
+}
diff --git a/packages/vike-vue-query/integration/hydrateVueQuery.ts b/packages/vike-vue-query/integration/onBeforeRenderClient.ts
similarity index 60%
rename from packages/vike-vue-query/integration/hydrateVueQuery.ts
rename to packages/vike-vue-query/integration/onBeforeRenderClient.ts
index b1ab2fe1..47cacef3 100644
--- a/packages/vike-vue-query/integration/hydrateVueQuery.ts
+++ b/packages/vike-vue-query/integration/onBeforeRenderClient.ts
@@ -1,9 +1,14 @@
+export { onBeforeRenderClient }
+
import { hydrate } from '@tanstack/vue-query'
import type { OnBeforeRenderClientSync } from 'vike-vue/types'
-export { hydrateVueQuery }
+const onBeforeRenderClient: OnBeforeRenderClientSync = (pageContext): ReturnType => {
+ hydrateVueQuery(pageContext)
+}
-const hydrateVueQuery: OnBeforeRenderClientSync = (pageContext): ReturnType => {
+type PageContext = Parameters[0]
+function hydrateVueQuery(pageContext: PageContext) {
if (!pageContext.isHydration) {
return
}
diff --git a/packages/vike-vue-query/integration/installVueQuery.ts b/packages/vike-vue-query/integration/onCreateApp.ts
similarity index 54%
rename from packages/vike-vue-query/integration/installVueQuery.ts
rename to packages/vike-vue-query/integration/onCreateApp.ts
index 685387c2..e632ebe2 100644
--- a/packages/vike-vue-query/integration/installVueQuery.ts
+++ b/packages/vike-vue-query/integration/onCreateApp.ts
@@ -1,9 +1,14 @@
+export { onCreateApp }
+
import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import type { OnCreateAppSync } from 'vike-vue/types'
-export { installVueQuery }
+const onCreateApp: OnCreateAppSync = (pageContext): ReturnType => {
+ installVueQuery(pageContext)
+}
-const installVueQuery: OnCreateAppSync = (pageContext): ReturnType => {
+type PageContext = Parameters[0]
+function installVueQuery(pageContext: PageContext) {
const queryClient = new QueryClient(pageContext.config.queryClientConfig)
pageContext.app.use(VueQueryPlugin, { queryClient })
Object.assign(pageContext, { queryClient })
diff --git a/packages/vike-vue-query/package.json b/packages/vike-vue-query/package.json
index 283bb313..3ec9847e 100644
--- a/packages/vike-vue-query/package.json
+++ b/packages/vike-vue-query/package.json
@@ -15,23 +15,23 @@
},
"exports": {
"./config": "./dist/+config.js",
- "./__internal/integration/installVueQuery": "./dist/installVueQuery.js",
- "./__internal/integration/dehydrateVueQuery": "./dist/dehydrateVueQuery.js",
- "./__internal/integration/hydrateVueQuery": "./dist/hydrateVueQuery.js"
+ "./__internal/integration/onCreateApp": "./dist/onCreateApp.js",
+ "./__internal/integration/onAfterRenderHtml": "./dist/onAfterRenderHtml.js",
+ "./__internal/integration/onBeforeRenderClient": "./dist/onBeforeRenderClient.js"
},
"typesVersions": {
"*": {
"config": [
"./dist/+config.d.ts"
],
- "__internal/integration/installVueQuery": [
- "./dist/installVueQuery.d.ts"
+ "__internal/integration/onCreateApp": [
+ "./dist/onCreateApp.d.ts"
],
- "__internal/integration/dehydrateVueQuery": [
- "./dist/dehydrateVueQuery.d.ts"
+ "__internal/integration/onAfterRenderHtml": [
+ "./dist/onAfterRenderHtml.d.ts"
],
- "__internal/integration/hydrateVueQuery": [
- "./dist/hydrateVueQuery.d.ts"
+ "__internal/integration/onBeforeRenderClient": [
+ "./dist/onBeforeRenderClient.d.ts"
]
}
},
@@ -51,7 +51,7 @@
"vue-tsc": "^2.0.13"
},
"files": [
- "dist"
+ "dist/"
],
"license": "MIT"
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cc4e2814..bcdab934 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,6 +134,9 @@ importers:
node-fetch:
specifier: ^3.3.2
version: 3.3.2
+ typescript:
+ specifier: 5.4.5
+ version: 5.4.5
vike:
specifier: ^0.4.195
version: 0.4.195(vite@5.4.1(@types/node@22.3.0))
@@ -149,10 +152,6 @@ importers:
vue:
specifier: ^3.4.36
version: 3.4.38(typescript@5.4.5)
- devDependencies:
- typescript:
- specifier: 5.4.5
- version: 5.4.5
vue-tsc:
specifier: ^1.8.27
version: 1.8.27(typescript@5.4.5)