diff --git a/docs/advanced/cookbook/adding-extra-pages.md b/docs/advanced/cookbook/adding-extra-pages.md
index 4725368d..9dc5ada9 100644
--- a/docs/advanced/cookbook/adding-extra-pages.md
+++ b/docs/advanced/cookbook/adding-extra-pages.md
@@ -9,7 +9,7 @@ With the help of [Plugin API](../../reference/plugin-api.md) and [Node API](../.
 As a theme author, you may not require users to create a `/README.md` file as the homepage, but you want to provide a default one:
 
 ```ts
-import { createPage } from '@vuepress/core'
+import { createPage } from 'vuepress/core'
 
 export default {
   // all pages have been loaded after initialization
diff --git a/docs/advanced/cookbook/making-a-theme-extendable.md b/docs/advanced/cookbook/making-a-theme-extendable.md
index 8214310f..38f9d1a0 100644
--- a/docs/advanced/cookbook/making-a-theme-extendable.md
+++ b/docs/advanced/cookbook/making-a-theme-extendable.md
@@ -29,8 +29,8 @@ This approach requires you to consider which components of your theme should be
 First, set `alias` for replaceable components of you theme:
 
 ```ts
-import type { Theme } from '@vuepress/core'
-import { getDirname } from '@vuepress/utils'
+import type { Theme } from 'vuepress/core'
+import { getDirname } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/advanced/cookbook/usage-of-client-config.md b/docs/advanced/cookbook/usage-of-client-config.md
index 542f48cb..39de1777 100644
--- a/docs/advanced/cookbook/usage-of-client-config.md
+++ b/docs/advanced/cookbook/usage-of-client-config.md
@@ -3,7 +3,7 @@
 You can make use of the [client config file](../../guide/configuration.md#client-config-file) directly in your project, or specify the file path in your plugin or theme via [clientConfigFile](../../reference/plugin-api.md#clientconfigfile) hook:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -12,10 +12,10 @@ const pluginOrTheme = {
 }
 ```
 
-Inside the client config file, `@vuepress/client` package provides a helper function [defineClientConfig](../../reference/client-api.md#defineclientconfig) to help you define the client config:
+Inside the client config file, `vuepress/client` provides a helper function [defineClientConfig](../../reference/client-api.md#defineclientconfig) to help you define the client config:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {},
@@ -40,7 +40,7 @@ The `enhance` function will be invoked after the client app is created. It's pos
 You can register global Vue components via the [app.component](https://vuejs.org/api/application.html#app-component) method:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import MyComponent from './MyComponent.vue'
 
 export default defineClientConfig({
@@ -59,7 +59,7 @@ We already provides a [ClientOnly](../../reference/components.md#clientonly) com
 In the `enhance` function, you can make use of the [`__VUEPRESS_SSR__`](../../reference/client-api.md#ssr) flag for that purpose.
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   async enhance() {
@@ -76,7 +76,7 @@ export default defineClientConfig({
 You can make use of the [Router Methods](https://router.vuejs.org/api/#router-methods) that provided by vue-router. For example, add navigation guard:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ router }) {
@@ -106,9 +106,9 @@ The `setup` function would be invoked inside the [setup](https://vuejs.org/api/c
 You can take the `setup` function as part of the [setup](https://vuejs.org/api/composition-api-setup.html) hook of the root component. Thus, all composition APIs are available here.
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
 import { provide, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   setup() {
@@ -130,7 +130,7 @@ In the `setup` function, the [`__VUEPRESS_SSR__`](../../reference/client-api.md#
 Another way to use non-ssr-friendly features is to put them inside the [onMounted](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) hook:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import { onMounted } from 'vue'
 
 export default defineClientConfig({
@@ -148,7 +148,7 @@ export default defineClientConfig({
 The `layouts` options is to set layout components. After layout components are registered here, users can use it via [layout](../../reference/frontmatter.md#layout) frontmatter.
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import MyLayout from './layouts/MyLayout.vue'
 
 export default defineClientConfig({
@@ -165,7 +165,7 @@ The `rootComponents` is a components array to be placed directly into the root n
 Typical usage of this option is to put some global UI components, like global popup or so:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import GlobalPopup from './components/GlobalPopup.vue'
 
 export default defineClientConfig({
diff --git a/docs/advanced/theme.md b/docs/advanced/theme.md
index 8bfc27aa..deec6538 100644
--- a/docs/advanced/theme.md
+++ b/docs/advanced/theme.md
@@ -9,7 +9,7 @@ Before reading this guide, you'd better learn the guide of [Writing a Plugin](./
 A VuePress theme is a special plugin, which should satisfy the [Theme API](../reference/theme-api.md). Like plugins, a theme should also be a _Theme Object_ or a _Theme Function_, and could be wrapped with a function to receive options:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -22,7 +22,7 @@ const fooTheme = (options) => {
     clientConfigFile: path.resolve(__dirname, 'client.js'),
 
     // set custom dev / build template
-    // if the template is not specified, the default template from `@vuepress/client` will be used
+    // if the template is not specified, the default template
     templateBuild: path.resolve(__dirname, 'templates/build.html'),
     templateDev: path.resolve(__dirname, 'templates/dev.html'),
 
@@ -49,7 +49,7 @@ const barTheme = (options) => {
 Then, create theme's client config file `client.js` :
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
 
diff --git a/docs/guide/assets.md b/docs/guide/assets.md
index cd3728dd..e686d8e1 100644
--- a/docs/guide/assets.md
+++ b/docs/guide/assets.md
@@ -77,7 +77,7 @@ However, sometimes you may have some dynamical links referencing public files, e
 
 <script setup>
 import { ref } from 'vue'
-import { withBase } from '@vuepress/client'
+import { withBase } from 'vuepress/client'
 
 const logoPath = ref('/images/hero.png')
 </script>
@@ -106,7 +106,7 @@ Since markdown image syntax regards image links as relative paths by default, yo
 The path aliases that set in config file are also supported:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md
index 3231a19d..f829f085 100644
--- a/docs/guide/configuration.md
+++ b/docs/guide/configuration.md
@@ -70,7 +70,7 @@ Similarly, we also have a convention for client config file paths (in order of p
 A basic client config file looks like this:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {},
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index f697bbbd..99bd7ca7 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -17,7 +17,7 @@ You can try VuePress directly in your browser on [StackBlitz](https://stackblitz
 
 ::: tip
 
-- When using [pnpm](https://pnpm.io/), you need to install `vue` and `@vuepress/client` as peer-dependencies.
+- When using [pnpm](https://pnpm.io/), you need to install `vue` as peer-dependencies.
 - When using [yarn 2+](https://yarnpkg.com/), you need to set `nodeLinker: 'node-modules'` in your [`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) file.
 
 :::
