Merge branch 'main' into theme-hope

.github/workflows/release.yml

@@ -0,0 +1,19 @@
+name: release
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Push to release branch
+        run: git push origin HEAD:release

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm lint-staged

.vscode/settings.json

@@ -19,6 +19,7 @@
     "vue"
   ],
   "cSpell.words": [
+    "bumpp",
     "composables",
     "devtool",
     "docsearch",

docs/.vuepress/config.ts

@@ -2,16 +2,16 @@ import { createRequire } from 'node:module'
 import process from 'node:process'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { webpackBundler } from '@vuepress/bundler-webpack'
-import { defineUserConfig } from '@vuepress/cli'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
-import { getDirname, path } from '@vuepress/utils'
+import { defineUserConfig } from 'vuepress'
+import type { UserConfig } from 'vuepress'
+import { getDirname, path } from 'vuepress/utils'
 import { head } from './configs/index.js'
 import theme from './theme.js'
 
 const __dirname = getDirname(import.meta.url)
 const require = createRequire(import.meta.url)
-const isProd = process.env.NODE_ENV === 'production'
 
 export default defineUserConfig({
   // set site base to default value
@@ -117,4 +117,4 @@ export default defineUserConfig({
       componentsDir: path.resolve(__dirname, './components'),
     }),
   ],
-})
+}) as UserConfig

docs/.vuepress/configs/head.ts

