Replies: 20 comments 25 replies
-
|
I have extend the // src/types.ts
export type Crawling = {
// https://developers.google.com/search/docs/advanced/crawling/special-tags
noTranslate?: HeadTag
// localized versions of your page
// https://developers.google.com/search/docs/advanced/crawling/localized-versions
localizedVersions?: Record<string, HeadTag>
/**
* Extract head entries.
*/
extractHeadEntries?: () => HeadTag[]
}
...
...
// extend vue-router meta
declare module 'vue-router' {
interface RouteMeta {
/**
* Meta tags for alternative URLs.
*/
crawling?: Crawling
}
}
// extend vite.config.ts
declare module 'vite' {
...with this result (see // routes object from router
[
{
"alias": [
""
],
"path": "/:locale?",
"component": {
"name": "RouterView",
"inheritAttrs": false,
"props": {
"name": {
"default": "default"
}
}
},
"children": [
{
"name": "nested-deep-b",
"path": "nested/deep/b",
"props": true,
"meta": {
"crawling": {
"localizedVersions": {
"en": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "en",
"href": "http://localhost:3000/en/nested/deep/b"
}
},
"es": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "es",
"href": "http://localhost:3000/es/nested/deep/b"
}
}
},
"noTranslate": {
"tag": "meta",
"props": {
"name": "google",
"content": "notranslate"
}
}
}
}
},
{
"name": "index",
"path": "",
"props": true,
"meta": {
"crawling": {
"localizedVersions": {
"en": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "en",
"href": "http://localhost:3000/en/"
}
},
"es": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "es",
"href": "http://localhost:3000/es/"
}
}
},
"noTranslate": {
"tag": "meta",
"props": {
"name": "google",
"content": "notranslate"
}
}
}
}
},
{
"name": "b",
"path": "b",
"props": true,
"meta": {
"crawling": {
"localizedVersions": {
"en": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "en",
"href": "http://localhost:3000/en/b"
}
},
"es": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "es",
"href": "http://localhost:3000/es/b"
}
}
},
"noTranslate": {
"tag": "meta",
"props": {
"name": "google",
"content": "notranslate"
}
}
}
}
},
{
"name": "a",
"path": "a",
"props": true,
"meta": {
"crawling": {
"localizedVersions": {
"en": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "en",
"href": "http://localhost:3000/en/a"
}
},
"es": {
"tag": "link",
"props": {
"rel": "alternate",
"hreflang": "es",
"href": "http://localhost:3000/es/a"
}
}
},
"noTranslate": {
"tag": "meta",
"props": {
"name": "google",
"content": "notranslate"
}
}
}
}
}
]
}
] |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, I'll try to provide code I've done to make it work in my project. Your approach seems to be quite more thorough and programmatical. E. g. making it work for end-users out o the box. In a way I'm a bit more fan of the approach of providing docs with code snippets so that people can put it together themselves. I guess that's because I was burnt a lot by Nuxt. It often happened to me that Nuxt plugin did a lot for me out of the box but then I needed to change something for various reasons and I had to either do very ugly hacks or uninstall the plugin altogether and redo everything from scratch. So the the "naive" approach on my side was:
const head = computed<HeadObject>(() => {
const currentLocale = route.params.locale;
return {
htmlAttrs: {
lang: currentLocale,
},
link: [
...availableLocales.map((locale) => {
return {
rel: "alternate",
href: `${host}/${locale}/`,
hreflang: locale,
};
}),
{
rel: "alternate",
hreflagn: "x-default",
href: `${host}/en/`,
},
],
meta: [
{
property: "og:locale",
content: currentLocale,
},
],
};
});
useHead(head as any);
// This is to sync the i18n locale with URL (router locale)
watch(
() => route.params.locale,
(routeLocale) => {
locale.value = routeLocale as string;
},
{ immediate: true }
);☝️ I could imagine this could be provider via an utility function somehow:) Switching locale within UI was then done like so: <RouterLink
v-for="(locale, index) in availableLocales"
:to="{ params: { locale } }"
:key="locale"
>
{{ localeNames[locale] }}
</RouterLink>For generating all the language versions of routes I did the following in includedRoutes() {
const localePath = path.join('./locales');
const localeUrls = fs.readdirSync(localePath).map(fileName => {
return `/${fileName.replace('.json', '')}/`
});
return [...localeUrls];
}Now this is very naive as it basically adds But the If I would be the end user of this rather than plugin doing everything for me I would appreciate a few utility functions with instructions where to place them, aka:
I would appreciate this approach cause I could debug and console log, adjust the output of these functions and tweak things if needed. Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
I was including alternate entries, it would be similar to what you describe. I think doing this manually on a huge project will be a paint, I was thinking to automate all, also include some fully automated extraction using
<script setup lang="ts">
import { ref, watch } from 'vue'
import { HeadObject, useHead } from '@vueuse/head'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const { t } = useI18n()
const router = useRouter()
const headObject = ref<HeadObject>({})
watch(router.currentRoute, (r) => {
const meta = [
{
name: 'description',
content: 'Website description',
},
]
const head: HeadObject = {
title: 'Hello',
meta,
style: [
{
children: 'body {color: #567839}',
},
],
}
const crawling = r.meta?.crawling
if (crawling) {
const noTranslate = crawling.noTranslate
if (noTranslate) {
meta.push({
name: noTranslate.props.name,
content: noTranslate.props.content,
})
}
const alternate = crawling.extractAlternateUrls?.()
if (alternate)
head.link = alternate
}
console.log(head)
headObject.value = head
}, { deep: true, immediate: true })
useHead(headObject)
</script>
<template>
<p>{{ t('pageb.title') }}</p>
<img src="../assets/test.jpg" :alt="t('pageb.imgtitle')">
</template>For example, trying to find all stuff from |
Beta Was this translation helpful? Give feedback.
-
Yeah, I added Requesting |
Beta Was this translation helpful? Give feedback.
-
|
When first time entered, then use the preferred locale:
If you enter the url with the lang, then there is no interception:
|
Beta Was this translation helpful? Give feedback.
-
|
If include a non existing lang, for exmaple
|
Beta Was this translation helpful? Give feedback.
-
The problem here is that @antfu do not provide a way to provide header to the Then on SSR we can calculate the info to make correct request, the problem will be how to send redirect. I think the logic should be on the user side, maybe returning some Just see examples on |
Beta Was this translation helpful? Give feedback.
-
|
New extend fro // src/types.ts
...
// extend vue-router meta
declare module 'vue-router' {
interface RouteMeta {
/**
* Inject the following objects to `HeadObject` (to be used with `useHead`):
*
* 1) Meta tag for `og:locale` for the current locale:
* ```html
* <meta property="og:locale" content="en">
* ```
* 2) Meta tag to avoid browser showing page translation popup:
* ```html
* <meta name="google" content="notranslate">
* ```
* 3) `link`s for alternate urls for each locale, for example ( `en` is the default locale ):
* ```html
* <link rel="alternate" hreflang="x-default" href="http://localhost:3000/route">
* <link rel="alternate" hreflang="es" href="http://localhost:3000/es/route">
* ```
*
* @param head The head object
*/
injectI18nMeta?: (head: HeadObject) => HeadObject
/**
* Meta tags for alternative URLs.
*/
crawling?: Crawling
}
}using it: const route = useRoute()
const headObject = computed<HeadObject>(() => {
const locale = route.params.locale
const meta = [
{
name: 'description',
content: 'Website description',
},
]
const head: HeadObject = {
title: 'Hello',
meta,
style: [
{
children: 'body {color: #567839}',
},
],
}
route.meta?.injectI18nMeta?.(head)
console.log(head)
return head
})
useHead(headObject)with the result (I need to fix the
|
Beta Was this translation helpful? Give feedback.
-
|
fixed The problem is that we need to create Old module // // examples/multiple-pages-i18n/src/modules/i18n.ts
import { createI18n } from 'vue-i18n'
import { ViteSSGContext } from 'vite-ssg'
// import i18n resources
// https://vitejs.dev/guide/features.html#glob-import
const messages = Object.fromEntries(Object.entries(import.meta.globEager('../../locales/*.yml'))
.map(([key, value]) => [key.slice(14, -4), value.default]),
)
export const install = (ctx: ViteSSGContext) => {
console.log(`Detected locale: ${JSON.stringify(ctx.localeInfo)}`)
console.log(`Routes: ${JSON.stringify(ctx.routes)}`)
const fallbackLocale = 'en'
const i18n = createI18n({
legacy: false,
fallbackLocale,
locale: ctx.localeInfo?.current || fallbackLocale,
messages,
})
ctx.localeRef = i18n.global.locale
ctx.app.use(i18n)
}New module // examples/multiple-pages-i18n/src/modules/i18n.ts
import { ViteSSGContext } from 'vite-ssg'
// import i18n resources
// https://vitejs.dev/guide/features.html#glob-import
const messages = Object.fromEntries(Object.entries(import.meta.globEager('../../locales/*.yml'))
.map(([key, value]) => [key.slice(14, -4), value.default]),
)
export const install = (ctx: ViteSSGContext) => {
console.log(`Detected locale: ${JSON.stringify(ctx.localeInfo)}`)
console.log(`Routes: ${JSON.stringify(ctx.routes)}`)
ctx.createI18n?.(() => messages, ctx.app, ctx.localeInfo)
}New // src/types.ts
// @ts-ignore
export type CreateVueI18nFn = (
messagesResolver: () => Record<string, any>,
app: App,
localeInfo?: LocaleInfo,
) => I18n<Record<string, any>, unknown, unknown, false>
export interface ViteSSGContext<HasRouter extends boolean = true> {
app: App<Element>
router: HasRouter extends true ? Router : undefined
routes: HasRouter extends true ? RouteRecordRaw[] : undefined
initialState: Record<string, any>
head: HeadClient | undefined
isClient: boolean
localeInfo: LocaleInfo | undefined
// @ts-ignore
createI18n?: CreateVueI18nFn
}// src/utils/i18n.ts
export function createI18nFactory(
i18nOptions: I18nOptions,
initialized: (i18n: I18n<Record<string, any>, unknown, unknown, false>) => void,
): CreateVueI18nFn {
return (messagesResolver, app, localeInfo?: LocaleInfo) => {
const fallbackLocale = i18nOptions.defaultLocale
const i18n = createI18n({
legacy: false,
fallbackLocale,
messages: messagesResolver(),
locale: localeInfo?.current || fallbackLocale,
})
initialized(i18n)
app.use(i18n)
return i18n
}
}and so, the logic will be: // src/client/index.ts
...
...
// @ts-ignore
let vueI18n: I18n<Record<string, any>, unknown, unknown, false> | undefined
if (i18nInfo.info) {
const localeRefResolver: () => WritableComputedRef<string> | undefined = () => {
return vueI18n?.global?.locale
}
const { localesMap, defaultLocale, localePathVariable } = i18nInfo.info
let baseHref: string | undefined
if (client) {
localeInfo = detectClientLocale(defaultLocale, localesMap)
...
...
// @ts-ignore
let createI18n: CreateVueI18nFn | undefined
if (i18nOptions) {
createI18n = createI18nFactory(i18nOptions, (i18n) => {
vueI18n = i18n
})
}
const context: ViteSSGContext<true> = { app, head, isClient, router, routes, createI18n, localeInfo, initialState: {} }
if (client)
// @ts-ignore
context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__)
await fn?.(context) |
Beta Was this translation helpful? Give feedback.
-
|
I pushed my first The The main changes I made:
Before testing the example, run (from the root folder) I added <script setup lang="ts">
import { useAvailableLocales } from 'vite-ssg'
const availableLocales = useAvailableLocales()
</script>
<template>
<nav>
<RouterLink
v-for="({ locale, description, to }) in availableLocales"
:key="locale"
:to="to"
>
{{ description }}
</RouterLink>
</nav>
<main>
<router-view />
</main>
</template> |
Beta Was this translation helpful? Give feedback.
-
|
Only on local, not yet pushed to my branch on my fork. One more thing, imagine you have the same structure of the pages but for their translations (with YAML or JSON5 or JSON format):
and now, we have the following in the
and you are done, I will provide to
Using |
Beta Was this translation helpful? Give feedback.
-
|
I have included one option The cross-env DEBUG=vite-ssg:* vite-ssg build --i18n src/ssg-i18-options.jsonI include this option: and file content: // src/ssg-i18-options.json
{
"defaultLocale": "en",
"locales": {
"en": "English",
"es": "Español"
}
}Anyway, I have include the logic to generate the routes, for example, for
I need to finish the logic for the app, since I move a lot of things. |
Beta Was this translation helpful? Give feedback.
-
|
I have pushed the changes to my branch on my repo: the router for client is not yet finished and so the locale switcher will work but the locale will not change. I think we need also include the SSR midleware, as @MartinMalinda pointed out, there is no way detect locale and change it on SSR. The logic is now ready to create the app with the required http headers, and so we only need to figure out how can we provide the logic. |
Beta Was this translation helpful? Give feedback.
-
|
I'm getting a little bit lost here - I don't have time right now to go through all your notes, sorry - I think server side language detection and redirects are probably out of scope for I would imagine if you use vitesse, or going the SSG route you probably are using a static hosting. Hopefully Netlify fixes their i18n redirects so its usable easily soon. In case you want to serve your SSG dist output by yourself, via some lightweight nodejs server you might use something like https://github.com/mashpie/i18n-node. Althought it might be again tedious to use it in a minimalistic way just for the root URL redirect in case of missing locale. I guess all in all this probably can be managed later? 🤷 |
Beta Was this translation helpful? Give feedback.
-
|
If you are serving as static there is no ssr, but for ssr the problem is there. You can see the change I made to |
Beta Was this translation helpful? Give feedback.
-
|
@MartinMalinda about:
// examples/src/modules/i18n.ts
import { ViteSSGContext } from 'vite-ssg'
// import i18n resources
// https://vitejs.dev/guide/features.html#glob-import
const messages = Object.fromEntries(Object.entries(import.meta.globEager('../../locales/*.yml'))
.map(([key, value]) => [key.slice(14, -4), value.default]),
)
export const install = (ctx: ViteSSGContext) => {
// SEE src/i18n/types.ts BELOW
// can be a string
ctx.createI18n?.(ctx, () => messages, '../../locales')
// or a custom callback: this is what the plugin will do for you => equivalent to previous call
ctx.createI18n?.(ctx, () => messages, async(locale, route) {
return await import(/* @vite-ignore */ `../../locales/${route.meta.rawPath}.yml`)
})
}where // src/types.ts
export interface ViteSSGContext<HasRouter extends boolean = true> {
app: App<Element>
router: HasRouter extends true ? Router : undefined
routes: HasRouter extends true ? RouteRecordRaw[] : undefined
initialState: Record<string, any>
head: HeadClient | undefined
isClient: boolean
// @ts-ignore
createI18n?: CreateVueI18n
}// src/i18n/types.ts
export type ViteSSGLocale = {
locale: Locale
description: string
lang: string
country?: string
variant?: string
}
export type I18nRouteMessageResolver = string | ((locale: Locale, route: ViteSSGLocale) => (Record<string, any> | Promise<Record<string, any>>))
export type CreateVueI18n = (
ctx: ViteSSGContext<true>,
globalI18nMessageResolver?: () => Record<string, any> | Promise<Record<string, any>>,
routeMessageResolver?: I18nRouteMessageResolver,
) => Promise<I18n<Record<string, any>, unknown, unknown, false>>
|
Beta Was this translation helpful? Give feedback.
-
|
@MartinMalinda my branch is 99% functional!!! I added almost all you requests (point 3 maybe is not added but we can see what we can do once we have You can see user module on
|
Beta Was this translation helpful? Give feedback.
-
|
I'm fixing the top dynamic routes provided by the user, since we can have a collision, we will need to show the For SEO/Crawling that will be static, I have included another callback, I'm figuring out how to give some alternatives. The idea behind page resource loading is to have each page with only 1 file/resource with all traslations, also have some global resources shared between all pages (ok, cancel buttons, dialogs titles, etc). For example, I'll try to add a complete example, where we can have nested routes, some md routes to be excluded on ssg build and some dynamic routes. I need to fix a problem with the first load or refresh F5, since the Another approach for page resource loading using the @MartinMalinda I think this approach is really good. You can have multiple entries, that will be merged from top to bottom, so beware with the order of the // src/pages/b.vue
// al files have the same content on it own format: see last 2 entries: the key under the locales entries is the route path, but you can configure what you want.
<!-- on same directory -->
<i18n src="./b.json5"></i18n>
<i18n src="./b.json"></i18n>
<i18n src="./b.yaml"></i18n>
<i18n src="./b.yml"></i18n>
<!-- other directory -->
<i18n src="../../locales/pages/b.json5"></i18n>
<i18n src="../../locales/pages/b.json"></i18n>
<i18n src="../../locales/pages/b.yaml"></i18n>
<i18n src="../../locales/pages/b.yml"></i18n>
<!-- inlined -->
<i18n lang="json5">
{
"en": {
"/b": {
"title": "Hello",
"description": "Website description",
"imgtitle": "Image for hello I am B",
},
},
"es": {
"/b": {
"title": "Hola",
"description": "Descripción del sitio web",
"imgtitle": "Imagen para hola I soy B",
},
}
}
</i18n>
<i18n lang="yml">
en:
/b:
title: Hello
description: Website description
imgtitle: Image for hello I am B
es:
/b:
title: Hola
description: Descripción del sitio web
imgtitle: Imagen para hola soy B
</i18n>@antfu I have move all logic to |
Beta Was this translation helpful? Give feedback.
-
|
@MartinMalinda @antfu @hannoeru done: tmr I will do the documents, it will go in its own |
Beta Was this translation helpful? Give feedback.
-
|
We have some race condition on server, just see |
Beta Was this translation helpful? Give feedback.
-
|
fixed dynamic routes params for title and description:
|
Beta Was this translation helpful? Give feedback.
-
|
@MartinMalinda @hannoeru @antfu : docs ready on readme.md file on my branch: https://github.com/userquin/vite-ssg/tree/feat/i18n-ssg-router#wip-i18n-with-vue-i18n I'm working on a complete example. The new i18n feature summary will be: customizable head and message resources; custom components and composables; forget using locale param and Now we are ready to add some adoc if necessary, I think the solution is perfect using // src/pages/page-a.vue
<route lang="yaml">
meta:
pageI18nKey: PageA
</route>
<i18n global src="../../locales/pages/page-a.yml"></i18n>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { t } = useI18n({ useScope: 'global' })
</script>
<template>
<h1>{{ t('PageA.title') }}</h1>
</template> |
Beta Was this translation helpful? Give feedback.
-
|
The feat is ready on my branch, some deep refactor done, since mixing with existing codebase was hard to follow. I have included There is no need to handle There are also some new components and composable functions, see the docs. The docs are ready also on my branch with samples. |
Beta Was this translation helpful? Give feedback.
-
|
@husayt on this new feat ( You can see These 2 arguments are not provided using |
Beta Was this translation helpful? Give feedback.
-
|
@antfu your feedback would be really interesting. This is such an important feature to get i18n to play nicely with SSG, maybe potentially that could be merged here. |
Beta Was this translation helpful? Give feedback.
-
|
I'm very busy this week, next weekend I'll try to do some refactor when filtering routes, and so we can also create This way we have |
Beta Was this translation helpful? Give feedback.
-
I'm talking with Anthony, this is our intention, but we're discussing a refactor (there is an open issue to keep track names), since it is a very old repo, since vite1, and a lot of changes has been made. |
Beta Was this translation helpful? Give feedback.
-
|
@husayt It would be usefull if you can read the docs on my branch of my fork, it is huge, but covers almost all Martin Malinda suggestions (and more). I really would appreciate your feedback. |
Beta Was this translation helpful? Give feedback.
-
|
I have made 2 PR:
When feat: add default lang and global scope plugin options for SFC i18n custom block merged, then I'll be happy, no more I have updated The docs will be something like this (rigth now only on my local laptop, if someone interested just request me and I'll push to my branch):Optimizing router and i18n resources
|
Beta Was this translation helpful? Give feedback.
-
|
@husayt have you done some testing? how about docs? |
Beta Was this translation helpful? Give feedback.
-
|
My first feedback is that it is not easy to integrate, so I needed more
time to do it properly and hence I will need to do it over the weekend. But
I am very keen, as it seems very promising. I have an SSG app with three
different languages and want to try this on that.
…------------------------------------------------------------
On Wed, Jun 30, 2021 at 12:22 PM userquin ***@***.***> wrote:
@husayt <https://github.com/husayt> have you done some testing? how about
docs?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#58 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAI5PLHF43EUWNMNIXNOWVDTVL47JANCNFSM465WFWRA>
.
|
Beta Was this translation helpful? Give feedback.
-
|
My 2 PR merged, I have pushed changes to my branch: update docs, configure Also upgrade dependencies ( // taze -r (BEFORE UPGRADE)
vite-ssg package.json
@typescript-eslint/eslint-plugin dev ~19d ^4.27.0 → ^4.28.1 ~5d
eslint dev ~28d ^7.28.0 → ^7.30.0 ⩽1d
tsup dev ~1mo ^4.11.2 → ^4.12.0 ~7d
prettier ~28d ^2.3.1 → ^2.3.2 ~7d
@types/jsdom dev ~25d ^16.2.11 → ^16.2.12 ~8d
@types/yargs dev ~1mo ^17.0.0 → ^17.0.1 ⩽1d
@vue/compiler-sfc dev ~26d ^3.1.1 → ^3.1.4 ⩽1d
@vue/server-renderer dev ~26d ^3.1.1 → ^3.1.4 ⩽1d
rollup dev ~17d ^2.52.0 → ^2.52.7 ~1d
typescript dev ~16d ^4.3.3 → ^4.3.5 ~2d
vite dev ~25d ^2.3.7 → ^2.3.8 ~14d
vue dev ~26d ^3.1.1 → ^3.1.4 ⩽1d
vue-router dev ~17d ^4.0.9 → ^4.0.10 ~12d
3 minor, 10 patch updates
› examples/multiple-pages/package.json
vue ~26d ^3.1.1 → ^3.1.4 ⩽1d
@vitejs/plugin-vue dev ~1mo ^1.2.3 → ^1.2.4 ~6d
@vue/compiler-sfc dev ~26d ^3.1.1 → ^3.1.4 ⩽1d
typescript dev ~16d ^4.3.3 → ^4.3.5 ~2d
vite dev ~25d ^2.3.7 → ^2.3.8 ~14d
vite-plugin-components dev ~22d ^0.11.1 → ^0.11.5 ~1d (0.12.0 avaliable)
vite-plugin-pages dev ~24d ^0.13.1 → ^0.13.4 ~9d (0.14.8 avaliable)
vue-router dev ~17d ^4.0.9 → ^4.0.10 ~12d
8 patch updates
› examples/multiple-pages-i18n/package.json
@intlify/vite-plugin-vue-i18n dev ~26d ^2.2.1 → ^2.3.0 ~2d
tsup dev ~1mo ^4.11.2 → ^4.12.0 ~7d
vue ~26d ^3.1.1 → ^3.1.4 ⩽1d
vue-router ~17d ^4.0.9 → ^4.0.10 ~12d
@vitejs/plugin-vue dev ~1mo ^1.2.3 → ^1.2.4 ~6d
@vue/compiler-sfc dev ~26d ^3.1.1 → ^3.1.4 ⩽1d
typescript dev ~16d ^4.3.3 → ^4.3.5 ~2d
vite dev ~25d ^2.3.7 → ^2.3.8 ~14d
vite-plugin-components dev ~22d ^0.11.1 → ^0.11.5 ~1d (0.12.0 avaliable)
vite-plugin-pages dev ~24d ^0.13.1 → ^0.13.4 ~9d (0.14.8 avaliable)
vue-router dev ~17d ^4.0.9 → ^4.0.10 ~12d
2 minor, 9 patch updates
› examples/multiple-pages-with-store/package.json
vue ~26d ^3.1.1 → ^3.1.4 ⩽1d
@vitejs/plugin-vue dev ~1mo ^1.2.3 → ^1.2.4 ~6d
@vue/compiler-sfc dev ~26d ^3.1.1 → ^3.1.4 ⩽1d
typescript dev ~16d ^4.3.3 → ^4.3.5 ~2d
vite dev ~25d ^2.3.7 → ^2.3.8 ~14d
vite-plugin-components dev ~22d ^0.11.1 → ^0.11.5 ~1d (0.12.0 avaliable)
vite-plugin-pages dev ~24d ^0.13.1 → ^0.13.4 ~9d (0.14.8 avaliable)
vue-router dev ~17d ^4.0.9 → ^4.0.10 ~12d
pinia ~30d ^2.0.0-beta.2 → ^2.0.0-beta.3 ~15d
8 patch, 1 prerelease updates
› examples/single-page/package.json
vue ~26d ^3.1.1 → ^3.1.4 ⩽1d
@vitejs/plugin-vue dev ~1mo ^1.2.3 → ^1.2.4 ~6d
typescript dev ~16d ^4.3.3 → ^4.3.5 ~2d
vite dev ~25d ^2.3.7 → ^2.3.8 ~14d
pinia ~30d ^2.0.0-beta.2 → ^2.0.0-beta.3 ~15d
|
Beta Was this translation helpful? Give feedback.
-
|
Another improvements added on SSG build (right now only on my laptop):
Instead only using Using For example, for Generated manifest.json on SSR build
{
"index.html": {
"file": "assets/app.0d8781b6.js",
"src": "index.html",
"isEntry": true,
"imports": [
"_vendor.ac044cbc.js"
],
"dynamicImports": [
"src/pages/index.md",
"src/pages/b.vue",
"src/pages/a.md",
"src/pages/hi/[name].vue"
],
"css": [
"assets/app.ccd406f9.css"
]
},
"_vendor.ac044cbc.js": {
"file": "assets/vendor.ac044cbc.js"
},
"src/pages/index.md": {
"file": "assets/index.94eea00f.js",
"src": "src/pages/index.md",
"isDynamicEntry": true,
"imports": [
"_Counter.adaf98b7.js",
"_vendor.ac044cbc.js",
"index.html"
]
},
"_Counter.adaf98b7.js": {
"file": "assets/Counter.adaf98b7.js",
"imports": [
"index.html",
"_vendor.ac044cbc.js"
],
"css": [
"assets/Counter.ecd9e063.css"
]
},
"src/pages/b.vue": {
"file": "assets/b.0d0687be.js",
"src": "src/pages/b.vue",
"isDynamicEntry": true,
"imports": [
"_Counter.adaf98b7.js",
"_vendor.ac044cbc.js",
"index.html"
],
"assets": [
"assets/test.787f7936.jpg"
]
},
"src/pages/a.md": {
"file": "assets/a.74e2c17a.js",
"src": "src/pages/a.md",
"isDynamicEntry": true,
"imports": [
"_vendor.ac044cbc.js"
]
},
"src/pages/hi/[name].vue": {
"file": "assets/[name].e8e2b3cd.js",
"src": "src/pages/hi/[name].vue",
"isDynamicEntry": true,
"imports": [
"index.html",
"_vendor.ac044cbc.js"
]
}
}
Their dependencies will be: src/pages/b.vue ---------------------------
isEntry: undefined
isDynamicEntry: true
imports: _Counter.adaf98b7.js,_vendor.ac044cbc.js,index.html
dynamicImports: undefined
dependencies: [
'/assets/b.0d0687be.js',
'/assets/app.0d8781b6.js',
{ file: '/assets/app.ccd406f9.css', type: 'css', defer: true },
'/assets/vendor.ac044cbc.js',
'/assets/Counter.adaf98b7.js',
{ file: '/assets/Counter.ecd9e063.css', type: 'css', defer: true },
{ file: '/assets/test.787f7936.jpg', type: 'other' }
]For <link
rel="preload"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
href="/assets/app.ccd406f9.css"
/>
<noscript
><link rel="stylesheet" href="/assets/app.ccd406f9.css"
/></noscript>For <link rel="prefetch" href="/assets/test.787f7936.jpg" />For rest <link
rel="modulepreload"
crossorigin=""
href="/assets/Counter.adaf98b7.js"
/> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks its coming together nicely.
What will be really interesting to see, is example of ssr, i18n and pinia
working together. Often you will have initial state dependent on current
localisation.
…On Sat, 3 Jul 2021, 16:05 userquin, ***@***.***> wrote:
Another improvement added on SSG build:
- adding dynamic dependencies via client manifest
- core web vitals added for css (right now only on my laptop).
Instead only using ssr-manifest.json to add preload links, I also add
manifest on SSR, and so we can add all modules for the modules entries
for each page.
Using manifest.json we can add the module for the route, its dependencies,
its css and its assets.
For example, for src/pages/b.vue route page on multiple-pages-i18n
example:
Generated *manifest.json* on SSR build
{
"index.html": {
"file": "assets/app.0d8781b6.js",
"src": "index.html",
"isEntry": true,
"imports": [
"_vendor.ac044cbc.js"
],
"dynamicImports": [
"src/pages/index.md",
"src/pages/b.vue",
"src/pages/a.md",
"src/pages/hi/[name].vue"
],
"css": [
"assets/app.ccd406f9.css"
]
},
"_vendor.ac044cbc.js": {
"file": "assets/vendor.ac044cbc.js"
},
"src/pages/index.md": {
"file": "assets/index.94eea00f.js",
"src": "src/pages/index.md",
"isDynamicEntry": true,
"imports": [
"_Counter.adaf98b7.js",
"_vendor.ac044cbc.js",
"index.html"
]
},
"_Counter.adaf98b7.js": {
"file": "assets/Counter.adaf98b7.js",
"imports": [
"index.html",
"_vendor.ac044cbc.js"
],
"css": [
"assets/Counter.ecd9e063.css"
]
},
"src/pages/b.vue": {
"file": "assets/b.0d0687be.js",
"src": "src/pages/b.vue",
"isDynamicEntry": true,
"imports": [
"_Counter.adaf98b7.js",
"_vendor.ac044cbc.js",
"index.html"
],
"assets": [
"assets/test.787f7936.jpg"
]
},
"src/pages/a.md": {
"file": "assets/a.74e2c17a.js",
"src": "src/pages/a.md",
"isDynamicEntry": true,
"imports": [
"_vendor.ac044cbc.js"
]
},
"src/pages/hi/[name].vue": {
"file": "assets/[name].e8e2b3cd.js",
"src": "src/pages/hi/[name].vue",
"isDynamicEntry": true,
"imports": [
"index.html",
"_vendor.ac044cbc.js"
]
}
}
Their dependencies will be:
src/pages/b.vue ---------------------------
isEntry: undefined
isDynamicEntry: true
imports: _Counter.adaf98b7.js,_vendor.ac044cbc.js,index.html
dynamicImports: undefined
dependencies: [
'/assets/b.0d0687be.js',
'/assets/app.0d8781b6.js',
{ file: '/assets/app.ccd406f9.css', type: 'css', defer: true },
'/assets/vendor.ac044cbc.js',
'/assets/Counter.adaf98b7.js',
{ file: '/assets/Counter.ecd9e063.css', type: 'css', defer: true },
{ file: '/assets/test.787f7936.jpg', type: 'other' }
]
For dependencies with type: 'css', SSG will generate on head, for example
for { file: '/assets/app.ccd406f9.css', type: 'css', defer: true }:
<link
rel="preload"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
href="/assets/app.ccd406f9.css"
/>
<noscript
><link rel="stylesheet" href="/assets/app.ccd406f9.css"
/></noscript>
For dependencies with type: 'other', SSG will generate on head, for
example for { file: '/assets/test.787f7936.jpg', type: 'other' }:
<link rel="prefetch" href="/assets/test.787f7936.jpg" />
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#58 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAI5PLCF4MHOMXJISZJN343TV4RLJANCNFSM465WFWRA>
.
|
Beta Was this translation helpful? Give feedback.
-
|
Next push will have on |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to figure out an example using initial state dependent on current localisation, but this make sense? Since the locale change dynamically there are no one store per locale, we only have one store. That logic should be inside the app, we cannot do nothing on If you refer to use the defualt locale, I can include in the example... |
Beta Was this translation helpful? Give feedback.
-
|
@userquin thanks for coming back on that one. Yes, we don't need a different store, but perhaps a different state. Let's say you have a sports website. For english version of the website you want to show details of England team on frontpage, for spanish version you want to show Spain team. {
defaultTeam:"England"
}and for spanish: {
defaultTeam:"Spain"
} |
Beta Was this translation helpful? Give feedback.
-
|
I don't undestand your example since this can be done outside the store as a module, for example using When generating SSG each page will be called/invoked and so we need to store the state, how can I do that? If you clone my branch on my repo, just go here => the fn block is called for each page on If you can provide at least something functional maybe I can include it in the example, the example you provide does not make sense to me (or I am not understanding you well). |
Beta Was this translation helpful? Give feedback.
-
|
Here the ouput when rendering pages (you can see it is initializing the store 4 times): [vite-ssg] Rendering Pages... (4)
Initialize user ...
Initialize user ...
Initialize user ...
Initialize user ...
dist/es/b.html 3.44kb
dist/a.html 2.35kb
dist/b.html 3.43kb
dist/es/a.html 2.35kb |
Beta Was this translation helpful? Give feedback.
-
|
This feat is something I'll try to do once I finish a stable version. I need to review a few things I need to make it working not only for i18n router, it should also work for current versión of router. I want to add a sitemap generation and some utility helpers to allow its generation for manual registration or adding it to robots.txt. What do you think? |
Beta Was this translation helpful? Give feedback.
-
|
I have pushed changes to my branch with preload deps described before. I added pinia store to the i18n router example to include some tests later. |
Beta Was this translation helpful? Give feedback.
-
|
hey sir, does this feature already finished? can I clone it? |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/frandiox/vitesse-ssr-template/blob/master/src/main.ts#L20 |
Beta Was this translation helpful? Give feedback.
-
The idea comes from Vitesse template, so I think it will be good to implement here.
I have a
WIPbranch on my fork (currently only on local, not yet pushed to github), right now only working for client side viadev(the build hangs, so I need to review it). I'll try to push changes today, I'm fixing some problems on the router on client side.Initial things to include (from @MartinMalinda):
I'm new to
SSR, and so it is magic for me, and I will need some feedback from you.Step 1) and 3) are done (only at client side), just adding a router on top, and adding provided routes as its children routes.
This also have a problem for..mdfiles, since it cannot be translated, and so, we need to keep all.mdroutes at top level. Including non.mdroutes aslocalechildren routes needs an additional step, that is, remove/prefix from itspathentryWe don't have such info, since
vite-plugins-pageswill not expose that info: anyway, themdroutes will be under eachlocale, without translation.Here an snippet:
where
i18nis (this type is included onViteSSGOptionsandViteSSGClientOptions):and
3) Language detectionwill be (redirectionpart is done onbeforeEnterof thelocaleroute):Beta Was this translation helpful? Give feedback.
All reactions