vikejs / vike-vue Goto Github PK
View Code? Open in Web Editor NEW๐จ Vue integration for Vike
Home Page: https://vike.dev
License: MIT License
๐จ Vue integration for Vike
Home Page: https://vike.dev
License: MIT License
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
.github/workflows/build.yml
actions/checkout v4
pnpm/action-setup v2
examples/basic/package.json
@types/node ^20.10.4
@types/node-fetch ^2.6.9
@vitejs/plugin-vue ^4.5.2
cross-fetch ^4.0.0
node-fetch ^3.3.2
typescript ^5.3.3
vike-vue 0.5.1
vite ^5.0.7
unplugin-vue-markdown ^0.25.2
vike ^0.4.150
vue ^3.3.12
examples/ssr-spa/package.json
@vitejs/plugin-vue ^4.5.2
typescript ^5.3.3
vike-vue 0.5.1
vite ^5.0.7
vike ^0.4.150
vue ^3.3.12
examples/with-vue-plugin/package.json
@vitejs/plugin-vue ^4.5.2
typescript ^5.3.3
vike-vue 0.5.1
vite ^5.0.7
vike ^0.4.150
vue ^3.3.12
vue-toast-notification ^3.1.2
package.json
vike-vue/package.json
@brillout/release-me ^0.1.12
@types/node ^20.10.4
typescript ^5.3.3
vue ^3.3.12
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
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?
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?
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?
See:
I think we can & should also deprecate the <ClientOnly>
wrapper component in favor of a clientOnly()
function. It's a much nicer DX.
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
.
Since vike-react
now has a <ClientOnly>
component, it would be great to align vike-vue
to also have such component.
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>
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:
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)
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.