align Vue integrations (#1699)

vikejs · Jun 14, 2024 · 9e46c99 · 9e46c99
1 parent 775d83b
commit 9e46c99
Show file tree

Hide file tree

Showing 34 changed files with 72 additions and 77 deletions.
diff --git a/boilerplates/boilerplate-vue-ts/renderer/+onRenderClient.ts b/boilerplates/boilerplate-vue-ts/renderer/+onRenderClient.ts
@@ -1,18 +1,18 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { getPageTitle } from './getPageTitle'
 import type { OnRenderClientAsync } from 'vike/types'
 
-let app: ReturnType<typeof createApp>
+let app: ReturnType<typeof createVueApp>
 const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRenderClientAsync> => {
   // This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
   // to support SPA
   if (!pageContext.Page) throw new Error('My onRenderClient() hook expects pageContext.Page to be defined')
 
   if (!app) {
-    app = createApp(pageContext)
+    app = createVueApp(pageContext)
     app.mount('#app')
   } else {
     app.changePage(pageContext)

diff --git a/boilerplates/boilerplate-vue-ts/renderer/+onRenderHtml.ts b/boilerplates/boilerplate-vue-ts/renderer/+onRenderHtml.ts
@@ -4,7 +4,7 @@ export { onRenderHtml }
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import type { App } from 'vue'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import logoUrl from './logo.svg'
 import type { OnRenderHtmlAsync } from 'vike/types'
 import { getPageTitle } from './getPageTitle'
@@ -14,7 +14,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
   // onRenderHtml() to support SPA
   if (!pageContext.Page) throw new Error('My render() hook expects pageContext.Page to be defined')
 
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
 
   const appHtml = await renderToString(app)
 

diff --git a/...plates/boilerplate-vue-ts/renderer/app.ts → ...ilerplate-vue-ts/renderer/createVueApp.ts b/...plates/boilerplate-vue-ts/renderer/app.ts → ...ilerplate-vue-ts/renderer/createVueApp.ts
@@ -1,4 +1,4 @@
-export { createApp }
+export { createVueApp }
 
 import { createSSRApp, h, markRaw, reactive, ref } from 'vue'
 import PageLayout from './PageLayout.vue'
@@ -7,7 +7,7 @@ import type { PageContext } from 'vike/types'
 import { setData } from './useData'
 import { isObject, objectAssign } from './utils'
 
-function createApp(pageContext: PageContext) {
+function createVueApp(pageContext: PageContext) {
   const { Page } = pageContext
 
   const pageRef = ref(markRaw(Page))

diff --git a/boilerplates/boilerplate-vue/renderer/+onRenderClient.js b/boilerplates/boilerplate-vue/renderer/+onRenderClient.js
@@ -1,7 +1,7 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { getPageTitle } from './getPageTitle'
 
 let app
@@ -11,7 +11,7 @@ async function onRenderClient(pageContext) {
   if (!pageContext.Page) throw new Error('My onRenderClient() hook expects pageContext.Page to be defined')
 
   if (!app) {
-    app = createApp(pageContext)
+    app = createVueApp(pageContext)
     app.mount('#app')
   } else {
     app.changePage(pageContext)

diff --git a/boilerplates/boilerplate-vue/renderer/+onRenderHtml.js b/boilerplates/boilerplate-vue/renderer/+onRenderHtml.js
@@ -3,7 +3,7 @@ export { onRenderHtml }
 
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import logoUrl from './logo.svg'
 import { getPageTitle } from './getPageTitle'
 
@@ -12,7 +12,7 @@ async function onRenderHtml(pageContext) {
   // onRenderHtml() to support SPA
   if (!pageContext.Page) throw new Error('My render() hook expects pageContext.Page to be defined')
 
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
 
   const appHtml = await renderToString(app)
 

diff --git a/boilerplates/boilerplate-vue/renderer/app.js → .../boilerplate-vue/renderer/createVueApp.js b/boilerplates/boilerplate-vue/renderer/app.js → .../boilerplate-vue/renderer/createVueApp.js
@@ -1,12 +1,12 @@
-export { createApp }
+export { createVueApp }
 
 import { createSSRApp, h, markRaw, reactive, ref } from 'vue'
 import PageLayout from './PageLayout.vue'
 import { setPageContext } from './usePageContext'
 import { setData } from './useData'
 import { isObject } from './utils'
 
-function createApp(pageContext) {
+function createVueApp(pageContext) {
   const { Page } = pageContext
 
   const pageRef = ref(markRaw(Page))

diff --git a/docs/pages/usePageContext/+Page.mdx b/docs/pages/usePageContext/+Page.mdx
@@ -39,7 +39,7 @@ with
 to make `pageContext` accessible from any Vue component.
 
 ```js
-// app.js
+// createVueApp.js
 
 const app = createSSRApp(/*...*/)
 app.provide('pageContext', pageContext)
@@ -96,13 +96,12 @@ Examples:
  - JavaScript: <RepoLink path='/boilerplates/boilerplate-vue/renderer/usePageContext.js' />
  - TypeScript: <RepoLink path='/boilerplates/boilerplate-vue-ts/renderer/usePageContext.ts' />
 
-
 ### Vue 3 - `globalProperties`
 
 Alternatively, you can make `pageContext` available to all Vue components by using [app.config.globalProperties](https://v3.vuejs.org/api/application-config.html#globalproperties).
 
 ```js
-// app.js
+// createVueApp.js
 
 const app = createSSRApp(/*...*/)
 app.config.globalProperties.$pageContext = pageContext
@@ -123,11 +122,7 @@ const pageContext = getCurrentInstance().appContext.config.globalProperties.$pag
 </script>
 ```
 
-Example:
- - [/boilerplates/boilerplate-vue/renderer/app.js (@abff8de)](https://github.com/vikejs/vike/blob/abff8debc4c7cd6ab11e99e757379e5237a6c18c/boilerplates/boilerplate-vue/renderer/app.js#L26)
-   (`app.config.globalProperties.$pageContext = pageContext`)
- - [/boilerplates/boilerplate-vue/renderer/Link.vue (@abff8de)](https://github.com/vikejs/vike/blob/abff8debc4c7cd6ab11e99e757379e5237a6c18c/boilerplates/boilerplate-vue/renderer/Link.vue#L2)
-   (accessing `pageContext` from any Vue component)
+Example: [/boilerplates/boilerplate-vue/](https://github.com/vikejs/vike/tree/main/boilerplates/boilerplate-vue).
 
 ### Vue 2
 

diff --git a/examples/cloudflare-workers-vue/renderer/+onRenderClient.js b/examples/cloudflare-workers-vue/renderer/+onRenderClient.js
@@ -1,9 +1,9 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 
 async function onRenderClient(pageContext) {
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
   app.mount('#app')
 }
diff --git a/examples/cloudflare-workers-vue/renderer/+onRenderHtml.ts b/examples/cloudflare-workers-vue/renderer/+onRenderHtml.ts
@@ -4,12 +4,12 @@ export { onRenderHtml }
 import { pipeToWebWritable, pipeToNodeWritable } from '@vue/server-renderer'
 
 import { escapeInject, stampPipe } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import type { OnRenderHtmlAsync } from 'vike/types'
 import type { Writable } from 'stream'
 
 const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRenderHtmlAsync> => {
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
 
   // Streaming is optional: we can use renderToString() instead.
   const pipe = isWorker()

diff --git a/examples/vue-minimal/renderer/app.js → ...lare-workers-vue/renderer/createVueApp.js b/examples/vue-minimal/renderer/app.js → ...lare-workers-vue/renderer/createVueApp.js
@@ -1,9 +1,9 @@
 import { createSSRApp, h } from 'vue'
 import PageLayout from './PageLayout.vue'
 
-export { createApp }
+export { createVueApp }
 
-function createApp(pageContext) {
+function createVueApp(pageContext) {
   const { Page, pageProps } = pageContext
   const PageWithLayout = {
     render() {

diff --git a/examples/graphql-apollo-vue/renderer/+onBeforeRender.js b/examples/graphql-apollo-vue/renderer/+onBeforeRender.js
@@ -1,10 +1,10 @@
 export default onBeforeRender
 
 import { renderToString } from '@vue/server-renderer'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 
 async function onBeforeRender(pageContext) {
-  const app = createApp(pageContext, pageContext.apolloClient)
+  const app = createVueApp(pageContext, pageContext.apolloClient)
   const appHtml = await renderToString(app)
   const apolloInitialState = pageContext.apolloClient.extract()
   return {

diff --git a/examples/graphql-apollo-vue/renderer/+onRenderClient.js b/examples/graphql-apollo-vue/renderer/+onRenderClient.js
@@ -1,7 +1,7 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
 import fetch from 'cross-fetch'
 
@@ -12,6 +12,6 @@ function onRenderClient(pageContext) {
     connectToDevTools: true
   })
 
-  const app = createApp(pageContext, defaultClient)
+  const app = createVueApp(pageContext, defaultClient)
   app.mount('#app')
 }
diff --git a/examples/graphql-apollo-vue/renderer/app.js → ...aphql-apollo-vue/renderer/createVueApp.js b/examples/graphql-apollo-vue/renderer/app.js → ...aphql-apollo-vue/renderer/createVueApp.js
@@ -1,10 +1,10 @@
 import { createSSRApp, h, provide } from 'vue'
 import PageLayout from './PageLayout.vue'
 import { setPageContext } from './usePageContext'
-export { createApp }
+export { createVueApp }
 import { DefaultApolloClient } from '@vue/apollo-composable'
 
-function createApp(pageContext, apolloClient) {
+function createVueApp(pageContext, apolloClient) {
   const { Page, pageProps } = pageContext
   const PageWithLayout = {
     setup() {

diff --git a/examples/vue-full/renderer/+onRenderClient.ts b/examples/vue-full/renderer/+onRenderClient.ts
@@ -1,14 +1,14 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { getPageTitle } from './getPageTitle'
 import type { OnRenderClientAsync } from 'vike/types'
 
-let app: ReturnType<typeof createApp>
+let app: ReturnType<typeof createVueApp>
 const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRenderClientAsync> => {
   if (!app) {
-    app = createApp(pageContext)
+    app = createVueApp(pageContext)
     app.mount('#app')
   } else {
     app.changePage(pageContext)

diff --git a/examples/vue-full/renderer/+onRenderHtml.ts b/examples/vue-full/renderer/+onRenderHtml.ts
@@ -3,12 +3,12 @@ export { onRenderHtml }
 
 import { renderToNodeStream } from '@vue/server-renderer'
 import { escapeInject } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { getPageTitle } from './getPageTitle'
 import type { OnRenderHtmlAsync } from 'vike/types'
 
 const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRenderHtmlAsync> => {
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
   const stream = renderToNodeStream(app)
 
   const title = getPageTitle(pageContext)

diff --git a/examples/vue-full/renderer/app.ts → examples/vue-full/renderer/createVueApp.ts b/examples/vue-full/renderer/app.ts → examples/vue-full/renderer/createVueApp.ts
@@ -1,4 +1,4 @@
-export { createApp }
+export { createVueApp }
 
 import { createSSRApp, h, markRaw, reactive, ref } from 'vue'
 import PageLayout from './PageLayout.vue'
@@ -7,7 +7,7 @@ import type { PageContext } from 'vike/types'
 import { setData } from './useData'
 import { isObject, objectAssign } from './utils'
 
-function createApp(pageContext: PageContext) {
+function createVueApp(pageContext: PageContext) {
   const { Page } = pageContext
 
   const pageRef = ref(markRaw(Page))

diff --git a/examples/vue-minimal/renderer/+onRenderClient.js b/examples/vue-minimal/renderer/+onRenderClient.js
@@ -1,9 +1,9 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 
 async function onRenderClient(pageContext) {
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
   app.mount('#app')
 }
diff --git a/examples/vue-minimal/renderer/+onRenderHtml.js b/examples/vue-minimal/renderer/+onRenderHtml.js
@@ -3,10 +3,10 @@ export { onRenderHtml }
 
 import { renderToString } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 
 async function onRenderHtml(pageContext) {
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
   const appHtml = await renderToString(app)
 
   return escapeInject`<!DOCTYPE html>

diff --git a/...gn/cloudflare-workers-vue/renderer/app.js → ...ples/vue-minimal/renderer/createVueApp.js b/...gn/cloudflare-workers-vue/renderer/app.js → ...ples/vue-minimal/renderer/createVueApp.js
@@ -1,9 +1,9 @@
 import { createSSRApp, h } from 'vue'
 import PageLayout from './PageLayout.vue'
 
-export { createApp }
+export { createVueApp }
 
-function createApp(pageContext) {
+function createVueApp(pageContext) {
   const { Page, pageProps } = pageContext
   const PageWithLayout = {
     render() {

diff --git a/test-deprecated-design/cloudflare-workers-vue/renderer/_default.page.client.js b/test-deprecated-design/cloudflare-workers-vue/renderer/_default.page.client.js
@@ -1,8 +1,8 @@
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 
 export { render }
 
 async function render(pageContext) {
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
   app.mount('#app')
 }
diff --git a/test-deprecated-design/cloudflare-workers-vue/renderer/_default.page.server.ts b/test-deprecated-design/cloudflare-workers-vue/renderer/_default.page.server.ts
@@ -1,7 +1,7 @@
 import { pipeToWebWritable, pipeToNodeWritable } from '@vue/server-renderer'
 
 import { escapeInject, stampPipe } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import type { Writable } from 'stream'
 
 export { render }
@@ -11,7 +11,7 @@ export { passToClient }
 const passToClient = ['pageProps']
 
 async function render(pageContext: any) {
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
 
   // Streaming is optional: we can use renderToString() instead.
   const pipe = isWorker()

diff --git a/...es/cloudflare-workers-vue/renderer/app.js → ...lare-workers-vue/renderer/createVueApp.js b/...es/cloudflare-workers-vue/renderer/app.js → ...lare-workers-vue/renderer/createVueApp.js
@@ -1,9 +1,9 @@
 import { createSSRApp, h } from 'vue'
 import PageLayout from './PageLayout.vue'
 
-export { createApp }
+export { createVueApp }
 
-function createApp(pageContext) {
+function createVueApp(pageContext) {
   const { Page, pageProps } = pageContext
   const PageWithLayout = {
     render() {

diff --git a/test-deprecated-design/graphql-apollo-vue/renderer/_default.page.client.js b/test-deprecated-design/graphql-apollo-vue/renderer/_default.page.client.js
@@ -1,6 +1,6 @@
 export { render }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
 import fetch from 'cross-fetch'
 
@@ -11,6 +11,6 @@ function render(pageContext) {
     connectToDevTools: true
   })
 
-  const app = createApp(pageContext, defaultClient)
+  const app = createVueApp(pageContext, defaultClient)
   app.mount('#app')
 }
diff --git a/test-deprecated-design/graphql-apollo-vue/renderer/_default.page.server.js b/test-deprecated-design/graphql-apollo-vue/renderer/_default.page.server.js
@@ -1,6 +1,6 @@
 import { renderToString } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import logoUrl from './logo.svg'
 
 export { render }
@@ -39,7 +39,7 @@ async function render(pageContext) {
 }
 
 async function onBeforeRender(pageContext) {
-  const app = createApp(pageContext, pageContext.apolloClient)
+  const app = createVueApp(pageContext, pageContext.apolloClient)
   const appHtml = await renderToString(app)
   const apolloInitialState = pageContext.apolloClient.extract()
   return {

diff --git a/...design/graphql-apollo-vue/renderer/app.js → ...aphql-apollo-vue/renderer/createVueApp.js b/...design/graphql-apollo-vue/renderer/app.js → ...aphql-apollo-vue/renderer/createVueApp.js
@@ -1,10 +1,10 @@
 import { createSSRApp, h, provide } from 'vue'
 import PageShell from './PageShell.vue'
 import { setPageContext } from './usePageContext'
-export { createApp }
+export { createVueApp }
 import { DefaultApolloClient } from '@vue/apollo-composable'
 
-function createApp(pageContext, apolloClient) {
+function createVueApp(pageContext, apolloClient) {
   const { Page, pageProps } = pageContext
   const PageWithLayout = {
     setup() {