text: "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[3988],{89231:(e,n,a)=>{a.r(n),a.d(n,{data:()=>o});const o={key:"v-67e88f7a",path:"/vuepress-next/guide/migration.html",title:"Migrating from v1",lang:"en-US",frontmatter:{},excerpt:"",headers:[{level:2,title:"For Users",slug:"for-users",children:[{level:3,title:"User Config Change",slug:"user-config-change",children:[]},{level:3,title:"Frontmatter Change",slug:"frontmatter-change",children:[]},{level:3,title:"Permalink Patterns Change",slug:"permalink-patterns-change",children:[]},{level:3,title:"Palette System Change",slug:"palette-system-change",children:[]},{level:3,title:"Conventional Files Change",slug:"conventional-files-change",children:[]},{level:3,title:"Markdown slot Change",slug:"markdown-slot-change",children:[]},{level:3,title:"Plugin API Change",slug:"plugin-api-change",children:[]},{level:3,title:"Theme API Change",slug:"theme-api-change",children:[]},{level:3,title:"CLI Change",slug:"cli-change",children:[]},{level:3,title:"Default Theme Change",slug:"default-theme-change",children:[]},{level:3,title:"Official Plugins Change",slug:"official-plugins-change",children:[]},{level:3,title:"Community Themes and Plugins",slug:"community-themes-and-plugins",children:[]}]},{level:2,title:"For Plugin Authors",slug:"for-plugin-authors",children:[]},{level:2,title:"For Theme Authors",slug:"for-theme-authors",children:[]}],git:{updatedTime:1639839959e3,contributors:[{name:"Starzkg",email:"1600337300@qq.com",commits:1},{name:"shentuzhigang",email:"shentuzhigang@moresec.cn",commits:1}]},readingTime:{minutes:4.76,words:1429},filePathRelative:"vuepress-next/guide/migration.md",content:"# Migrating from v1\n\n::: warning\nPlugins and themes of VuePress v1 are not compatible with VuePress v2. You need to update them to corresponding v2 version.\n:::\n\nSome major changes and enhancements of VuePress v2:\n\n- VuePress v2 is now using Vue 3, so make sure your components and other client files are compatible with Vue 3.\n- 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.\n- VuePress v2 add supports both Webpack and Vite as bundler. Now Vite is the default bundler, while you can still choose 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.\n\nCore 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.\n\n- If you are a common user, you need to read the guide [for users](#for-users).\n- If you are a plugin author, you need to read the guide [for plugin authors](#for-plugin-authors).\n- If you are a theme author, you need to read the guide [for theme authors](#for-theme-authors).\n\n## For Users\n\n### User Config Change\n\n#### shouldPrefetch\n\nDefault value is changed from `() => true` to `false`.\n\n#### extraWatchFiles\n\nRemoved.\n\nYou can watch files manually in [onWatched](../reference/plugin-api.md#onwatched) hook.\n\n#### plugins\n\nOnly [Babel Style](https://v1.vuepress.vuejs.org/plugin/using-a-plugin.html#babel-style) config is allowed.\n\n[Object Style](https://v1.vuepress.vuejs.org/plugin/using-a-plugin.html#object-style) config is **NOT** supported in v2.\n\n#### patterns\n\nRenamed to `pagePatterns`\n\n#### markdown.lineNumbers\n\nMoved to [markdown.code.lineNumbers](../reference/config.md#markdown-code-linenumbers).\n\nDefault value is changed from `false` to `true`.\n\n#### markdown.slugify\n\nRemoved.\n\nIf you want to change the slugify function anyway, set the following options separately:\n\n- `markdown.anchor.slugify`\n- `markdown.toc.slugify`\n- `markdown.extractHeaders.slugify`\n\n#### markdown.pageSuffix\n\nRemoved.\n\n#### markdown.externalLinks\n\nMoved to [markdown.links.externalAttrs](../reference/config.md#markdown-links).\n\n#### markdown.toc\n\nChanged.\n\nSee [Config > markdown.toc](../reference/config.md#markdown-toc)\n\n#### markdown.plugins\n\nRemoved.\n\nUse markdown-it plugins in [extendsMarkdown](../reference/plugin-api.md#extendsmarkdown) hook.\n\n#### markdown.extendMarkdown\n\nRemoved.\n\nUse [extendsMarkdown](../reference/plugin-api.md#extendsmarkdown) hook.\n\n#### markdown.extractHeaders\n\nChanged.\n\nSee [Config > markdown.extractHeaders](../reference/config.md#markdown-extractheaders)\n\n#### Webpack Related Configs\n\nAll webpack related configs are moved to options of `@vuepress/bundler-webpack`, so you should set them in [bundlerConfig](../reference/config.md#bundlerconfig):\n\n- `postcss`: moved to `bundlerConfig.postcss`\n- `stylus`: moved to `bundlerConfig.stylus`\n- `scss`: moved to `bundlerConfig.scss`\n- `sass`: moved to `bundlerConfig.sass`\n- `less`: moved to `bundlerConfig.less`\n- `chainWebpack`: moved to `bundlerConfig.chainWebpack`\n- `configureWebpack`: moved to `bundlerConfig.configureWebpack`\n- `evergreen`: moved to `bundlerConfig.evergreen`, and default value is changed from `false` to `true`.\n\nSee [Bundlers > Webpack](../reference/bundler/webpack.md)\n\n### Frontmatter Change\n\n#### meta\n\nRemoved.\n\nUse [head](../reference/frontmatter.md#head) instead. For example:\n\n```yaml\nhead:\n  - - meta\n    - name: foo\n      content: bar\n  - - link\n    - rel: canonical\n      href: foobar\n  - - script\n    - {}\n    - console.log('hello from frontmatter');\n```\n\nHas the same structure with:\n\n```js\n// .vuepress/config.js\nmodule.exports = {\n  // ...\n  head: [\n    ['meta', { name: 'foo', content: 'bar' }],\n    ['link', { rel: 'canonical', href: 'foobar' }],\n    ['script', {}, `console.log('hello from frontmatter');`],\n  ],\n  // ...\n}\n```\n\n### Permalink Patterns Change\n\n- `:i_month`: removed\n- `:i_day`: removed\n- `:minutes`: removed (undocumented in v1)\n- `:seconds`: removed (undocumented in v1)\n- `:regular`: renamed to `:raw`\n\nSee [Frontmatter > permalinkPattern](../reference/frontmatter.md#permalinkpattern).\n\n### Palette System Change\n\nThe stylus palette system of VuePress v1 (i.e. `styles/palette.styl` and `styles/index.styl`) is no longer provided by VuePress Core.\n\nThe palette system is extracted to [@vuepress/plugin-palette](../reference/plugin/palette.md).\n\nTheme authors can use their own way to allow users to customize styles, and not be limited with stylus.\n\nIf you are using default theme, the palette system is still available but migrated to SASS, while most variables have been migrated to CSS variables. See [Default Theme > Styles](../reference/default-theme/styles.md).\n\n### Conventional Files Change\n\n#### .vuepress/enhanceApp.js\n\nRenamed to `.vuepress/clientAppEnhance.{js,ts}`.\n\nThe arguments of the function are changed, too.\n\nSee [Client API > defineClientAppEnhance](../reference/client-api.md#defineclientappenhance).\n\n#### .vuepress/components/\n\nFiles in this directory will not be registered as Vue components automatically.\n\nYou need to use [@vuepress/plugin-register-components](../reference/plugin/register-components.md), or register your components manually in `.vuepress/clientAppEnhance.{js,ts}`.\n\n#### .vuepress/theme/\n\nThis directory will not be used as local theme implicitly if it is existed.\n\nYou need to set the path to the local theme explicitly via [theme](../reference/config.md#theme) option.\n\n### Markdown slot Change\n\nMarkdown slot is no longer supported.\n\n### Plugin API Change\n\n- `plugins`: removed\n- `ready`: renamed to `onPrepared`\n- `updated`: renamed to `onWatched`\n- `generated`: renamed to `onGenerated`\n- `additionalPages`: removed, use `app.pages.push(createPage())` in `onInitialized` hook\n- `clientDynamicModules`: removed, use `app.writeTemp()` in `onPrepared` hook\n- `enhanceAppFiles`: renamed to `clientAppEnhanceFiles`\n- `globalUIComponents`: renamed to `clientAppRootComponentFiles`\n- `clientRootMixin`: renamed to`clientAppSetupFiles`\n- `extendMarkdown`: renamed to `extendsMarkdown`\n- `chainMarkdown`: removed\n- `extendPageData`: renamed to `extendsPage`\n- `extendsCli`: removed\n- `configureWebpack`: removed\n- `chainWebpack`: removed\n- `beforeDevServer`: removed\n- `afterDevServer`: removed\n\nSee [Plugin API](../reference/plugin-api.md).\n\n### Theme API Change\n\n#### layouts\n\nNow you need to specify the layouts directory or layout components manually.\n\nSee [Theme API > layouts](../reference/theme-api.md#layouts).\n\n#### extend\n\nRenamed to `extends`.\n\nYou can still inherit a parent theme with `extends: 'parent-theme'`, which will extends the plugins, layouts, etc.\n\nThe `@theme` and `@parent-theme` aliases are not available now.\n\nNow multi-level theme inheritance is supported.\n\n### CLI Change\n\n#### eject command\n\nRemoved.\n\n#### cache options\n\n- `-c, --cache [cache]`: changed to `--cache <cache>`, which means that the shorthand `-c` is not for `cache` option, and the value of `cache` option is not optional.\n- `--no-cache`: renamed to `--clean-cache` .\n\n### Default Theme Change\n\n#### Built-in Components\n\n- `<CodeGroup />` and `<CodeBlock />` renamed to `<CodeGroup />` and `<CodeGroupItem />`\n- `<Badge />`\n  - `$badgeErrorColor` palette variable renamed to `$badgeDangerColor`\n  - `type` prop only accepts `tip`, `warning` and `danger` now\n\n#### Palette System\n\nThe palette system of default theme has migrated to SASS and CSS variables.\n\nSee [Default Theme > Styles](../reference/default-theme/styles.md).\n\n#### Theme Config\n\nDefault theme config has changed a lot.\n\nSee [Default Theme > Config](../reference/default-theme/config.md).\n\n### Official Plugins Change\n\nSee [Official Plugins](../reference/plugin/README.md).\n\n### Community Themes and Plugins\n\nThemes and plugins of v1 is not compatible with v2.\n\nPlease make sure that those themes and plugins you are using have supported v2, and refer to their own documentation for migration guide.\n\n## For Plugin Authors\n\nRead the [Plugin API Change](#plugin-api-change) first.\n\nSome major breaking changes:\n\n- You cannot use other plugins in your plugin anymore, which avoids lots of potential issues caused by plugin nesting. If your plugin depends on other plugins, you should list them in the docs.\n- Most of the v1 hooks have equivalents in v2. The only exception is `extendsCli`, which has been removed.\n- Webpack related hooks are removed, because VuePress Core has decoupled with webpack. If you still want to modify webpack config in plugin, try modifying `app.options.bundlerConfig` directly.\n\n## For Theme Authors\n\nRead the [Plugin API Change](#plugin-api-change) and [Theme API Change](#theme-api-change) first.\n\nAlthough we do not allow using other plugins in a plugin, you can still use plugins in your theme.\n\nSome major breaking changes:\n\n- There is no **conventional theme directory structure** anymore.\n  - The file `theme/enhanceApp.js` or `theme/clientAppEnhance.{js,ts}` will not be used as client app enhance file implicitly. You need to specify it explicitly in `clientAppEnhanceFiles` hook.\n  - Files in `theme/global-components/` directory will not be registered as Vue components automatically. You need to use [@vuepress/plugin-register-components](../reference/plugin/register-components.md), or register components manually in `clientAppEnhance.{js,ts}`.\n  - Files in `theme/layouts/` directory will not be registered as layout components automatically. You need to specify it explicitly in `layouts` option.\n  - Files in `theme/templates/` directory will not be used as dev / ssr template automatically.\n  - Always provide a theme entry file, and do not use `\"main\": \"layouts/Layout.vue\"` as the theme entry.\n- Stylus is no longer the default CSS pre-processor, and the stylus palette system is not embedded. If you still want to use similar palette system as v1, [@vuepress/plugin-palette](../reference/plugin/palette.md) may help.\n- Markdown code blocks syntax highlighting by Prism.js is not embedded by default. You can use either [@vuepress/plugin-prismjs](../reference/plugin/prismjs.md) or [@vuepress/plugin-shiki](../reference/plugin/shiki.md), or implement syntax highlighting in your own way.\n- For scalability concern, `$site.pages` is not available any more.\n"}},5962:(e,n,a)=>{a.r(n),a.d(n,{default:()=>Cn});var o=a(66252);const t=(0,o.uE)('<h1 id="migrating-from-v1" tabindex="-1"><a class="header-anchor" href="#migrating-from-v1" aria-hidden="true">#</a> Migrating from v1</h1><div class="custom-container warning"><p class="custom-container-title">WARNING</p><p>Plugins and themes of VuePress v1 are not compatible with VuePress v2. You need to update them to corresponding v2 version.</p></div><p>Some major changes and enhancements of VuePress v2:</p><ul><li>VuePress v2 is now using Vue 3, so make sure your components and other client files are compatible with Vue 3.</li><li>VuePress v2 is developed with TypeScript, so it provides better TS support now. It&#39;s highly recommended to use TypeScript to develop plugins and themes. VuePress config file also supports TypeScript, and you can use <code>.vuepress/config.ts</code> directly.</li><li>VuePress v2 add supports both Webpack and Vite as bundler. Now Vite is the default bundler, while you can still choose 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.</li></ul><p>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.</p><ul><li>If you are a common user, you need to read the guide <a href="#for-users">for users</a>.</li><li>If you are a plugin author, you need to read the guide <a href="#for-plugin-authors">for plugin authors</a>.</li><li>If you are a theme author, you need to read the guide <a href="#for-theme-authors">for theme authors</a>.</li></ul><h2 id="for-users" tabindex="-1"><a class="header-anchor" href="#for-users" aria-hidden="true">#</a> For Users</h2><h3 id="user-config-change" tabindex="-1"><a class="header-anchor" href="#user-config-change" aria-hidden="true">#</a> User Config Change</h3><h4 id="shouldprefetch" tabindex="-1"><a class="header-anchor" href="#shouldprefetch" aria-hidden="true">#</a> shouldPrefetch</h4><p>Default value is changed from <code>() =&gt; true</code> to <code>false</code>.</p><h4 id="extrawatchfiles" tabindex="-1"><a class="header-anchor" href="#extrawatchfiles" aria-hidden="true">#</a> extraWatchFiles</h4><p>Removed.</p>',12),s=(0,o.Uk)("You can watch files manually in "),l=(0,o.Uk)("onWatched"),r=(0,o.Uk)(" hook."),i=(0,o.uE)('<h4 id="plugins" tabindex="-1"><a class="header-anchor" href="#plugins" aria-hidden="true">#</a> plugins</h4><p>Only <a href="https://v1.vuepress.vuejs.org/plugin/using-a-plugin.html#babel-style" target="_blank" rel="noopener noreferrer">Babel Style</a> config is allowed.</p><p><a href="https://v1.vuepress.vuejs.org/plugin/using-a-plugin.html#object-style" target="_blank" rel="noopener noreferrer">Object Style</a> config is <strong>NOT</strong> supported in v2.</p><h4 id="patterns" tabindex="-1"><a class="header-anchor" href="#patterns" aria-hidden="true">#</a> patterns</h4><p>Renamed to <code>pagePatterns</code></p><h4 id="markdown-linenumbers" tabindex="-1"><a class="header-anchor" href="#markdown-linenumbers" aria-hidden="true">#</a> markdown.lineNumbers</h4>',6),d=(0,o.Uk)("Moved to "),c=(0,o.Uk)("markdown.code.lineNumbers"),p=(0,o.Uk)("."),u=(0,o.uE)('<p>Default value is changed from <code>false</code> to <code>true</code>.</p><h4 id="markdown-slugify" tabindex="-1"><a class="header-anchor" href="#markdown-slugify" aria-hidden="true">#</a> markdown.slugify</h4><p>Removed.</p><p>If you want to change the slugify function anyway, set the following options separately:</p><ul><li><code>markdown.anchor.slugify</code></li><li><code>markdown.toc.slugify</code></li><li><code>markdown.extractHeaders.slugify</code></li></ul><h4 id="markdown-pagesuffix" tabindex="-1"><a class="header-anchor" href="#markdown-pagesuffix" aria-hidden="true">#</a> markdown.pageSuffix</h4><p>Removed.</p><h4 id="markdown-externallinks" tabindex="-1"><a class="header-anchor" href="#markdown-externallinks" aria-hidden="true">#</a> markdown.externalLinks</h4>',8),h=(0,o.Uk)("Moved to "),m=(0,o.Uk)("markdown.links.externalAttrs"),g=(0,o.Uk)("."),f=(0,o._)("h4",{id:"markdown-toc",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#markdown-toc","aria-hidden":"true"},"#"),(0,o.Uk)(" markdown.toc")],-1),y=(0,o._)("p",null,"Changed.",-1),k=(0,o.Uk)("See "),v=(0,o.Uk)("Config > markdown.toc"),b=(0,o._)("h4",{id:"markdown-plugins",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#markdown-plugins","aria-hidden":"true"},"#"),(0,o.Uk)(" markdown.plugins")],-1),w=(0,o._)("p",null,"Removed.",-1),C=(0,o.Uk)("Use markdown-it plugins in "),x=(0,o.Uk)("extendsMarkdown"),D=(0,o.Uk)(" hook."),U=(0,o._)("h4",{id:"markdown-extendmarkdown",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#markdown-extendmarkdown","aria-hidden":"true"},"#"),(0,o.Uk)(" markdown.extendMarkdown")],-1),_=(0,o._)("p",null,"Removed.",-1),P=(0,o.Uk)("Use "),S=(0,o.Uk)("extendsMarkdown"),A=(0,o.Uk)(" hook."),T=(0,o._)("h4",{id:"markdown-extractheaders",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#markdown-extractheaders","aria-hidden":"true"},"#"),(0,o.Uk)(" markdown.extractHeaders")],-1),W=(0,o._)("p",null,"Changed.",-1),E=(0,o.Uk)("See "),I=(0,o.Uk)("Config > markdown.extractHeaders"),F=(0,o._)("h4",{id:"webpack-related-configs",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#webpack-related-configs","aria-hidden":"true"},"#"),(0,o.Uk)(" Webpack Related Configs")],-1),j=(0,o.Uk)("All webpack related configs are moved to options of "),V=(0,o._)("code",null,"@vuepress/bundler-webpack",-1),R=(0,o.Uk)(", so you should set them in "),M=(0,o.Uk)("bundlerConfig"),Y=(0,o.Uk)(":"),N=(0,o.uE)("<ul><li><code>postcss</code>: moved to <code>bundlerConfig.postcss</code></li><li><code>stylus</code>: moved to <code>bundlerConfig.stylus</code></li><li><code>scss</code>: moved to <code>bundlerConfig.scss</code></li><li><code>sass</code>: moved to <code>bundlerConfig.sass</code></li><li><code>less</code>: moved to <code>bundlerConfig.less</code></li><li><code>chainWebpack</code>: moved to <code>bundlerConfig.chainWebpack</code></li><li><code>configureWebpack</code>: moved to <code>bundlerConfig.configureWebpack</code></li><li><code>evergreen</code>: moved to <code>bundlerConfig.evergreen</code>, and default value is changed from <code>false</code> to <code>true</code>.</li></ul>",1),B=(0,o.Uk)("See "),O=(0,o.Uk)("Bundlers > Webpack"),z=(0,o._)("h3",{id:"frontmatter-change",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#frontmatter-change","aria-hidden":"true"},"#"),(0,o.Uk)(" Frontmatter Change")],-1),G=(0,o._)("h4",{id:"meta",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#meta","aria-hidden":"true"},"#"),(0,o.Uk)(" meta")],-1),H=(0,o._)("p",null,"Removed.",-1),L=(0,o.Uk)("Use "),$=(0,o.Uk)("head"),q=(0,o.Uk)(" instead. For example:"),Z=(0,o.uE)('<div class="language-yaml ext-yml line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#569CD6;">head</span><span style="color:#D4D4D4;">:</span></span>\n<span class="line"><span style="color:#D4D4D4;">  - - </span><span style="color:#CE9178;">meta</span></span>\n<span class="line"><span style="color:#D4D4D4;">    - </span><span style="color:#569CD6;">name</span><span style="color:#D4D4D4;">: </span><span style="color:#CE9178;">foo</span></span>\n<span class="line"><span style="color:#D4D4D4;">      </span><span style="color:#569CD6;">content</span><span style="color:#D4D4D4;">: </span><span style="color:#CE9178;">bar</span></span>\n<span class="line"><span style="color:#D4D4D4;">  - - </span><span style="color:#CE9178;">link</span></span>\n<span class="line"><span style="color:#D4D4D4;">    - </span><span style="color:#569CD6;">rel</span><span style="color:#D4D4D4;">: </span><span style="color:#CE9178;">canonical</span></span>\n<span class="line"><span style="color:#D4D4D4;">      </span><span style="color:#569CD6;">href</span><span style="color:#D4D4D4;">: </span><span style="color:#CE9178;">foobar</span></span>\n<span class="line"><span style="color:#D4D4D4;">  - - </span><span style="color:#CE9178;">script</span></span>\n<span class="line"><span style="color:#D4D4D4;">    - {}</span></span>\n<span class="line"><span style="color:#D4D4D4;">    - </span><span style="color:#CE9178;">console.log(&#39;hello from frontmatter&#39;);</span></span>\n<span class="line"></span></code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>Has the same structure with:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#6A9955;">// .vuepress/config.js</span></span>\n<span class="line"><span style="color:#4EC9B0;">module</span><span style="color:#D4D4D4;">.</span><span style="color:#4EC9B0;">exports</span><span style="color:#D4D4D4;"> = {</span></span>\n<span class="line"><span style="color:#D4D4D4;">  </span><span style="color:#6A9955;">// ...</span></span>\n<span class="line"><span style="color:#D4D4D4;">  </span><span style="color:#9CDCFE;">head:</span><span style="color:#D4D4D4;"> [</span></span>\n<span class="line"><span style="color:#D4D4D4;">    [</span><span style="color:#CE9178;">&#39;meta&#39;</span><span style="color:#D4D4D4;">, { </span><span style="color:#9CDCFE;">name:</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;foo&#39;</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">content:</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;bar&#39;</span><span style="color:#D4D4D4;"> }],</span></span>\n<span class="line"><span style="color:#D4D4D4;">    [</span><span style="color:#CE9178;">&#39;link&#39;</span><span style="color:#D4D4D4;">, { </span><span style="color:#9CDCFE;">rel:</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;canonical&#39;</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">href:</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;foobar&#39;</span><span style="color:#D4D4D4;"> }],</span></span>\n<span class="line"><span style="color:#D4D4D4;">    [</span><span style="color:#CE9178;">&#39;script&#39;</span><span style="color:#D4D4D4;">, {}, </span><span style="color:#CE9178;">`console.log(&#39;hello from frontmatter&#39;);`</span><span style="color:#D4D4D4;">],</span></span>\n<span class="line"><span style="color:#D4D4D4;">  ],</span></span>\n<span class="line"><span style="color:#D4D4D4;">  </span><span style="color:#6A9955;">// ...</span></span>\n<span class="line"><span style="color:#D4D4D4;">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="permalink-patterns-change" tabindex="-1"><a class="header-anchor" href="#permalink-patterns-change" aria-hidden="true">#</a> Permalink Patterns Change</h3><ul><li><code>:i_month</code>: removed</li><li><code>:i_day</code>: removed</li><li><code>:minutes</code>: removed (undocumented in v1)</li><li><code>:seconds</code>: removed (undocumented in v1)</li><li><code>:regular</code>: renamed to <code>:raw</code></li></ul>',5),J=(0,o.Uk)("See "),K=(0,o.Uk)("Frontmatter > permalinkPattern"),Q=(0,o.Uk)("."),X=(0,o._)("h3",{id:"palette-system-change",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#palette-system-change","aria-hidden":"true"},"#"),(0,o.Uk)(" Palette System Change")],-1),ee=(0,o._)("p",null,[(0,o.Uk)("The stylus palette system of VuePress v1 (i.e. "),(0,o._)("code",null,"styles/palette.styl"),(0,o.Uk)(" and "),(0,o._)("code",null,"styles/index.styl"),(0,o.Uk)(") is no longer provided by VuePress Core.")],-1),ne=(0,o.Uk)("The palette system is extracted to "),ae=(0,o.Uk)("@vuepress/plugin-palette"),oe=(0,o.Uk)("."),te=(0,o._)("p",null,"Theme authors can use their own way to allow users to customize styles, and not be limited with stylus.",-1),se=(0,o.Uk)("If you are using default theme, the palette system is still available but migrated to SASS, while most variables have been migrated to CSS variables. See "),le=(0,o.Uk)("Default Theme > Styles"),re=(0,o.Uk)("."),ie=(0,o._)("h3",{id:"conventional-files-change",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#conventional-files-change","aria-hidden":"true"},"#"),(0,o.Uk)(" Conventional Files Change")],-1),de=(0,o._)("h4",{id:"vuepress-enhanceapp-js",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#vuepress-enhanceapp-js","aria-hidden":"true"},"#"),(0,o.Uk)(" .vuepress/enhanceApp.js")],-1),ce=(0,o._)("p",null,[(0,o.Uk)("Renamed to "),(0,o._)("code",null,".vuepress/clientAppEnhance.{js,ts}"),(0,o.Uk)(".")],-1),pe=(0,o._)("p",null,"The arguments of the function are changed, too.",-1),ue=(0,o.Uk)("See "),he=(0,o.Uk)("Client API > defineClientAppEnhance"),me=(0,o.Uk)("."),ge=(0,o._)("h4",{id:"vuepress-components",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#vuepress-components","aria-hidden":"true"},"#"),(0,o.Uk)(" .vuepress/components/")],-1),fe=(0,o._)("p",null,"Files in this directory will not be registered as Vue components automatically.",-1),ye=(0,o.Uk)("You need to use "),ke=(0,o.Uk)("@vuepress/plugin-register-components"),ve=(0,o.Uk)(", or register your components manually in "),be=(0,o._)("code",null,".vuepress/clientAppEnhance.{js,ts}",-1),we=(0,o.Uk)("."),Ce=(0,o._)("h4",{id:"vuepress-theme",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#vuepress-theme","aria-hidden":"true"},"#"),(0,o.Uk)(" .vuepress/theme/")],-1),xe=(0,o._)("p",null,"This directory will not be used as local theme implicitly if it is existed.",-1),De=(0,o.Uk)("You need to set the path to the local theme explicitly via "),Ue=(0,o.Uk)("theme"),_e=(0,o.Uk)(" option."),Pe=(0,o.uE)('<h3 id="markdown-slot-change" tabindex="-1"><a class="header-anchor" href="#markdown-slot-change" aria-hidden="true">#</a> Markdown slot Change</h3><p>Markdown slot is no longer supported.</p><h3 id="plugin-api-change" tabindex="-1"><a class="header-anchor" href="#plugin-api-change" aria-hidden="true">#</a> Plugin API Change</h3><ul><li><code>plugins</code>: removed</li><li><code>ready</code>: renamed to <code>onPrepared</code></li><li><code>updated</code>: renamed to <code>onWatched</code></li><li><code>generated</code>: renamed to <code>onGenerated</code></li><li><code>additionalPages</code>: removed, use <code>app.pages.push(createPage())</code> in <code>onInitialized</code> hook</li><li><code>clientDynamicModules</code>: removed, use <code>app.writeTemp()</code> in <code>onPrepared</code> hook</li><li><code>enhanceAppFiles</code>: renamed to <code>clientAppEnhanceFiles</code></li><li><code>globalUIComponents</code>: renamed to <code>clientAppRootComponentFiles</code></li><li><code>clientRootMixin</code>: renamed to<code>clientAppSetupFiles</code></li><li><code>extendMarkdown</code>: renamed to <code>extendsMarkdown</code></li><li><code>chainMarkdown</code>: removed</li><li><code>extendPageData</code>: renamed to <code>extendsPage</code></li><li><code>extendsCli</code>: removed</li><li><code>configureWebpack</code>: removed</li><li><code>chainWebpack</code>: removed</li><li><code>beforeDevServer</code>: removed</li><li><code>afterDevServer</code>: removed</li></ul>',4),Se=(0,o.Uk)("See "),Ae=(0,o.Uk)("Plugin API"),Te=(0,o.Uk)("."),We=(0,o._)("h3",{id:"theme-api-change",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#theme-api-change","aria-hidden":"true"},"#"),(0,o.Uk)(" Theme API Change")],-1),Ee=(0,o._)("h4",{id:"layouts",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#layouts","aria-hidden":"true"},"#"),(0,o.Uk)(" layouts")],-1),Ie=(0,o._)("p",null,"Now you need to specify the layouts directory or layout components manually.",-1),Fe=(0,o.Uk)("See "),je=(0,o.Uk)("Theme API > layouts"),Ve=(0,o.Uk)("."),Re=(0,o.uE)('<h4 id="extend" tabindex="-1"><a class="header-anchor" href="#extend" aria-hidden="true">#</a> extend</h4><p>Renamed to <code>extends</code>.</p><p>You can still inherit a parent theme with <code>extends: &#39;parent-theme&#39;</code>, which will extends the plugins, layouts, etc.</p><p>The <code>@theme</code> and <code>@parent-theme</code> aliases are not available now.</p><p>Now multi-level theme inheritance is supported.</p><h3 id="cli-change" tabindex="-1"><a class="header-anchor" href="#cli-change" aria-hidden="true">#</a> CLI Change</h3><h4 id="eject-command" tabindex="-1"><a class="header-anchor" href="#eject-command" aria-hidden="true">#</a> eject command</h4><p>Removed.</p><h4 id="cache-options" tabindex="-1"><a class="header-anchor" href="#cache-options" aria-hidden="true">#</a> cache options</h4><ul><li><code>-c, --cache [cache]</code>: changed to <code>--cache &lt;cache&gt;</code>, which means that the shorthand <code>-c</code> is not for <code>cache</code> option, and the value of <code>cache</code> option is not optional.</li><li><code>--no-cache</code>: renamed to <code>--clean-cache</code> .</li></ul><h3 id="default-theme-change" tabindex="-1"><a class="header-anchor" href="#default-theme-change" aria-hidden="true">#</a> Default Theme Change</h3><h4 id="built-in-components" tabindex="-1"><a class="header-anchor" href="#built-in-components" aria-hidden="true">#</a> Built-in Components</h4><ul><li><code>&lt;CodeGroup /&gt;</code> and <code>&lt;CodeBlock /&gt;</code> renamed to <code>&lt;CodeGroup /&gt;</code> and <code>&lt;CodeGroupItem /&gt;</code></li><li><code>&lt;Badge /&gt;</code><ul><li><code>$badgeErrorColor</code> palette variable renamed to <code>$badgeDangerColor</code></li><li><code>type</code> prop only accepts <code>tip</code>, <code>warning</code> and <code>danger</code> now</li></ul></li></ul><h4 id="palette-system" tabindex="-1"><a class="header-anchor" href="#palette-system" aria-hidden="true">#</a> Palette System</h4><p>The palette system of default theme has migrated to SASS and CSS variables.</p>',15),Me=(0,o.Uk)("See "),Ye=(0,o.Uk)("Default Theme > Styles"),Ne=(0,o.Uk)("."),Be=(0,o._)("h4",{id:"theme-config",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#theme-config","aria-hidden":"true"},"#"),(0,o.Uk)(" Theme Config")],-1),Oe=(0,o._)("p",null,"Default theme config has changed a lot.",-1),ze=(0,o.Uk)("See "),Ge=(0,o.Uk)("Default Theme > Config"),He=(0,o.Uk)("."),Le=(0,o._)("h3",{id:"official-plugins-change",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#official-plugins-change","aria-hidden":"true"},"#"),(0,o.Uk)(" Official Plugins Change")],-1),$e=(0,o.Uk)("See "),qe=(0,o.Uk)("Official Plugins"),Ze=(0,o.Uk)("."),Je=(0,o.uE)('<h3 id="community-themes-and-plugins" tabindex="-1"><a class="header-anchor" href="#community-themes-and-plugins" aria-hidden="true">#</a> Community Themes and Plugins</h3><p>Themes and plugins of v1 is not compatible with v2.</p><p>Please make sure that those themes and plugins you are using have supported v2, and refer to their own documentation for migration guide.</p><h2 id="for-plugin-authors" tabindex="-1"><a class="header-anchor" href="#for-plugin-authors" aria-hidden="true">#</a> For Plugin Authors</h2><p>Read the <a href="#plugin-api-change">Plugin API Change</a> first.</p><p>Some major breaking changes:</p><ul><li>You cannot use other plugins in your plugin anymore, which avoids lots of potential issues caused by plugin nesting. If your plugin depends on other plugins, you should list them in the docs.</li><li>Most of the v1 hooks have equivalents in v2. The only exception is <code>extendsCli</code>, which has been removed.</li><li>Webpack related hooks are removed, because VuePress Core has decoupled with webpack. If you still want to modify webpack config in plugin, try modifying <code>app.options.bundlerConfig</code> directly.</li></ul><h2 id="for-theme-authors" tabindex="-1"><a class="header-anchor" href="#for-theme-authors" aria-hidden="true">#</a> For Theme Authors</h2><p>Read the <a href="#plugin-api-change">Plugin API Change</a> and <a href="#theme-api-change">Theme API Change</a> first.</p><p>Although we do not allow using other plugins in a plugin, you can still use plugins in your theme.</p><p>Some major breaking changes:</p>',11),Ke=(0,o.Uk)("There is no "),Qe=(0,o._)("strong",null,"conventional theme directory structure",-1),Xe=(0,o.Uk)(" anymore. "),en=(0,o._)("li",null,[(0,o.Uk)("The file "),(0,o._)("code",null,"theme/enhanceApp.js"),(0,o.Uk)(" or "),(0,o._)("code",null,"theme/clientAppEnhance.{js,ts}"),(0,o.Uk)(" will not be used as client app enhance file implicitly. You need to specify it explicitly in "),(0,o._)("code",null,"clientAppEnhanceFiles"),(0,o.Uk)(" hook.")],-1),nn=(0,o.Uk)("Files in "),an=(0,o._)("code",null,"theme/global-components/",-1),on=(0,o.Uk)(" directory will not be registered as Vue components automatically. You need to use "),tn=(0,o.Uk)("@vuepress/plugin-register-components"),sn=(0,o.Uk)(", or register components manually in "),ln=(0,o._)("code",null,"clientAppEnhance.{js,ts}",-1),rn=(0,o.Uk)("."),dn=(0,o._)("li",null,[(0,o.Uk)("Files in "),(0,o._)("code",null,"theme/layouts/"),(0,o.Uk)(" directory will not be registered as layout components automatically. You need to specify it explicitly in "),(0,o._)("code",null,"layouts"),(0,o.Uk)(" option.")],-1),cn=(0,o._)("li",null,[(0,o.Uk)("Files in "),(0,o._)("code",null,"theme/templates/"),(0,o.Uk)(" directory will not be used as dev / ssr template automatically.")],-1),pn=(0,o._)("li",null,[(0,o.Uk)("Always provide a theme entry file, and do not use "),(0,o._)("code",null,'"main": "layouts/Layout.vue"'),(0,o.Uk)(" as the theme entry.")],-1),un=(0,o.Uk)("Stylus is no longer the default CSS pre-processor, and the stylus palette system is not embedded. If you still want to use similar palette system as v1, "),hn=(0,o.Uk)("@vuepress/plugin-palette"),mn=(0,o.Uk)(" may help."),gn=(0,o.Uk)("Markdown code blocks syntax highlighting by Prism.js is not embedded by default. You can use either "),fn=(0,o.Uk)("@vuepress/plugin-prismjs"),yn=(0,o.Uk)(" or "),kn=(0,o.Uk)("@vuepress/plugin-shiki"),vn=(0,o.Uk)(", or implement syntax highlighting in your own way."),bn=(0,o._)("li",null,[(0,o.Uk)("For scalability concern, "),(0,o._)("code",null,"$site.pages"),(0,o.Uk)(" is not available any more.")],-1),wn={},Cn=(0,a(83744).Z)(wn,[["render",function(e,n){const a=(0,o.up)("RouterLink");return(0,o.wg)(),(0,o.iD)(o.HY,null,[t,(0,o._)("p",null,[s,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin-api.html#onwatched"},{default:(0,o.w5)((()=>[l])),_:1}),r]),i,(0,o._)("p",null,[d,(0,o.Wm)(a,{to:"/vuepress-next/reference/config.html#markdown-code-linenumbers"},{default:(0,o.w5)((()=>[c])),_:1}),p]),u,(0,o._)("p",null,[h,(0,o.Wm)(a,{to:"/vuepress-next/reference/config.html#markdown-links"},{default:(0,o.w5)((()=>[m])),_:1}),g]),f,y,(0,o._)("p",null,[k,(0,o.Wm)(a,{to:"/vuepress-next/reference/config.html#markdown-toc"},{default:(0,o.w5)((()=>[v])),_:1})]),b,w,(0,o._)("p",null,[C,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin-api.html#extendsmarkdown"},{default:(0,o.w5)((()=>[x])),_:1}),D]),U,_,(0,o._)("p",null,[P,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin-api.html#extendsmarkdown"},{default:(0,o.w5)((()=>[S])),_:1}),A]),T,W,(0,o._)("p",null,[E,(0,o.Wm)(a,{to:"/vuepress-next/reference/config.html#markdown-extractheaders"},{default:(0,o.w5)((()=>[I])),_:1})]),F,(0,o._)("p",null,[j,V,R,(0,o.Wm)(a,{to:"/vuepress-next/reference/config.html#bundlerconfig"},{default:(0,o.w5)((()=>[M])),_:1}),Y]),N,(0,o._)("p",null,[B,(0,o.Wm)(a,{to:"/vuepress-next/reference/bundler/webpack.html"},{default:(0,o.w5)((()=>[O])),_:1})]),z,G,H,(0,o._)("p",null,[L,(0,o.Wm)(a,{to:"/vuepress-next/reference/frontmatter.html#head"},{default:(0,o.w5)((()=>[$])),_:1}),q]),Z,(0,o._)("p",null,[J,(0,o.Wm)(a,{to:"/vuepress-next/reference/frontmatter.html#permalinkpattern"},{default:(0,o.w5)((()=>[K])),_:1}),Q]),X,ee,(0,o._)("p",null,[ne,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin/palette.html"},{default:(0,o.w5)((()=>[ae])),_:1}),oe]),te,(0,o._)("p",null,[se,(0,o.Wm)(a,{to:"/vuepress-next/reference/default-theme/styles.html"},{default:(0,o.w5)((()=>[le])),_:1}),re]),ie,de,ce,pe,(0,o._)("p",null,[ue,(0,o.Wm)(a,{to:"/vuepress-next/reference/client-api.html#defineclientappenhance"},{default:(0,o.w5)((()=>[he])),_:1}),me]),ge,fe,(0,o._)("p",null,[ye,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin/register-components.html"},{default:(0,o.w5)((()=>[ke])),_:1}),ve,be,we]),Ce,xe,(0,o._)("p",null,[De,(0,o.Wm)(a,{to:"/vuepress-next/reference/config.html#theme"},{default:(0,o.w5)((()=>[Ue])),_:1}),_e]),Pe,(0,o._)("p",null,[Se,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin-api.html"},{default:(0,o.w5)((()=>[Ae])),_:1}),Te]),We,Ee,Ie,(0,o._)("p",null,[Fe,(0,o.Wm)(a,{to:"/vuepress-next/reference/theme-api.html#layouts"},{default:(0,o.w5)((()=>[je])),_:1}),Ve]),Re,(0,o._)("p",null,[Me,(0,o.Wm)(a,{to:"/vuepress-next/reference/default-theme/styles.html"},{default:(0,o.w5)((()=>[Ye])),_:1}),Ne]),Be,Oe,(0,o._)("p",null,[ze,(0,o.Wm)(a,{to:"/vuepress-next/reference/default-theme/config.html"},{default:(0,o.w5)((()=>[Ge])),_:1}),He]),Le,(0,o._)("p",null,[$e,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin/"},{default:(0,o.w5)((()=>[qe])),_:1}),Ze]),Je,(0,o._)("ul",null,[(0,o._)("li",null,[Ke,Qe,Xe,(0,o._)("ul",null,[en,(0,o._)("li",null,[nn,an,on,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin/register-components.html"},{default:(0,o.w5)((()=>[tn])),_:1}),sn,ln,rn]),dn,cn,pn])]),(0,o._)("li",null,[un,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin/palette.html"},{default:(0,o.w5)((()=>[hn])),_:1}),mn]),(0,o._)("li",null,[gn,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin/prismjs.html"},{default:(0,o.w5)((()=>[fn])),_:1}),yn,(0,o.Wm)(a,{to:"/vuepress-next/reference/plugin/shiki.html"},{default:(0,o.w5)((()=>[kn])),_:1}),vn]),bn])],64)}]])}}]);