docs: update imports usage

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

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)
 

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({

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'
 

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)
 

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 }) {},

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
 ```

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)
 

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({

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({

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 }) {

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)
 

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({

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

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() {

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() {

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)
 

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)
 

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 {
   // 初始化之后，所有的页面已经加载完毕

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)