vikejs / vike-vue Goto Github PK

How about we advertise using Vue with JSX? Projects like Vuetify are written in TSX and Vue plans to support vapor for JSX.

We could write blog posts, documentation, go to conferences etc. to advertise the vike-vue + JSX combo.

@pdanpdan @4350pChris WDYT?

See also:

• Discussion with Evan You about Vue+JSX

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency playwright to v1.45.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @biomejs/biome to v1.8.3
• chore(deps): update dependency @types/node to v20.14.9
• chore(deps): update dependency prettier to v3.3.2
• chore(deps): update dependency vike to v0.4.177
• chore(deps): update dependency vue to v3.4.31
• chore(deps): update dependency vue-tsc to v2.0.22
• chore(deps): update dependency @tanstack/vue-query to v5.49.0
• chore(deps): update dependency typescript to v5.5.2
• chore(deps): update dependency vite to v5.3.2
• chore(deps): update pnpm to v9.4.0
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

It'd be nice if we could have proper completion when using ClientOnly.
E.g.

// Component.vue
<template>
  <p>{{ msg }}</p>
</template>
<script lang="ts" setup>
  defineProps<{ msg: string }>()
</script>

// App.vue
<template>
  <ClientOnly
    :load="() => import('./Component.vue')"
    msg="Hello World"
  />
</template>

Here we don't get a hint for msg even though it's passed to Component.vue.

See:

• vikejs/vike-solid#74
• https://docs.solidjs.com/solid-start/reference/client/client-only

I think we can & should also deprecate the <ClientOnly> wrapper component in favor of a clientOnly() function. It's a much nicer DX.

Since vike-react now has a <ClientOnly> component, it would be great to align vike-vue to also have such component.

Hey, I'm in the process of converting a project I'm working on to use this integration and replace my custom one.
However, one thing I don't know how to solve right now is registering client-side plugins that don't use app.use - specifically, the Sentry plugin.
Here's the code I'm currently using in my +onRenderClient.ts file (truncated):