@@ -1,4 +1,4 @@
-import type { HeadConfig } from '@vuepress/core'
+import type { HeadConfig } from 'vuepress/core'
 
 export const head: HeadConfig[] = [
   [

docs/.vuepress/configs/meta.ts

@@ -1,8 +1,8 @@
 import { createRequire } from 'node:module'
-import { fs } from '@vuepress/utils'
+import { fs } from 'vuepress/utils'
 
 const require = createRequire(import.meta.url)
 
 export const version = fs.readJsonSync(
-  require.resolve('@vuepress/core/package.json'),
+  require.resolve('vuepress/core/package.json'),
 ).version

docs/advanced/cookbook/markdown-and-vue-sfc.md

@@ -17,7 +17,7 @@ Here comes an example:
 
 **Input**
 
-```vue
+```vue title="markdown-and-vue-sfc.md"
 _Hello, {{ msg }}_
 
 <RedDiv>

docs/guide/getting-started.md

@@ -30,7 +30,33 @@ You can try VuePress directly in your browser on [StackBlitz](https://stackblitz
 
 #### Setup via CLI
 
-TODO
+You can use [create-vuepress](https://www.npmjs.com/package/create-vuepress) to generate a template directly.
+
+<CodeGroup>
+  <CodeGroupItem title="pnpm" active>
+
+```bash
+pnpm create vuepress vuepress-starter
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="yarn">
+
+```bash
+yarn create vuepress vuepress-starter
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="npm">
+
+```bash
+npm init vuepress vuepress-starter
+```
+
+  </CodeGroupItem>
+</CodeGroup>
 
 #### Setup Manually
 

docs/guide/markdown.md

@@ -160,6 +160,44 @@ Config reference: [markdown.toc](../reference/config.md#markdown-toc)
 
 Following code blocks extensions are implemented during markdown parsing in Node side. That means, the code blocks won't be processed in client side.
 
+#### Code Title
+
+You can specify the title of the code block by adding a `title` key-value mark in your fenced code blocks.
+
+**Input**
+
+````md
+```ts title=".vuepress/config.ts"
+import { defaultTheme } from '@vuepress/theme-default'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  title: 'Hello, VuePress',
+
+  theme: defaultTheme({
+    logo: 'https://vuejs.org/images/logo.png',
+  }),
+})
+```
+````
+
+**Output**
+
+```ts title=".vuepress/config.ts"
+import { defaultTheme } from '@vuepress/theme-default'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  title: 'Hello, VuePress',
+
+  theme: defaultTheme({
+    logo: 'https://vuejs.org/images/logo.png',
+  }),
+})
+```
+
+It can be used in combination with the other marks below. Please leave a space between them.
+
 #### Line Highlighting
 
 You can highlight specified lines of your code blocks by adding line ranges mark in your fenced code blocks:

docs/guide/migration.md

@@ -12,7 +12,7 @@ Some major changes and enhancements of VuePress v2:
 
 - VuePress v2 is now using Vue 3, so make sure your components and other client files are compatible with Vue 3.
 - VuePress v2 is developed with TypeScript, so it provides better TS support now. It's highly recommended to use TypeScript to develop plugins and themes. VuePress config file also supports TypeScript, and you can use `.vuepress/config.ts` directly.
-- VuePress v2 supports both Webpack and Vite as bundler. Now Vite is the default bundler, while you can still choose to use Webpack. You can even use Vite in dev mode to get better development experience, and use Webpack in build mode to get better browser compatibility.
+- VuePress v2 supports both Webpack and Vite as bundler. You can choose the bundler you like in your config file.
 - VuePress v2 is now released as pure ESM packages, and CommonJS config files are no longer supported.
 
 Core ideas and processes of VuePress v2 are the same with v1, while v2 API has been re-designed and becomes more normalized. So you might encounter breaking changes when migrating an existing v1 project to v2. This guide is here to help you migrating v1 sites / plugins / themes to v2.
@@ -27,23 +27,63 @@ Core ideas and processes of VuePress v2 are the same with v1, while v2 API has b
 
 Config file should be in ESM format, and CommonJS format config file is no longer supported.
 
-```diff
-// .vuepress/config.js
-
+```diff title=".vuepress/config.ts"
 - module.exports = {
 -   // user config
 - }
 
-+ export default {
++ import { defineUserConfig } from 'vuepress'
++
++ export default defineUserConfig({
 +   // user config
-+ }
++ })
+```
+
+#### bundler
+
+Now we support using different bundlers.
+
+Install and use the vite bundler in your config file:
+
+```bash
+npm i -D @vuepress/bundler-vite@next
+```
+
+```ts title=".vuepress/config.ts"
+import { viteBundler } from '@vuepress/bundler-vite'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  bundler: viteBundler(),
+})
+```
+
+Or using the webpack bundler:
+
+```bash
+npm i -D @vuepress/bundler-webpack@next
+```
+
+```ts title=".vuepress/config.ts"
+import { webpackBundler } from '@vuepress/bundler-webpack'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  bundler: webpackBundler(),
+})
 ```
 
 #### theme
 
-Using a theme via string is not supported. Import the theme directly.
+Using a theme via string is not supported, and the default theme is not integrated into vuepress package by default.
 
-```diff
+Install and use the default theme in your config file:
+
+```bash
+npm i -D @vuepress/theme-default@next
+```
+
+```diff title=".vuepress/config.ts"
 - module.exports = {
 -   theme: '@vuepress/theme-default',
 -   themeConfig: {
@@ -52,11 +92,13 @@ Using a theme via string is not supported. Import the theme directly.
 - }
 
 + import { defaultTheme } from '@vuepress/theme-default'
-+ export default {
++ import { defineUserConfig } from 'vuepress'
++
++ export default defineUserConfig({
 +   theme: defaultTheme({
 +     // default theme config
-+   })
-+ }
++   }),
++ })
 ```
 
 #### themeConfig
@@ -67,7 +109,7 @@ Removed. Set config to the theme directly.
 
 Using a plugin via string is not supported. Import the plugin directly.
 
-```diff
+```diff title=".vuepress/config.ts"
 - module.exports = {
 -   plugins: [
 -     [
@@ -80,13 +122,15 @@ Using a plugin via string is not supported. Import the plugin directly.
 - }
 
 + import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
-+ export default {
++ import { defineUserConfig } from 'vuepress'
++
++ export default defineUserConfig({
 +   plugins: [
 +     googleAnalyticsPlugin({
 +         id: 'G-XXXXXXXXXX',
 +     }),
 +   ],
-+ }
++ })
 ```
 
 #### shouldPrefetch
@@ -152,17 +196,19 @@ All webpack related configs are moved to options of `@vuepress/bundler-webpack`,
 - `configureWebpack`
 - `evergreen`: default value is changed from `false` to `true`
 
-```diff
+```diff title=".vuepress/config.ts"
 - module.exports = {
 -   sass: { /* ... */ },
 - }
 
 + import { webpackBundler } from '@vuepress/bundler-webpack'
-+ export default {
++ import { defineUserConfig } from 'vuepress'
++
++ export default defineUserConfig({
 +   bundler: webpackBundler({
 +     sass: { /* ... */ },
 +   }),
-+ }
++ })
 ```
 
 Please refer to [Guide > Bundler](./bundler.md).
@@ -190,17 +236,18 @@ head:
 
 Has the same structure with:
 
-```ts
-// .vuepress/config.ts
-export default {
+```ts title=".vuepress/config.ts"
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
   // ...
   head: [
     ['meta', { name: 'foo', content: 'bar' }],
     ['link', { rel: 'canonical', href: 'foobar' }],
     ['script', {}, `console.log('hello from frontmatter');`],
   ],
   // ...
-}
+})
 ```
 
 ### Permalink Patterns Change

docs/reference/client-api.md

@@ -98,12 +98,12 @@ Client API is provided by [@vuepress/client](https://www.npmjs.com/package/@vuep
 
 There are some constants that available in the client side code.
 
-To shim the types of these constants in client side code, add `@vuepress/client/types` to your `tsconfig.json`:
+To shim the types of these constants in client side code, add `vuepress/client-types` to your `tsconfig.json`:
 
 ```json
 {
   "compilerOptions": {
-    "types": ["@vuepress/client/types"]
+    "types": ["vuepress/client-types"]
   }
 }
 ```

docs/reference/node-api.md

@@ -8,10 +8,6 @@ icon: fa6-brands:node-js
 
 Node API is provided by [@vuepress/core](https://www.npmjs.com/package/@vuepress/core) package, which is also available as `vuepress/core`.
 
-```bash
-npm i -D @vuepress/core@next
-```
-
 ## App
 
 The app instance is available in all hooks of [Plugin API](./plugin-api.md).

docs/zh/advanced/cookbook/markdown-and-vue-sfc.md

@@ -17,7 +17,7 @@ icon: fa6-brands:vuejs
 
 **输入**
 
-```vue
+```vue title="markdown-and-vue-sfc.md"
 _你好， {{ msg }}_
 
 <RedDiv>