diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md
index 0b155ac6f8..56d93be663 100644
--- a/src/guide/migration/watch.md
+++ b/src/guide/migration/watch.md
@@ -27,6 +27,6 @@ watch: {
## Migration Strategy
-If you rely on watching array mutations, add the `deep` property to ensure that your callback is triggered correctly.
+If you rely on watching array mutations, add the `deep` option to ensure that your callback is triggered correctly.
[Migration build flag: `WATCH_ARRAY`](migration-build.html#compat-configuration)
diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md
index baddc43a41..bbaef88a95 100644
--- a/src/guide/reactivity-fundamentals.md
+++ b/src/guide/reactivity-fundamentals.md
@@ -1,5 +1,7 @@
# Reactivity Fundamentals
+> This section uses [single-file component](single-file-component.html) syntax for code examples
+
## Declaring Reactive State
To create a reactive state from a JavaScript object, we can use a `reactive` method:
diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index fda002f2e2..902f229421 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -350,7 +350,7 @@ render() {
#### Event Modifiers
-For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after the event name using camel case.
+For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after the event name using camelCase.
For example:
diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 5078f7823a..595fc444a4 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -1,5 +1,7 @@
# Single File Components
+Learn about single file components with a free video lesson on Vue School
+
## Introduction
Vue Single File Components (aka `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC:
@@ -73,7 +75,7 @@ SFC is a defining feature of Vue as a framework, and is the recommended approach
- Static Site Generation (SSG)
- Any non-trivial frontends where a build step can be justified for better development experience (DX).
-That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 5kb subset of Vue optimized for progressive enhancement.
+That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 6kb subset of Vue optimized for progressive enhancement.
## What About Separation of Concerns?
diff --git a/src/guide/ssr/introduction.md b/src/guide/ssr/introduction.md
index 86a50a4142..b8a1ee1c92 100644
--- a/src/guide/ssr/introduction.md
+++ b/src/guide/ssr/introduction.md
@@ -40,7 +40,7 @@ If you're using [webpack](https://webpack.js.org/), you can add prerendering wit
This guide will be very in-depth and assumes you are already familiar with Vue.js itself, and have a decent working knowledge of Node.js and webpack.
-[//]: # 'If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should probably give [Nuxt.js](https://nuxtjs.org/) a try. It's built upon the same Vue stack but abstracts away a lot of the boilerplate, and provides some extra features such as static site generation. However, it may not suit your use case if you need more direct control of your app's structure. Regardless, it would still be beneficial to read through this guide to understand better how things work together.'
+If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should probably give [Nuxt.js](https://nuxtjs.org/) a try. It's built upon the same Vue stack but abstracts away a lot of the boilerplate, and provides some extra features such as static site generation. However, it may not suit your use case if you need more direct control of your app's structure. Regardless, it would still be beneficial to read through this guide to understand better how things work together.
[//]: # 'TODO: As you read along, it would be helpful to refer to the official [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/), which makes use of most of the techniques covered in this guide'
diff --git a/src/guide/ssr/routing.md b/src/guide/ssr/routing.md
index 943bf1389e..e78314bed9 100644
--- a/src/guide/ssr/routing.md
+++ b/src/guide/ssr/routing.md
@@ -8,31 +8,50 @@ It is recommended to use the official [vue-router](https://github.com/vuejs/vue-
```js
// router.js
-import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router'
+import { createRouter } from 'vue-router'
import MyUser from './components/MyUser.vue'
-const isServer = typeof window === 'undefined'
-
-const history = isServer ? createMemoryHistory() : createWebHistory()
-
const routes = [{ path: '/user', component: MyUser }]
-export default function() {
- return createRouter({ routes, history })
+export default function (history) {
+ return createRouter({
+ history,
+ routes
+ })
}
```
-And update our `app.js`, client and server entries:
+And update our client and server entries:
```js
-// app.js
+// entry-client.js
+import { createSSRApp } from 'vue'
+import { createWebHistory } from 'vue-router'
+import createRouter from './router.js'
+import App from './App.vue'
+
+// ...
+
+const app = createSSRApp(App)
+
+const router = createRouter(createWebHistory())
+
+app.use(router)
+
+// ...
+```
+
+```js
+// entry-server.js
import { createSSRApp } from 'vue'
+// server router uses a different history from the client one
+import { createMemoryHistory } from 'vue-router'
+import createRouter from './router.js'
import App from './App.vue'
-import createRouter from './router'
-export default function(args) {
+export default function () {
const app = createSSRApp(App)
- const router = createRouter()
+ const router = createRouter(createMemoryHistory())
app.use(router)
@@ -43,20 +62,6 @@ export default function(args) {
}
```
-```js
-// entry-client.js
-const { app, router } = createApp({
- /*...*/
-})
-```
-
-```js
-// entry-server.js
-const { app, router } = createApp({
- /*...*/
-})
-```
-
## Code-Splitting
Code-splitting, or lazy-loading part of your app, helps reduce the size of assets that need to be downloaded by the browser for the initial render, and can greatly improve TTI (time-to-interactive) for apps with large bundles. The key is "loading just what is needed" for the initial screen.
@@ -74,15 +79,20 @@ const routes = [
]
```
-On both client and server we need to wait for router to resolve async route components ahead of time in order to properly invoke in-component hooks. For this we will be using [router.isReady](https://next.router.vuejs.org/api/#isready) method Let's update our client entry:
+On both client and server we need to wait for the router to resolve async route components ahead of time in order to properly invoke in-component hooks. For this we will be using the [router.isReady](https://next.router.vuejs.org/api/#isready) method. Let's update our client entry:
```js
// entry-client.js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import { createWebHistory } from 'vue-router'
+import createRouter from './router.js'
+import App from './App.vue'
-const { app, router } = createApp({
- /* ... */
-})
+const app = createSSRApp(App)
+
+const router = createRouter(createWebHistory())
+
+app.use(router)
router.isReady().then(() => {
app.mount('#app')
diff --git a/src/guide/ssr/server.md b/src/guide/ssr/server.md
index 0a8b304c04..8f38e7d4ce 100644
--- a/src/guide/ssr/server.md
+++ b/src/guide/ssr/server.md
@@ -2,13 +2,14 @@
The [code structure](./structure.html) and [webpack configuration](./build-config.html) we've described also require some changes to our Express server code.
-- we need to create an application with a built `app.js` from the resulting bundle. A path to it can be found using the webpack manifest:
+- we need to create an application with a built `entry-server.js` from the resulting bundle. A path to it can be found using the webpack manifest:
```js
// server.js
const path = require('path')
const manifest = require('./dist/server/ssr-manifest.json')
+ // the 'app.js' name is taken from the name of the entrypoint with an added `.js` postfix
const appPath = path.join(__dirname, './dist', 'server', manifest['app.js'])
const createApp = require(appPath).default
```
@@ -78,7 +79,7 @@ server.use(
)
server.get('*', async (req, res) => {
- const { app } = await createApp()
+ const { app } = createApp()
const appContent = await renderToString(app)
diff --git a/src/guide/ssr/structure.md b/src/guide/ssr/structure.md
index 1fe86d676a..0a938039cd 100644
--- a/src/guide/ssr/structure.md
+++ b/src/guide/ssr/structure.md
@@ -4,11 +4,40 @@
When writing client-only code, we can assume that our code will be evaluated in a fresh context every time. However, a Node.js server is a long-running process. When our code is first imported by the process, it will be evaluated once and then stay in memory. This means that if you create a singleton object, it will be shared between every incoming request, with the risk of cross-request state pollution.
+```js
+// bad
+import app from './app.js'
+
+server.get('*', async (req, res) => {
+ // the app is now shared amongst all users
+ const result = await renderToString(app)
+ // ...
+})
+```
+
+```js
+// good
+function createApp() {
+ return createSSRApp(/* ... */)
+}
+
+server.get('*', async (req, res) => {
+ // each user gets its own app
+ const app = createApp()
+ const result = await renderToString(app)
+ // ...
+})
+```
+
Therefore, we need to **create a new root Vue instance for each request.** In order to do that, we need to write a factory function that can be repeatedly executed to create fresh app instances for each request:
```js
-// app.js
+// server.js
const { createSSRApp } = require('vue')
+const { renderToString } = require('@vue/server-renderer')
+const express = require('express')
+
+const server = express()
function createApp() {
return createSSRApp({
@@ -20,15 +49,6 @@ function createApp() {
template: `Current user is: {{ user }}
`
})
}
-```
-
-And our server code now becomes:
-
-```js
-// server.js
-const { renderToString } = require('@vue/server-renderer')
-const server = require('express')()
-const { createApp } = require('src/app.js')
server.get('*', async (req, res) => {
const app = createApp()
@@ -49,7 +69,7 @@ server.get('*', async (req, res) => {
server.listen(8080)
```
-The same rule applies to other instances as well (such as the router or store). Instead of exporting the router or store directly from a module and importing it across your app, you should create a fresh instance in `createApp` and inject it from the root Vue instance.
+The same rule applies to other instances as well (such as the router or store). Instead of exporting the router or store directly from a module and importing it across your app, you should create a fresh instance in `createApp` and inject it from the root Vue instance each time a new request is made.
## Introducing a Build Step
@@ -76,42 +96,43 @@ src
├── components
│ ├── MyUser.vue
│ └── MyTable.vue
-├── App.vue
-├── app.js # universal entry
+├── App.vue # the root of your application
├── entry-client.js # runs in browser only
└── entry-server.js # runs on server only
```
-### `app.js`
+### `App.vue`
-`app.js` is the universal entry to our app. In a client-only app, we would create the Vue application instance right in this file and mount directly to DOM. However, for SSR that responsibility is moved into the client-only entry file. `app.js` instead creates an application instance and exports it:
+You may have noticed we now have a file called `App.vue` in the root of our `src` folder. That's where the root component of your application will be stored. We can now safely move the application code from `server.js` to the `App.vue` file:
-```js
-import { createSSRApp } from 'vue'
-import App from './App.vue'
-
-// export a factory function for creating a root component
-export default function(args) {
- const app = createSSRApp(App)
+```vue
+
+ Current user is: {{ user }}
+
- return {
- app
+
```
### `entry-client.js`
-The client entry creates the application using the root component factory and mounts it to the DOM:
+The client entry creates the application using the `App.vue` component and mounts it to the DOM:
```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
// client-specific bootstrapping logic...
-const { app } = createApp({
- // here we can pass additional arguments to app factory
-})
+const app = createSSRApp(App)
// this assumes App.vue template root element has `id="app"`
app.mount('#app')
@@ -122,12 +143,11 @@ app.mount('#app')
The server entry uses a default export which is a function that can be called repeatedly for each render. At this moment, it doesn't do much other than returning the app instance - but later we will perform server-side route matching and data pre-fetching logic here.
```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
-export default function() {
- const { app } = createApp({
- /*...*/
- })
+export default function () {
+ const app = createSSRApp(App)
return {
app
diff --git a/src/guide/template-syntax.md b/src/guide/template-syntax.md
index 9b2c55a555..bcb024e00b 100644
--- a/src/guide/template-syntax.md
+++ b/src/guide/template-syntax.md
@@ -26,7 +26,7 @@ You can also perform one-time interpolations that do not update on data change b
### Raw HTML
-The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the [`v-html` directive](../api/directives.html#v-html):
+The double mustaches interpret the data as plain text, not HTML. In order to output real HTML, you will need to use the [`v-html` directive](../api/directives.html#v-html):
```html
Using mustaches: {{ rawHtml }}
@@ -38,7 +38,7 @@ The double mustaches interprets the data as plain text, not HTML. In order to ou
The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
::: tip
-Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content
+Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.
:::
### Attributes
@@ -145,7 +145,7 @@ You'll see other examples of modifiers later, [for `v-on`](events.md#event-modif
## Shorthands
-The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building a [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
+The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building an [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
### `v-bind` Shorthand
diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md
index eb98a33ee0..ee20b1c262 100644
--- a/src/guide/transitions-overview.md
+++ b/src/guide/transitions-overview.md
@@ -176,7 +176,7 @@ Easing can also convey the quality of material being animated. Take this pen for
-You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
+You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting the cubic-bezier function's parameters, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
Though you can achieve great effects for simple animation with the two handles the cubic-bezier ease offers, JavaScript allows multiple handles, and therefore, allows for much more variance.
diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index 8038704762..c8363a08ef 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -88,7 +88,7 @@ Or, if you want to combine TypeScript with a [JSX `render` function](/guide/rend
For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-component.html) (SFCs), get the awesome [Volar extension](https://github.com/johnsoncodehk/volar), which provides TypeScript inference inside SFCs and many other great features.
-[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.
+[WebStorm](https://www.jetbrains.com/webstorm/) provides out of the box support for both TypeScript and Vue. Other JetBrains IDEs also support them, either out of the box or via [this free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js).
## Defining Vue Components
diff --git a/src/guide/web-components.md b/src/guide/web-components.md
index e75cfd91ce..be4d3de86f 100644
--- a/src/guide/web-components.md
+++ b/src/guide/web-components.md
@@ -14,6 +14,14 @@ By default, Vue will attempt to resolve a non-native HTML tag as a registered Vu
If you are using Vue with a build setup, the option should be passed via build configs since it is a compile-time option.
+#### Example In-Browser Config
+
+```js
+// Only works if using in-browser compilation.
+// If using build tools, see config examples below.
+app.config.compilerOptions.isCustomElement = tag => tag.includes('-')
+```
+
#### Example Vite Config
```js
@@ -44,7 +52,7 @@ module.exports = {
.rule('vue')
.use('vue-loader')
.tap(options => ({
- ...options
+ ...options,
compilerOptions: {
// treat any tag that starts with ion- as custom elements
isCustomElement: tag => tag.startsWith('ion-')
@@ -112,7 +120,7 @@ document.body.appendChild(
- When the element's `disconnectedCallback` is invoked, Vue will check whether the element is detached from the document after a microtask tick.
- - If the element is still in the document, it's a move and the component instance will be perserved;
+ - If the element is still in the document, it's a move and the component instance will be preserved;
- If the element is detached from the document, it's a removal and the component instance will be unmounted.
@@ -200,7 +208,7 @@ It is recommended to export the individual element constructors to give your use
```js
import { defineCustomElement } from 'vue'
import Foo from './MyFoo.ce.vue'
-import Bar from './MyBar.ce.bar'
+import Bar from './MyBar.ce.vue'
const MyFoo = defineCustomElement(Foo)
const MyBar = defineCustomElement(Bar)
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 4dd04b91f2..e337e82cdc 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1284,6 +1284,7 @@ This is the default order we recommend for component options. They're split into
- `inheritAttrs`
- `props`
- `emits`
+ - `expose`
6. **Composition API** (the entry point for using the Composition API)
- `setup`
@@ -1484,7 +1485,7 @@ Prefer class selectors over element selectors in `scoped` styles, because large
::: details Detailed Explanation
To scope styles, Vue adds a unique attribute to component elements, such as `data-v-f3f3eg9`. Then selectors are modified so that only matching elements with this attribute are selected (e.g. `button[data-v-f3f3eg9]`).
-The problem is that large numbers of [element-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than [class-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible.
+The problem is that large numbers of element-attribute selectors (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than class-attribute selectors (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible.
:::
diff --git a/yarn.lock b/yarn.lock
index 2105db2d43..761d82b5e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3742,9 +3742,9 @@ flush-write-stream@^1.0.0:
readable-stream "^2.3.6"
follow-redirects@^1.0.0:
- version "1.13.1"
- resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
- integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
+ version "1.14.7"
+ resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
+ integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
for-in@^1.0.2:
version "1.0.2"
@@ -6280,9 +6280,9 @@ pretty-time@^1.1.0:
integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
prismjs@^1.13.0:
- version "1.24.0"
- resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.0.tgz#0409c30068a6c52c89ef7f1089b3ca4de56be2ac"
- integrity sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ==
+ version "1.25.0"
+ resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
+ integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==
process-nextick-args@~2.0.0:
version "2.0.1"
- 
- 
- 
-