diff --git a/.github/contributing/writing-guide.md b/.github/contributing/writing-guide.md
index 44320ee1ab..a686f0924e 100644
--- a/.github/contributing/writing-guide.md
+++ b/.github/contributing/writing-guide.md
@@ -10,15 +10,15 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
- Cognitive capacity is **depleted more slowly** when we help them feel consistently smart, powerful, and curious. Breaking things down into digestible pieces and minding the flow of the document can help keep them in this state.
- **Always try to see from the user's perspective.** When we understand something thoroughly, it becomes obvious to us. This is called _the curse of knowledge_. In order to write good documentation, try to remember what you first needed to know when learning this concept. What jargon did you need to learn? What did you misunderstand? What took a long time to really grasp? Good documentation meets users where they are. It can be helpful to practice explaining the concept to people in person before.
- **Describe the _problem_ first, then the solution.** Before showing how a feature works, it's important to explain why it exists. Otherwise, users won't have the context to know if this information is important to them (is it a problem they experience?) or what prior knowledge/experience to connect it to.
-- **While writing, don't be afraid to ask questions**, _especially_ if you're afraid they might be "dumb". Being vulnerable is hard, but it's the only way for us to more fully understand what we need to explain.
-- **Be involved in feature discussions.** The best APIs come from documentation-driven development, where we build features that are easy to explain, rather than trying to figure out how to explain them later. Asking questions (especially "dumb" questions) earlier often helps reveal confusions, inconsistencies, and problematic behavior before a breaking change would be required to fix them.
+- **While writing, don't be afraid to ask questions**, _especially_ if you're afraid that your questions might be "foolish". Being vulnerable is hard, but it's the only way for us to more fully understand what we need to explain.
+- **Be involved in feature discussions.** The best APIs come from documentation-driven development, where we build features that are easy to explain, rather than trying to figure out how to explain them later. Asking questions (especially "foolish" questions) earlier often helps reveal confusions, inconsistencies, and problematic behavior before a breaking change would be required to fix them.
## Organization
- **Installation/Integration**: Provide a thorough overview of how to integrate the software into as many different kinds of projects as necessary.
- **Introduction/Getting Started**:
- Provide a less than 10 minute overview of the problems the project solves and why it exists.
- - Provide a less than 30 minute overview of the problems the project solves and how, including when and why to use the project and some simple code examples. At the end, link to both to Installation page and the beginning of the Essentials Guide.
+ - Provide a less than 30 minute overview of the problems the project solves and how, including when and why to use the project and some simple code examples. At the end, link to both the Installation page and the beginning of the Essentials Guide.
- **Guide**: Make users feel smart, powerful, and curious, then maintain this state so that users maintain the motivation and cognitive capacity to keep learning more. Guide pages are meant to be read sequentially, so should generally be ordered from the highest to lowest power/effort ratio.
- **Essentials**: It should take no longer than 5 hours to read the Essentials, though shorter is better. Its goal is to provide the 20% of knowledge that will help users handle 80% of use cases. Essentials can link to more advanced guides and the API, though, in most cases, you should avoid such links. When they are provided, you need also provide a context so users are aware if they should follow this link on their first reading. Otherwise, many users end up exhausting their cognitive capacity link-hopping, trying to fully learn every aspect of a feature before moving on, and as a result, never finish that first read-through of the Essentials. Remember that a smooth read is more important than being thorough. We want to give people the information they need to avoid a frustrating experience, but they can always come back and read further, or Google a less common problem when they encounter it.
- **Advanced**: While the Essentials helps people handle ~80% of use cases, subsequent guides help get users to 95% of use cases, plus more detailed information on non-essential features (e.g. transitions, animations), more complex convenience features (e.g. mixins, custom directives), and dev experience improvements (e.g. JSX, plugins). The final 5% of use cases that are more niche, complex, and/or prone to abuse will be left to the cookbook and API reference, which can be linked to from these advanced guides.
@@ -59,9 +59,9 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
- **When referencing a directly following example, use a colon (`:`) to end a sentence**, rather than a period (`.`).
- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). 
- Source: [The Serial (Oxford) Comma: When and Why To Use It](https://www.inkonhand.com/2015/10/the-serial-oxford-comma-when-and-why-to-use-it/)
-- **When referencing the name of a project, use the name that project refers to itself as.** For example, "webpack" and "npm" should both use lowercase as that's how their documentation refers to them.
+- **When referencing the name of a project, use the name that the project refers to itself as.** For example, "webpack" and "npm" should both use lowercase as that's how their documentation refers to them.
- **Use Title Case for headings** - at least for now, since it's what we use through the rest of the docs. There's research suggesting that sentence case (only first word of the heading starts with a capital) is actually superior for legibility and also reduces the cognitive overhead for documentation writers, since they don't have to try to remember whether to capitalize words like "and", "with", and "about".
-- **Don't use emojis (except in discussions).** Emojis are cute and friendly, but they can be a distraction in documentation and some emoji even convey different meanings in different cultures.
+- **Don't use emojis (except in discussions).** Emojis are cute and friendly, but they can be a distraction in documentation and some emojis even convey different meanings in different cultures.
## Iteration & Communication
@@ -85,11 +85,11 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
### Tips, Callouts, Alerts, and Line Highlights
-We have some dedicated styles to denote something that's worth highlighting in a particular way. These are captured [on this page](https://vitepress.vuejs.org/guide/markdown.html#custom-containers). **They are to be used sparingly.**
+We have some dedicated styles to denote something that's worth highlighting in a particular way. These are captured [on this page](https://vitepress.dev/guide/markdown#custom-containers). **They are to be used sparingly.**
-There is a certain temptation to abuse these styles, as one can simply add a change inside a callout. However, this breaks up the flow of reading for the user, and thus, should only be used in special circumstances. Wherever possible, we should attempt to create a narrative and flow within the page to respect the readers cognitive load.
+There is a certain temptation to abuse these styles, as one can simply add a change inside a callout. However, this breaks up the flow of reading for the user and should only be used in special circumstances. Wherever possible, we should attempt to create a narrative and flow within the page to respect the reader's cognitive load.
-Under no circumstances should 2 alerts be used next to one another, it's a sign that we're not able to explain context well enough.
+Under no circumstances should two alerts be used next to one another, it's a sign that we're not able to explain context well enough.
### Contributing
diff --git a/.gitignore b/.gitignore
index b4a9415240..e52da2f480 100644
--- a/.gitignore
+++ b/.gitignore
@@ -95,8 +95,10 @@ pnpm-global
# rollup.js default build output
dist/
-# vuepress build output
-.vuepress/dist
+# vitepress build output
+.vitepress/dist
+.vitepress/cache
+.vitepress/.temp
# Serverless directories
.serverless/
@@ -109,3 +111,6 @@ src/api/index.json
src/examples/data.json
src/tutorial/data.json
draft.md
+
+# folders created by IDE
+.idea
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000..e941d13c20
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+package-manager-strict=false
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..65a7d0588f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+*.vue
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index ee62331614..58486e2fe6 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -1,9 +1,11 @@
import fs from 'fs'
import path from 'path'
-import { defineConfigWithTheme } from 'vitepress'
+import { defineConfigWithTheme, type HeadConfig, type Plugin } from 'vitepress'
import type { Config as ThemeConfig } from '@vue/theme'
+import llmstxt from 'vitepress-plugin-llms'
import baseConfig from '@vue/theme/config'
import { headerPlugin } from './headerMdPlugin'
+// import { textAdPlugin } from './textAdMdPlugin'
const nav: ThemeConfig['nav'] = [
{
@@ -15,6 +17,8 @@ const nav: ThemeConfig['nav'] = [
{ text: 'Examples', link: '/examples/' },
{ text: 'Quick Start', link: '/guide/quick-start' },
// { text: 'Style Guide', link: '/style-guide/' },
+ { text: 'Glossary', link: '/glossary/' },
+ { text: 'Error Reference', link: '/error-reference/' },
{
text: 'Vue 2 Docs',
link: 'https://v2.vuejs.org'
@@ -32,7 +36,7 @@ const nav: ThemeConfig['nav'] = [
},
{
text: 'Playground',
- link: 'https://sfc.vuejs.org'
+ link: 'https://play.vuejs.org'
},
{
text: 'Ecosystem',
@@ -42,7 +46,13 @@ const nav: ThemeConfig['nav'] = [
text: 'Resources',
items: [
{ text: 'Partners', link: '/partners/' },
+ { text: 'Developers', link: '/developers/' },
{ text: 'Themes', link: '/ecosystem/themes' },
+ { text: 'UI Components', link: 'https://ui-libs.vercel.app/' },
+ {
+ text: 'Certification',
+ link: 'https://certificates.dev/vuejs/?ref=vuejs-nav'
+ },
{ text: 'Jobs', link: 'https://vuejobs.com/?ref=vuejs' },
{ text: 'T-Shirt Shop', link: 'https://vue.threadless.com/' }
]
@@ -105,6 +115,7 @@ const nav: ThemeConfig['nav'] = [
link: '/about/community-guide'
},
{ text: 'Code of Conduct', link: '/about/coc' },
+ { text: 'Privacy Policy', link: '/about/privacy' },
{
text: 'The Documentary',
link: 'https://www.youtube.com/watch?v=OrxmtDw4pVI'
@@ -116,9 +127,13 @@ const nav: ThemeConfig['nav'] = [
link: '/sponsor/'
},
{
- text: 'Partners',
- link: '/partners/',
- activeMatch: `^/partners/`
+ text: 'Experts',
+ badge: { text: 'NEW' },
+ activeMatch: `^/(partners|developers)/`,
+ items: [
+ { text: 'Partners', link: '/partners/' },
+ { text: 'Developers', link: '/developers/', badge: { text: 'NEW' } }
+ ]
}
]
@@ -167,15 +182,15 @@ export const sidebar: ThemeConfig['sidebar'] = {
link: '/guide/essentials/event-handling'
},
{ text: 'Form Input Bindings', link: '/guide/essentials/forms' },
- {
- text: 'Lifecycle Hooks',
- link: '/guide/essentials/lifecycle'
- },
{ text: 'Watchers', link: '/guide/essentials/watchers' },
{ text: 'Template Refs', link: '/guide/essentials/template-refs' },
{
text: 'Components Basics',
link: '/guide/essentials/component-basics'
+ },
+ {
+ text: 'Lifecycle Hooks',
+ link: '/guide/essentials/lifecycle'
}
]
},
@@ -313,16 +328,11 @@ export const sidebar: ThemeConfig['sidebar'] = {
{
text: 'Animation Techniques',
link: '/guide/extras/animation'
- },
- {
- text: 'Reactivity Transform',
- link: '/guide/extras/reactivity-transform'
}
// {
// text: 'Building a Library for Vue',
// link: '/guide/extras/building-a-library'
// },
- // { text: 'Custom Renderers', link: '/guide/extras/custom-renderer' },
// {
// text: 'Vue for React Devs',
// link: '/guide/extras/vue-for-react-devs'
@@ -364,6 +374,10 @@ export const sidebar: ThemeConfig['sidebar'] = {
{
text: 'Dependency Injection',
link: '/api/composition-api-dependency-injection'
+ },
+ {
+ text: 'Helpers',
+ link: '/api/composition-api-helpers'
}
]
},
@@ -413,10 +427,12 @@ export const sidebar: ThemeConfig['sidebar'] = {
{
text: 'Advanced APIs',
items: [
+ { text: 'Custom Elements', link: '/api/custom-elements' },
{ text: 'Render Function', link: '/api/render-function' },
{ text: 'Server-Side Rendering', link: '/api/ssr' },
{ text: 'TypeScript Utility Types', link: '/api/utility-types' },
- { text: 'Custom Renderer', link: '/api/custom-renderer' }
+ { text: 'Custom Renderer', link: '/api/custom-renderer' },
+ { text: 'Compile-Time Flags', link: '/api/compile-time-flags' }
]
}
],
@@ -555,42 +571,60 @@ export const sidebar: ThemeConfig['sidebar'] = {
// const i18n: ThemeConfig['i18n'] = {
// }
+function inlineScript(file: string): HeadConfig {
+ return [
+ 'script',
+ {},
+ fs.readFileSync(
+ path.resolve(__dirname, `./inlined-scripts/${file}`),
+ 'utf-8'
+ )
+ ]
+}
+
export default defineConfigWithTheme
The
Progressive
@@ -23,7 +22,7 @@ onMounted(async () => {
user interfaces.
-
API style now defaults to Composition API.
++ Some pages contain different content based on the API style + chosen. Use this switch to toggle between APIs styles. +
+ + ++ Showing content for + {{ preferComposition ? 'Composition' : 'Options' }} API because + {{ + source === 'url-query' + ? 'it is specified by the URL query.' + : 'the target section is only available for that API.' + }} +
++ This is different from your saved preference and will only affect + the current browsing session. +
+ ++ Learn more + +
+ + +- {{ member.location }} -
+No other costs.
+One month trial period, thereafter, one month notice period.
+{{ desc.content }}
+ +
+ {{ partnerConfig.pageHeroBanner.description1 }}
+
+ {{ partnerConfig.pageHeroBanner.description2 }}
+
+
{{ partnerConfig.pageHeroBanner.footer }}
+ +{{ prependText }}
+ +{{ appendText }}
+Code | +Message | +
---|---|
+ | + |
Current component: A
- count: {{ count }} + Count: {{ count }} diff --git a/src/guide/built-ins/keep-alive-demos/CompB.vue b/src/guide/built-ins/keep-alive-demos/CompB.vue index 643a62f4c5..026f707171 100644 --- a/src/guide/built-ins/keep-alive-demos/CompB.vue +++ b/src/guide/built-ins/keep-alive-demos/CompB.vue @@ -1,5 +1,6 @@ diff --git a/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue b/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue index 757feb43e5..97b9006323 100644 --- a/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue +++ b/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue @@ -1,10 +1,11 @@ diff --git a/src/guide/built-ins/keep-alive.md b/src/guide/built-ins/keep-alive.md index fca4e15359..8d202f1876 100644 --- a/src/guide/built-ins/keep-alive.md +++ b/src/guide/built-ins/keep-alive.md @@ -8,7 +8,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue' ## Basic Usage {#basic-usage} -In the Component Basics chapter, we introduced the syntax for [Dynamic Components](/guide/essentials/component-basics.html#dynamic-components), using the `$ npm init vue@latest
- Vue Partners are Vue-team endorsed agencies that provide first-class - Vue consulting and development services. If your company is - interested in being listed as a partner, please - register your interest here. -
-+ Vue Partners are Vue-team endorsed agencies that provide first-class + Vue consulting and development services. If your company is + interested in being listed as a partner, please + register your interest here. +
+ +- Generate leads for new projects, boost your credibility to your - clients, and support the long term sustainability of Vue.js and its - ecosystem. -
- Become a partner -