@@ -76,8 +76,8 @@ npm init
   <CodeGroupItem title="pnpm" active>
 
 ```bash
-# install vuepress and required peer dependencies
-pnpm add -D vuepress@next @vuepress/client@next vue
+# install vuepress and vue
+pnpm add -D vuepress@next vue
 # install bundler and theme
 pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
 ```
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 307cc8ee..efa8b6b6 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -359,7 +359,7 @@ Here is a complex example:
 Notice that path aliases are not available in import code syntax. You can use following config to handle path alias yourself:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/reference/bundler/vite.md b/docs/reference/bundler/vite.md
index 5e12ff5e..fd05c188 100644
--- a/docs/reference/bundler/vite.md
+++ b/docs/reference/bundler/vite.md
@@ -14,7 +14,7 @@ Reference of vite bundler options:
 
 ```ts
 import { viteBundler } from '@vuepress/bundler-vite'
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 
 export default defineUserConfig({
   bundler: viteBundler({
diff --git a/docs/reference/bundler/webpack.md b/docs/reference/bundler/webpack.md
index bf8efecd..3e0d4d87 100644
--- a/docs/reference/bundler/webpack.md
+++ b/docs/reference/bundler/webpack.md
@@ -14,7 +14,7 @@ Reference of webpack bundler options:
 
 ```ts
 import { webpackBundler } from '@vuepress/bundler-webpack'
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 
 export default defineUserConfig({
   bundler: webpackBundler({
diff --git a/docs/reference/client-api.md b/docs/reference/client-api.md
index c9f3d2ad..e3dee0e8 100644
--- a/docs/reference/client-api.md
+++ b/docs/reference/client-api.md
@@ -2,7 +2,7 @@
 
 <NpmBadge package="@vuepress/client" />
 
-Client API is provided by [@vuepress/client](https://www.npmjs.com/package/@vuepress/client) package, which is used for developing client files.
+Client API is provided by [@vuepress/client](https://www.npmjs.com/package/@vuepress/client) package, which is also available as `vuepress/client`.
 
 ## Composition API
 
@@ -151,7 +151,7 @@ To shim the types of these constants in client side code, add `@vuepress/client/
 Customizing the format of `<title>` in client config file:
 
 ```ts
-import { defineClientConfig, resolvers } from '@vuepress/client'
+import { defineClientConfig, resolvers } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {
diff --git a/docs/reference/default-theme/extending.md b/docs/reference/default-theme/extending.md
index aecfe6ca..57f323fa 100644
--- a/docs/reference/default-theme/extending.md
+++ b/docs/reference/default-theme/extending.md
@@ -25,7 +25,7 @@ With the help of them, you can add or replace content easily. Here comes an exam
 Firstly, create a client config file `.vuepress/client.ts`:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
 
 export default defineClientConfig({
@@ -71,7 +71,7 @@ Then, if you want to replace the `HomeFooter.vue` component, just override the a
 
 ```ts
 import { defaultTheme } from '@vuepress/theme-default'
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 import { defineUserConfig } from 'vuepress'
 
 const __dirname = getDirname(import.meta.url)
@@ -92,9 +92,9 @@ export default defineUserConfig({
 Instead of extending the default theme directly in `.vuepress/config.ts` and `.vuepress/client.ts`, you can also develop your own theme extending the default theme:
 
 ```ts
-import type { Theme } from '@vuepress/core'
 import { defaultTheme, type DefaultThemeOptions } from '@vuepress/theme-default'
-import { getDirname, path } from '@vuepress/utils'
+import type { Theme } from 'vuepress/core'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/reference/frontmatter.md b/docs/reference/frontmatter.md
index b4bb49dc..01621be3 100644
--- a/docs/reference/frontmatter.md
+++ b/docs/reference/frontmatter.md
@@ -92,7 +92,7 @@ Rendered as:
 Register a layout component in `.vuepress/client.ts` file:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import CustomLayout from './CustomLayout.vue'
 
 export default defineClientConfig({
diff --git a/docs/reference/node-api.md b/docs/reference/node-api.md
index 57edc7f2..ff1eba89 100644
--- a/docs/reference/node-api.md
+++ b/docs/reference/node-api.md
@@ -2,7 +2,7 @@
 
 <NpmBadge package="@vuepress/core" />
 
-Node API is provided by [@vuepress/core](https://www.npmjs.com/package/@vuepress/core) package. It is a dependency of the [vuepress](https://www.npmjs.com/package/vuepress) package, and you can also install it separately:
+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
@@ -341,7 +341,7 @@ const createPage: (app: App, options: PageOptions) => Promise<Page>
 - Example:
 
 ```ts
-import { createPage } from '@vuepress/core'
+import { createPage } from 'vuepress/core'
 
 export default {
   // create an extra page in onInitialized hook
diff --git a/docs/reference/plugin-api.md b/docs/reference/plugin-api.md
index 0c83d474..8250ee53 100644
--- a/docs/reference/plugin-api.md
+++ b/docs/reference/plugin-api.md
@@ -86,7 +86,7 @@ The following hooks will be processed in dev / build:
 - Example:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -110,7 +110,7 @@ export default {
 - Example:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -311,7 +311,7 @@ export default {
 In client component:
 
 ```ts
-import { usePageData } from '@vuepress/client'
+import { usePageData } from 'vuepress/client'
 
 export default {
   setup() {
diff --git a/docs/reference/plugin/git.md b/docs/reference/plugin/git.md
index 742c314a..059c8ab1 100644
--- a/docs/reference/plugin/git.md
+++ b/docs/reference/plugin/git.md
@@ -95,8 +95,8 @@ This plugin will add a `git` field to page data.
 After using this plugin, you can get the collected git information in page data:
 
 ```ts
-import { usePageData } from '@vuepress/client'
 import type { GitPluginPageData } from '@vuepress/plugin-git'
+import { usePageData } from 'vuepress/client'
 
 export default {
   setup() {
diff --git a/docs/reference/plugin/register-components.md b/docs/reference/plugin/register-components.md
index 30c7fbf7..45158608 100644
--- a/docs/reference/plugin/register-components.md
+++ b/docs/reference/plugin/register-components.md
@@ -41,7 +41,7 @@ export default {
 - Example:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -71,7 +71,7 @@ export default {
 - Example:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/reference/theme-api.md b/docs/reference/theme-api.md
index 5b5efed0..ed598e9b 100644
--- a/docs/reference/theme-api.md
+++ b/docs/reference/theme-api.md
@@ -46,7 +46,7 @@ VuePress theme also works as a plugin, so Theme API can accept all the options o
 
 ```ts
 import { defaultTheme } from '@vuepress/theme-default'
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/zh/advanced/cookbook/adding-extra-pages.md b/docs/zh/advanced/cookbook/adding-extra-pages.md
index 0bdf787d..ec7129ad 100644
--- a/docs/zh/advanced/cookbook/adding-extra-pages.md
+++ b/docs/zh/advanced/cookbook/adding-extra-pages.md
@@ -9,7 +9,7 @@
 作为一个主题作者，你可能不想要求用户必须创建一个 `/README.md` 文件来作为主页，但是你希望提供一个默认的主页：
 
 ```ts
-import { createPage } from '@vuepress/core'
+import { createPage } from 'vuepress/core'
 
 export default {
   // 初始化之后，所有的页面已经加载完毕
diff --git a/docs/zh/advanced/cookbook/making-a-theme-extendable.md b/docs/zh/advanced/cookbook/making-a-theme-extendable.md
index ae58b929..303cd340 100644
--- a/docs/zh/advanced/cookbook/making-a-theme-extendable.md
+++ b/docs/zh/advanced/cookbook/making-a-theme-extendable.md
@@ -29,8 +29,8 @@
 首先，为你主题的可替换组件设置 `alias` 别名：
 
 ```ts
-import type { Theme } from '@vuepress/core'
-import { getDirname, path } from '@vuepress/utils'
+import type { Theme } from 'vuepress/core'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/zh/advanced/cookbook/usage-of-client-config.md b/docs/zh/advanced/cookbook/usage-of-client-config.md
index 035045e3..25bdc41c 100644
--- a/docs/zh/advanced/cookbook/usage-of-client-config.md
+++ b/docs/zh/advanced/cookbook/usage-of-client-config.md
@@ -3,7 +3,7 @@
 你可以直接在你的项目中使用 [客户端配置文件](../../guide/configuration.md#客户端配置文件) 。或者，在你的插件或者主题中，使用 [clientConfigFile](../../reference/plugin-api.md#clientconfigfile) Hook 来指定客户端配置文件的路径：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -12,10 +12,10 @@ const pluginOrTheme = {
 }
 ```
 
-在客户端配置文件中，`@vuepress/client` 包提供了一个 [defineClientConfig](../../reference/client-api.md#defineclientconfig) 函数来帮助你定义客户端配置：
+在客户端配置文件中，`vuepress/client` 提供了一个 [defineClientConfig](../../reference/client-api.md#defineclientconfig) 函数来帮助你定义客户端配置：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {},
@@ -40,7 +40,7 @@ export default defineClientConfig({
 你可以通过 [app.component](https://staging-cn.vuejs.org/api/application.html#app-component) 方法来注册 Vue 全局组件：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import MyComponent from './MyComponent.vue'
 
 export default defineClientConfig({
@@ -59,7 +59,7 @@ VuePress 会在构建过程中生成一个 SSR 应用，用以对页面进行预
 在 `enhance` 函数中，你可以使用 [`__VUEPRESS_SSR__`](../../reference/client-api.md#ssr) 标记来处理这种情况。
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   async enhance() {
@@ -76,7 +76,7 @@ export default defineClientConfig({
 你可以使用 vue-router 提供的 [Router 方法](https://router.vuejs.org/zh/api/index.html#router-方法) 。例如，添加导航钩子：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ router }) {
@@ -106,9 +106,9 @@ export default defineClientConfig({
 你可以把 `setup` 函数当作根组件的 [setup](https://staging-cn.vuejs.org/api/composition-api-setup.html) Hook 中的一部分。因此，所有的组合式 API 都可以在这里使用。
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
 import { provide, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   setup() {
@@ -130,7 +130,7 @@ export default defineClientConfig({
 使用不支持 SSR 的功能的另一种方式就是将他们放在 [onMounted](https://staging-cn.vuejs.org/api/composition-api-lifecycle.html#onmounted) Hook 中：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import { onMounted } from 'vue'
 
 export default defineClientConfig({
@@ -148,7 +148,7 @@ export default defineClientConfig({
 `layouts` 配置项用于设置布局组件。你在此处注册布局后，用户就可以通过 [layout](../../reference/frontmatter.md#layout) frontmatter 来使用它们。
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import MyLayout from './layouts/MyLayout.vue'
 
 export default defineClientConfig({
@@ -165,7 +165,7 @@ export default defineClientConfig({
 该选项的典型使用方式就是放置一些全局的 UI 组件，比如全局弹窗等：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import GlobalPopup from './components/GlobalPopup.vue'
 
 export default defineClientConfig({
diff --git a/docs/zh/advanced/theme.md b/docs/zh/advanced/theme.md
index 08e33ba5..fcb3c6d7 100644
--- a/docs/zh/advanced/theme.md
+++ b/docs/zh/advanced/theme.md
@@ -9,7 +9,7 @@
 VuePress 主题是一个特殊的插件，它应该符合 [主题 API](../reference/theme-api.md) 。和插件一样，主题可以是一个 _主题对象_ 或一个 _主题函数_ ，并且通常通过一个函数来接收配置项：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -22,7 +22,7 @@ const fooTheme = (options) => {
     clientConfigFile: path.resolve(__dirname, 'client.js'),
 
     // 设置自定义 dev / build 模板
-    // 如果没有指定模板，将会使用 `@vuepress/client` 提供的默认模板
+    // 如果没有指定模板，将会使用默认模板
     templateBuild: path.resolve(__dirname, 'templates/build.html'),
     templateDev: path.resolve(__dirname, 'templates/dev.html'),
 
@@ -49,7 +49,7 @@ const barTheme = (options) => {
 然后，创建主题的客户端配置文件 `client.js` :
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
 
diff --git a/docs/zh/guide/assets.md b/docs/zh/guide/assets.md
index 8bc24128..52ee28b2 100644
--- a/docs/zh/guide/assets.md
+++ b/docs/zh/guide/assets.md
@@ -77,7 +77,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { withBase } from '@vuepress/client'
+import { withBase } from 'vuepress/client'
 
 const logoPath = ref('/images/hero.png')
 </script>
@@ -106,7 +106,7 @@ npm install -D package-name
 在配置文件中设置的路径别名也同样支持：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/zh/guide/configuration.md b/docs/zh/guide/configuration.md
index 1c54a56a..28fe7d46 100644
--- a/docs/zh/guide/configuration.md
+++ b/docs/zh/guide/configuration.md
@@ -70,7 +70,7 @@ export default defineUserConfig({
 一个基础的客户端配置文件是这样的：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {},
diff --git a/docs/zh/guide/getting-started.md b/docs/zh/guide/getting-started.md
index 969ffebf..b3e43f44 100644
--- a/docs/zh/guide/getting-started.md
+++ b/docs/zh/guide/getting-started.md
@@ -17,7 +17,7 @@ VuePress v2 目前仍处于 RC (Release Candidate) 阶段。你已经可以用
 
 ::: tip
 
-- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要安装 `vue` 和 `@vuepress/client` 作为 peer-dependencies 。
+- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要安装 `vue` 作为 peer-dependencies 。
 - 使用 [yarn 2+](https://yarnpkg.com/) 时，你需要在 [`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) 文件中设置 `nodeLinker: 'node-modules'` 。
 
 :::
@@ -76,8 +76,8 @@ npm init
   <CodeGroupItem title="pnpm" active>
 
 ```bash
-# 安装 vuepress 和必需的 peer dependencies
-pnpm add -D vuepress@next @vuepress/client@next vue
+# 安装 vuepress 和 vue
+pnpm add -D vuepress@next vue
 # 安装打包工具和主题
 pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
 ```
diff --git a/docs/zh/guide/markdown.md b/docs/zh/guide/markdown.md
index 799fe7bf..8f56d46e 100644
--- a/docs/zh/guide/markdown.md
+++ b/docs/zh/guide/markdown.md
@@ -360,7 +360,7 @@ v-pre 扩展是由我们的内置插件支持的。
 需要注意的是，路径别名在导入代码语法中不会生效。你可以通过下面的配置来自行处理路径别名：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/zh/reference/bundler/vite.md b/docs/zh/reference/bundler/vite.md
index 178b08b9..6abb1d57 100644
--- a/docs/zh/reference/bundler/vite.md
+++ b/docs/zh/reference/bundler/vite.md
@@ -14,7 +14,7 @@ Vite 打包工具的配置项：
 
 ```ts
 import { viteBundler } from '@vuepress/bundler-vite'
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 
 export default defineUserConfig({
   bundler: viteBundler({
diff --git a/docs/zh/reference/bundler/webpack.md b/docs/zh/reference/bundler/webpack.md
index e1c68b18..3c953e95 100644
--- a/docs/zh/reference/bundler/webpack.md
+++ b/docs/zh/reference/bundler/webpack.md
@@ -14,7 +14,7 @@ Webpack 打包工具的配置项：
 
 ```ts
 import { webpackBundler } from '@vuepress/bundler-webpack'
-import { defineUserConfig } from '@vuepress/cli'
+import { defineUserConfig } from 'vuepress'
 
 export default defineUserConfig({
   bundler: webpackBundler({
diff --git a/docs/zh/reference/client-api.md b/docs/zh/reference/client-api.md
index 11a23f4b..2aa41e2f 100644
--- a/docs/zh/reference/client-api.md
+++ b/docs/zh/reference/client-api.md
@@ -2,7 +2,7 @@
 
 <NpmBadge package="@vuepress/client" />
 
-客户端 API 是由 [@vuepress/client](https://www.npmjs.com/package/@vuepress/client) Package 提供的，用于开发客户端文件。
+客户端 API 是由 [@vuepress/client](https://www.npmjs.com/package/@vuepress/client) Package 提供的，同时也可以通过 `vuepress/client` 来引入。
 
 ## Composition API
 
@@ -151,7 +151,7 @@
 在客户端配置文件中自定义 `<title>` 的格式：
 
 ```ts
-import { defineClientConfig, resolvers } from '@vuepress/client'
+import { defineClientConfig, resolvers } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {
diff --git a/docs/zh/reference/default-theme/extending.md b/docs/zh/reference/default-theme/extending.md
index 6fff5fa8..5661de62 100644
--- a/docs/zh/reference/default-theme/extending.md
+++ b/docs/zh/reference/default-theme/extending.md
@@ -25,7 +25,7 @@ VuePress 提供了继承主题的基础能力，但不同的主题可能会提
 首先，创建一个客户端配置文件 `.vuepress/client.ts` ：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
 
 export default defineClientConfig({
@@ -71,7 +71,7 @@ import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
 
 ```ts
 import { defaultTheme } from '@vuepress/theme-default'
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 import { defineUserConfig } from 'vuepress'
 
 const __dirname = getDirname(import.meta.url)
@@ -92,9 +92,9 @@ export default defineUserConfig({
 除了在 `.vuepress/config.ts` 和 `.vuepress/client.ts` 中直接扩展默认主题以外，你可以通过继承默认主题来开发一个你自己的主题：
 
 ```ts
-import type { Theme } from '@vuepress/core'
 import { defaultTheme, type DefaultThemeOptions } from '@vuepress/theme-default'
-import { getDirname, path } from '@vuepress/utils'
+import type { Theme } from 'vuepress/core'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/zh/reference/frontmatter.md b/docs/zh/reference/frontmatter.md
index 087c00df..672c58a2 100644
--- a/docs/zh/reference/frontmatter.md
+++ b/docs/zh/reference/frontmatter.md
@@ -92,7 +92,7 @@ head:
 在 `.vuepress/client.ts` 文件中注册一个布局组件：
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import CustomLayout from './CustomLayout.vue'
 
 export default defineClientConfig({
diff --git a/docs/zh/reference/node-api.md b/docs/zh/reference/node-api.md
index 5344c35c..d0035248 100644
--- a/docs/zh/reference/node-api.md
+++ b/docs/zh/reference/node-api.md
@@ -2,7 +2,7 @@
 
 <NpmBadge package="@vuepress/core" />
 
-Node API 是由 [@vuepress/core](https://www.npmjs.com/package/@vuepress/core) 包提供的。它是 [vuepress](https://www.npmjs.com/package/vuepress) 包的依赖之一，当然你也可以单独安装它：
+Node API 是由 [@vuepress/core](https://www.npmjs.com/package/@vuepress/core) 包提供的，同时也可以通过 `vuepress/core` 来引入。
 
 ```bash
 npm i -D @vuepress/core@next
@@ -339,7 +339,7 @@ const createPage: (app: App, options: PageOptions) => Promise<Page>
 - 示例：
 
 ```ts
-import { createPage } from '@vuepress/core'
+import { createPage } from 'vuepress/core'
 
 export default {
   // 在 onInitialized hook 中创建一个额外页面
diff --git a/docs/zh/reference/plugin-api.md b/docs/zh/reference/plugin-api.md
index 5b8085e7..ec8c2916 100644
--- a/docs/zh/reference/plugin-api.md
+++ b/docs/zh/reference/plugin-api.md
@@ -86,7 +86,7 @@
 - 示例：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -110,7 +110,7 @@ export default {
 - 示例：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -311,7 +311,7 @@ export default {
 在客户端组件中：
 
 ```ts
-import { usePageData } from '@vuepress/client'
+import { usePageData } from 'vuepress/client'
 
 export default {
   setup() {
diff --git a/docs/zh/reference/plugin/git.md b/docs/zh/reference/plugin/git.md
index fd658561..1419b325 100644
--- a/docs/zh/reference/plugin/git.md
+++ b/docs/zh/reference/plugin/git.md
@@ -95,8 +95,8 @@ gitInclude:
 在使用该插件后，可以在页面数据中获取该插件收集到的 Git 信息：
 
 ```ts
-import { usePageData } from '@vuepress/client'
 import type { GitPluginPageData } from '@vuepress/plugin-git'
+import { usePageData } from 'vuepress/client'
 
 export default {
   setup() {
diff --git a/docs/zh/reference/plugin/register-components.md b/docs/zh/reference/plugin/register-components.md
index 622158e1..403f2593 100644
--- a/docs/zh/reference/plugin/register-components.md
+++ b/docs/zh/reference/plugin/register-components.md
@@ -41,7 +41,7 @@ export default {
 - 示例：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -71,7 +71,7 @@ export default {
 - 示例：
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
diff --git a/docs/zh/reference/theme-api.md b/docs/zh/reference/theme-api.md
index 5d3ff9cf..79012a73 100644
--- a/docs/zh/reference/theme-api.md
+++ b/docs/zh/reference/theme-api.md
@@ -46,7 +46,7 @@ VuePress 主题同样是一个插件，因此主题 API 可以接收 [插件 API
 
 ```ts
 import { defaultTheme } from '@vuepress/theme-default'
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -82,7 +82,7 @@ export default {
 
 ### templateBuildRenderer
 
-- 类型： `TemplateRenderer` from `@vuepress/utils`
+- 类型： `TemplateRenderer`
 
 - 详情：