June Releases

What we have been working on in June 2024.

💚

We are looking for sponsors.

Fixes: 48

Features

Performance

Project

See also

vike > CHANGELOG.md
vike-react > CHANGELOG.md
vike-vue > CHANGELOG.md
vike-solid > CHANGELOG.md

Improved Nested Layouts

Vike has now first-class support for nested layouts.

# Outer layout, common to all pages
pages/+Layout.js
# Layout for product page
pages/product/@id/+Layout.js
# Nested view
pages/product/@id/pricing/+Page.js
# Nested view
pages/product/@id/reviews/+Page.js

See API > <Layout> > Nested layouts.

💚

Authors: Blankeos, brillout

pages/(marketing)/

You can now organize your pages into groups:

FILESYSTEM                             URL
================================       ==================
pages/(marketing)/index/+Page.js       /
pages/(marketing)/about/+Page.js       /about
pages/admin-panel/index/+Page.js       /admin-panel
pages/admin-panel/users/+Page.js       /admin-panel/users

The directory (marketing) is ignored because it's wrapped by parentheses.

Beyond improved organization, it enables you to apply different configurations to different pages.

See: Guides > Routing > Groups.

💚

Author: brillout

+client.js

You can now define a +client.js file which defines the first client-side code that is executed.

It's convenient for initializing error tracking, user tracking, vanilla CSS tools, etc.

See API > +client.js.

💚

Author: brillout

clientOnly()

Vue users can now use the clientOnly() helper which has the same functionality as the <ClientOnly> wrapper (now deprecated) but with a much improved DX.

💚

Author: pdanpdan

Solid users already had clientOnly() and there is a feature request for vike-react.

💚

Contributions welcome: vikejs/vike-react#102 - clientOnly() instead of <ClientOnly>

pageContext.headersOriginal

There is now an official way to pass the HTTP request headers:

import { renderPage } from 'vike/server'
 
// Server middleware
app.get('*', async (req) => {
  const pageContextInit = {
    urlOriginal: req.url,
    headersOriginal: req.headers
  }
  const pageContext = await renderPage(pageContextInit)
  // ...
})

Like pageContext.urlOriginal and pageContext.urlParsed (pageContext.urlParsed will be renamed pageContext.url in the next major release), the pageContext.headersOriginal contains the untouched original headers object you passed to renderPage() while pageContext.headers is a convenient normalized object of strings (Record<string, string>).

See: HTTP Headers > Request.

💚

Author: brillout

bodyHtmlBegin/bodyHtmlEnd

With Vue, a common need is to insert the HTML of teleports. You can now do that with following new settings:

• bodyHtmlBegin
• bodyHtmlEnd

💚

Author: 4350pChris

vike-cloudflare

The new package vike-cloudflare enables you to use Cloudflare Pages with workers in a zero-config fashion.

Soon, with the upcoming Vite Runtime API, you will be able to develop directly against the Cloudflare workerd runtime. In other words: no more runtime discrepancy between dev and prod!

💚

Author: magne4000

New Bati integrations

New Bati integrations:

• Drizzle ORM
• ts-rest

💚

Author: phonzammi, magne4000

New capabilities for extensions

There have been many internal structural improvements for adding new capabilities to Vike extension, for example:

• Cumulative hooks.
• Extensions can declare hard dependencies.

  For example, vike-vue-pinia now declares its dependency on vike-vue>=0.7.6 and vike>=0.4.174: any unmet dependency throws an error. (Unlike peerDependencies warnings which are usually ignored.)

• getPageContext() powering the upcoming "universal" hooks such as useConfig().

💚

Author: brillout

Universal Handlers

We've been prototyping on Universal Handlers to enable Vike extensions to automatically integrate the server middlewares of tools.

💚

Author: magne4000

Slimmer client

In order to save client-side KBs, we started removing client code such as:

• Client-side validation.

  The downside is that some errors will be silent or less helpful, but we believe it's worth it.

• assert() calls.

  The code had many assert() calls which were helpful for fixing bugs, but we need them less now that the client runtime is stabilizing.

💚

Author: brillout

Improved docs

We are continuously improving the documentation.

For example:

• Rewritten API > guard() hook docs explaining when and where guard() is called, with new guides about limitations and workarounds.
• Rewritten Guides > Data Fetching docs covering all common use cases, with clearer recommendations.
• Rewritten API > data() hook > Environment docs, explaining how and when to change the environment of data().
• Rewritten integration guides for stores and data tools, e.g. Pinia > Initial state.
• vike-{react,vue,solid} are now fully documented on vike.dev.
• ...

💚

Author: brillout

New marketing

We are starting to focus on marketing and advertising Vike.

We started writing a new page Overview > Why Vike, which will eventually be the long-form version of the new marketing copy.

We're also working on:

• A vike.dev facelift to make the website aesthetically more pleasing.
• A completely new landing page for vike.dev.

💚

Author: brillout

Getting close to 1.0.0

The three major reasons we aren't releasing 1.0.0 are:

1. Nested Layouts.
2. Use Vite to transpile server code.
3. A major announcement we'll unveil later this sommer.

   The announcement will be pivotal to the project. Stay tuned.

Now that Nested Layouts are done, we're getting close to the 1.0.0 release.

Roadmap

Major features we're currently working on:

• Improved head management DX for vike-{react,vue,solid}.

• Prefetching of pageContext.

• Vike CLI.

  Replacing the Vite CLI is a foundational change enabling a lot of upcoming features.

• Use Vite to transpile server code.

  Including standalone server builds, and development directly against edge runtimes (e.g. Cloudflare's workerd).

  💚

  Author: nitedani

• Improve vike.dev aesthetics and UX. (We already have a new design in mind, which we'll implement after we finish all highest-priority tickets.)

See also

• vike > CHANGELOG.md
• vike-react > CHANGELOG.md
• vike-vue > CHANGELOG.md
• vike-solid > CHANGELOG.md
• Releases