import { init as sentryInit, BrowserTracing } from "@sentry/vue";
// ...
export async function onRenderClient(pageContext: PageContextClient) {
  if (!app) {
    // ...
    const { sentryRelease, sentryDsn } = pageContext;
    sentryInit({
      app,
      dsn: sentryDsn,
      integrations: (defaults) =>
        defaults.concat(
          new BrowserTracing({
            tracingOrigins: [/.*.example.com/, /^\//],
          })
        ),
      // Set tracesSampleRate to 1.0 to capture 100%
      // of transactions for performance monitoring.
      // We recommend adjusting this value in production
      tracesSampleRate: 0.2,
      logErrors: !import.meta.env.PROD,
      environment,
      release: sentryRelease,
    });
  // ...
  }
  // ...
}

Now, I could move this to the client init code or do it in my root component using import.meta.env.SSR - however, that would delay the plugin's registration and I'm worried some errors might not be propagated to Sentry in that case, which is why this is one of the first things I'm doing right now in the aforementioned file.

Any suggestions how I could leverage what's available right now to do this properly?

In createVueApp in changePage the content of pageContext is placed in pageContextReactive using Object.assign.
That might lead to leftover properties from previous pageContext if the new one is missing those properties.
The shape changing problem from dataReactive should not creep here as pageContext is always object.

Hello.

When using vike-vue the general structure of HTML is fixed in onRenderHml and in order to add support for teleport in SSR (https://vuejs.org/guide/scaling-up/ssr.html#teleports) one needs to:

• pass a context (ctx) to render... functions
• add the content of ctx.teleports in various places in HTML

Is there a way to do this while still using vike-vue or a full custom implementation is required?

New docs for vike-vue live at vike.dev, for example:

• https://vike.dev/clientOnly#vue
• https://vike.dev/bodyHtmlEnd
• https://vike.dev/onBeforeRenderClient

But for vike-vue-pinia and vike-vue-query I think it's better we write the docs in the README.md file.

So far vike-vue-pinia and vike-vue-query don't have any documentation, contribution welcome to create some.

I tested master and v0.5.3 tagged commit too. Same error:

$ cd examples/basic/
$ pnpm install
Scope: all 6 workspace projects
../..                                    | +218 ++++++++++++++++++++++
../..                                    | Progress: resolved 218, reused 201, downloaded 17, added 218, done

dependencies:
+ @types/node 20.10.5
+ @types/node-fetch 2.6.9
+ @vitejs/plugin-vue 4.6.0
+ cross-fetch 4.0.0
+ node-fetch 3.3.2
+ typescript 5.3.3
+ unplugin-vue-markdown 0.25.2
+ vike 0.4.152
+ vike-vue 0.5.3 <- ../../vike-vue
+ vite 5.0.10
+ vue 3.3.13

Done in 2.8s
$ pnpm run dev

> @ dev /MY_DIRS_HERE/vike-vue/examples/basic
> vite dev

19:28:05 [vike][config][Wrong Usage] The import path 'vike-vue' in /pages/+config.h.ts couldn't be resolved: does 'vike-vue' exist?
  VITE v5.0.10  ready in 576 ms
  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
19:28:09 [vike][request(1)] HTTP request: /
19:28:09 [vike][request(1)] Couldn't load configuration: see error above.
19:28:11 [vike][request(2)] HTTP request: /sw.js
19:28:11 [vike][request(2)] Couldn't load configuration: see error above.

And in browser I see blank page with one line: Cannot GET /

I have:

$ node --version
v18.17.1

$ pnpm --version
8.11.0

I have a catch all route which works fine from SSR but when we navigate from one page to another on the client side, the navigation doesn't happen.

Repo to reproduce: https://github.com/mohammadsiddiqui/h3-vike
Steps to reproduce:

• Navigate to home page
• Click on the link Create (this will work)
• Click on Update (this fails)

Catch all on client seems to be working for the first route occurrence but second time it fails.

This is the error i am getting

chunk-CRYGExF-.js:13 Error: You stumbled upon a vike-vue bug. Go to https://github.com/vikejs/vike-vue/issues/new and copy-paste this error. A maintainer will fix the bug (usually under 24 hours). at _l (chunk-CRYGExF-.js:17:5413) at ml (chunk-CRYGExF-.js:17:5691) at chunk-h72aJ6Vq.js:1:74 at Dn.fn (chunk-CRYGExF-.js:9:8919) at Dn.run (chunk-CRYGExF-.js:9:1446) at get value (chunk-CRYGExF-.js:9:9163) at li (chunk-CRYGExF-.js:9:1618) at get dirty (chunk-CRYGExF-.js:9:1165) at I.l.update (chunk-CRYGExF-.js:13:27958) at Ue (chunk-CRYGExF-.js:13:46)

hi,

i realise when using js cookie, it does reflect on browser side calling to server as i can see the headers is set.
but it does not seems to show on server side when rendering.

cookie storage:
https://github.com/u007/vike-admin/blob/main/store/storage.cookie.ts

the pinia using it:
https://github.com/u007/vike-admin/blob/main/store/alert.ts

Unable to extract CSS and put it into tag. For example:

import { createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { setup } = from '@css-render/vue3-ssr'

// For each request, you need to create a new app
const ssrApp = createSSRApp(App)
const { collect } = setup(ssrApp)

renderToString(ssrApp).then(appHtml => {
  const css = collect()
  const page = `<!DOCTYPE html>
  <html>
    <head>${css}</head>
    <body><div id="app">${appHtml}</div></body>
  </html>`
})

as you see here we can extract CSS and render as part of HTML template.

I didn't found a way how to do it properly. Probably a new functionality should be added

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json5
Error type: Invalid JSON5 (parsing failed)
Message: JSON5.parse error: JSON5: invalid character '\"' at 21:7

In addition to the title, favicon, and lang, I would find it handy to be able to specify a canonical URL in the page config.

This could be beneficial for other SSG sites optimized for search engines (see How to specify a canonical with rel="canonical" and other methods.

I currently implement this in my HeadDefault.vue as below, but it seems to closely match the pattern in the latest onRender{Client|Html} code, and may have broader appeal beyond my specific use case, so if you think it would be beneficial, please let me know and I'll submit a PR. Curious also why it appears that description was removed in the latest code, as I also configure description on page-by-page basis.

e.g.

const canonical = getHeadSetting('canonical', pageContext)

const canonicalTag = !canonical ? '' : escapeInject`<link rel="canonical" href="${canonical}" />`

Replaces my specific implementation:

<template class="h-100">
  <meta charset="UTF-8" />
  <link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
  <link v-if="canonical" rel="canonical" :href="canonical">
  <link rel="manifest" href="/favicons/site.webmanifest">
  <link rel="shortcut icon" type="image/x-icon" href="/favicons/favicon.ico">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-config" content="/favicons/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</template>

<script lang="ts" setup>
import { usePageContext } from 'vike-vue/usePageContext'
import { PageContext } from 'vike/types';

const pageContext = usePageContext();


function getCanonical(pageContext: PageContext): null | string {
  const canonicalConfig = pageContext.configEntries.canonical?.[0]
  if (!canonicalConfig) {
    return null
  }
  const canonical = canonicalConfig.configValue
  if (typeof canonical === 'string') {
    return canonical
  }
  const { configDefinedAt } = canonicalConfig;
  
  if (canonical instanceof Function || typeof canonical === 'function') {
    const val = canonical(pageContext)
    if (typeof val !== 'string') {
      throw new Error(configDefinedAt + ' should return a string')
    }
    return val
  }
  throw new Error(configDefinedAt + ' should be a string or a function returning a string')

}

const canonical = getCanonical(pageContext);

</script>

Using examples/full:

• navigate to http://localhost:3000/star-wars/1 (page must be server loaded, without client navigation - so please reload page)
• navigate to 'Data fetching' using link in sidebar

An error will occur.
useData will return the original object from http://localhost:3000/star-wars/1 combined with the array from http://localhost:3000/star-wars (because the base structure is an object the array content is converted to objects keys also)

I think the data should always be re-created

  import type { Config } from 'vike/types'
  import vikeVue from 'vike-vue/config'
- import vikePinia from 'vike-pinia'
+ import vikePinia from 'vike-pinia/config'

  export default {
    extends: [vikeVue, vikePinia],
  } satisfies Config

Same for vike-vue-query.

A comparison of features could be neat.

To give confidence to users that Vike Vue supports Nuxt features.

Also for us, so what we know where Vike Vue is lacking compared to Nuxt.

import vikeVue from "vike-vue/config";
import type { Config } from "vike/types";
import Head from "../layouts/HeadDefault.vue";
import Layout from "../layouts/LayoutDefault.vue";
import vikeVuePinia from 'vike-vue-pinia/config'
// Default config (can be overridden by pages)
export default {
  Layout,
  Head,
  // <title>
  title: "BackOffice",
  extends: [vikeVue, vikeVuePinia],
} satisfies Config;

error:

4:45:05 PM [vike][request(1)] Following error was thrown by the onRenderHtml() hook defined at vike-vue/renderer/onRenderHtml
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property '_context' -> object with constructor 'Object'
    --- property 'app' closes the circle
    at JSON.stringify (<anonymous>)
    at Object.toDisplayString (/Users/james/www/admin/node_modules/.pnpm/@[email protected]/node_modules/@vue/shared/dist/shared.cjs.js:465:154)
    at Module.ssrInterpolate (/Users/james/www/admin/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:180:35)
    at _sfc_ssrRender (/Users/james/www/admin/pages/index/+Page.vue:1:1)
    at renderComponentSubTree (/Users/james/www/admin/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:693:9)
    at renderComponentVNode (/Users/james/www/admin/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:637:12)
    at renderVNode (/Users/james/www/admin/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:753:14)
    at renderVNodeChildren (/Users/james/www/admin/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:769:5)
    at ssrRenderSlotInner (/Users/james/www/admin/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:118:7)
    at Module.ssrRenderSlot (/Users/james/www/admin/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:93:3)
4:45:05 PM [vike][request(1)] HTTP response / 500
4:45:05 PM [[email protected]][Bug] You stumbled upon a Vike bug. Go to https://github.com/vikejs/vike/issues/new and copy-paste this error. A maintainer will fix the bug (usually under 24 hours).

React 18 introduced Progressive Rendering.

Does Vue support this? If not, it could be nice to find/create/follow a Vue GitHub issue about this.

For example examples/vue-query/: when replacing import.meta.env.SSR ? 0 : 3000 with 3000 then the whole rendering of the page is blocked. There doesn't seem to be any progressive rendering going on, but maybe the trick is to add a <Suspense> boundary?

Is something missing for a non-experimental release? Do we foresee any feature the user will eventually want? 👀

• How about deprecating onBeforeMount() in favor of onCreateApp()? AFAICT the onBeforeMount() hooks of vike-{pinia,vue-query} can be merged into onCreateApp().
• How about deprecating onAfterRenderSSRApp() in favor of a new hook onAfterRenderHtml() that is called right before escapeInject? Users could use !!pageContext.Page to check whether the app is SSR'ing. Also, a neat thing here is that the new name would then align with vike-react's hooks.

The user may change the lang setting per-page based on i18n. On client-side navigation, onRenderClient should adapt lang in the existing DOM.

Same as vikejs/vike-react#59

I just read the doc and code that found there is no way to install and use the vue plugin with this adapter. Could you please tell me how to do or add a way to do that?