From 47691edba208d84bca36c83225f8045295f769f0 Mon Sep 17 00:00:00 2001 From: Lucas Viana Date: Tue, 26 Oct 2021 05:12:26 -0300 Subject: [PATCH 01/32] Update Introduction example to use `components` instead of `.component()` (#1296) * Update Introduction example to use `components` instead of `.component()` * Replace SFC import with local component definition This fixes what was mentioned by the reviewer: https://github.com/vuejs/docs/pull/1296#discussion_r735261102 * Remove unnecessary import comment --- src/guide/introduction.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 5dfd68f..b5d1a43 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -223,12 +223,16 @@ The component system is another important concept in Vue, because it's an abstra In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with `App` objects and we define it in parent's `components` option: ```js -// Create Vue application -const app = Vue.createApp(...) - -// Define a new component called todo-item -app.component('todo-item', { +const TodoItem = { template: `
  • This is a todo
    • ` +} + +// Create Vue application +const app = Vue.createApp({ + components: { + TodoItem // Register a new component + }, + ... // Other properties for the component }) // Mount Vue application From 210b792f829b5a708bee2ab8ebdff63104ec7a22 Mon Sep 17 00:00:00 2001 From: Stanislav Lashmanov Date: Tue, 26 Oct 2021 17:57:56 +0300 Subject: [PATCH 02/32] SSR Guide: Remove app.js (#1297) * Remove app.js * Fix typos, code style Co-authored-by: Natalia Tepluhina * Fix typos * Fix code style * Fix code style * Fix code style * Fix code style * Fix wrong async function Co-authored-by: Natalia Tepluhina --- src/guide/ssr/routing.md | 71 +++++++++++++++++++++----------------- src/guide/ssr/server.md | 5 +-- src/guide/ssr/structure.md | 65 ++++++++++++++++------------------ 3 files changed, 72 insertions(+), 69 deletions(-) diff --git a/src/guide/ssr/routing.md b/src/guide/ssr/routing.md index 05fe457..e52fd98 100644 --- a/src/guide/ssr/routing.md +++ b/src/guide/ssr/routing.md @@ -8,34 +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 createHistory = isServer ? createMemoryHistory : createWebHistory - const routes = [{ path: '/user', component: MyUser }] -export default function() { +export default function (history) { return createRouter({ - history: createHistory(), + history, routes }) } ``` -And update our `app.js`, client and server entries: +And update our client and server entries: + +```js +// entry-client.js +import { createApp } from 'vue' +import { createWebHistory } from 'vue-router' +import createRouter from './router.js' +import App from './App.vue' + +// ... + +const app = createApp(App) + +const router = createRouter(createWebHistory()) + +app.use(router) + +// ... +``` ```js -// app.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) { - const app = createSSRApp(App) - const router = createRouter() +export default function () { + const app = createSSRApp(Vue) + const router = createRouter(createMemoryHistory()) app.use(router) @@ -46,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. @@ -77,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 [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 { createApp } from 'vue' +import { createWebHistory } from 'vue-router' +import createRouter from './router.js' +import App from './App.vue' -const { app, router } = createApp({ - /* ... */ -}) +const app = createApp(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 0a8b304..8f38e7d 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 1fe86d6..7c1095b 100644 --- a/src/guide/ssr/structure.md +++ b/src/guide/ssr/structure.md @@ -4,11 +4,15 @@ 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. -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: +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, so our server code now becomes: ```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 +24,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 +44,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 +71,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 + - 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 +118,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(Vue) return { app From 965d3304327ded3f93aa3d18d012808aa6c99a12 Mon Sep 17 00:00:00 2001 From: Stanislav Lashmanov Date: Wed, 27 Oct 2021 07:49:51 +0300 Subject: [PATCH 03/32] Add an example on why singletones are bad (#1298) Co-authored-by: Natalia Tepluhina --- src/guide/ssr/structure.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/guide/ssr/structure.md b/src/guide/ssr/structure.md index 7c1095b..281eb44 100644 --- a/src/guide/ssr/structure.md +++ b/src/guide/ssr/structure.md @@ -4,7 +4,32 @@ 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. -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, so our server code now becomes: +```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 // server.js From ae715336503436dd9fe2971fad54d54dd098f02c Mon Sep 17 00:00:00 2001 From: Georges Gomes Date: Fri, 29 Oct 2021 17:02:42 +0200 Subject: [PATCH 04/32] Adding Components.studio and WebComponents.dev... (#1299) ... in list of Online Playgrounds. Components.studio supports standard Vue SFC component while WebComponents.dev supports Web Components wrapper via the `.ce.vue` as defined by Vue. Thanks --- src/api/sfc-tooling.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/api/sfc-tooling.md b/src/api/sfc-tooling.md index f38bc59..bd5bdf7 100644 --- a/src/api/sfc-tooling.md +++ b/src/api/sfc-tooling.md @@ -10,6 +10,8 @@ You don't need to install anything on your machine to try out Vue SFCs - there a - [Vue on Repl.it](https://replit.com/@templates/VueJS-with-Vite) - [Vue on Codepen](https://codepen.io/pen/editor/vue) - [Vue on StackBlitz](https://stackblitz.com/fork/vue) +- [Vue on Components.studio](https://components.studio/create/vue3) +- [Vue on WebComponents.dev](https://webcomponents.dev/create/cevue) It is also recommended to use these online playgrounds to provide reproductions when reporting bugs. From 7607848284fb3c22565a83f44befffe491e11215 Mon Sep 17 00:00:00 2001 From: Deepansh Mathur Date: Fri, 29 Oct 2021 20:35:17 +0530 Subject: [PATCH 05/32] Update debugging-in-vscode.md (#1270) * Update debugging-in-vscode.md * DEL: removed any reference to debugger extensions --- src/cookbook/debugging-in-vscode.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/cookbook/debugging-in-vscode.md b/src/cookbook/debugging-in-vscode.md index 274831d..2694ce3 100644 --- a/src/cookbook/debugging-in-vscode.md +++ b/src/cookbook/debugging-in-vscode.md @@ -6,10 +6,7 @@ This recipe shows how to debug [Vue CLI](https://github.com/vuejs/vue-cli) appli ## Prerequisites -Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled: - -- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) -- [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) +Make sure you have VS Code and the browser of your choice installed. Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli), following the instructions in the [Vue CLI Guide](https://cli.vuejs.org/). Change into the newly created application directory and open VS Code. From 7a9ad0653dc3db4f600f8ec38b186563bdb13752 Mon Sep 17 00:00:00 2001 From: Leyth Adan Date: Fri, 29 Oct 2021 08:11:32 -0700 Subject: [PATCH 06/32] Fixed possessive pronouns (#1303) --- src/guide/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index b5d1a43..a9fc1b0 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -100,7 +100,7 @@ Here we're encountering something new. The `v-bind` attribute you're seeing is c ## Handling User Input -To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our instances: +To let users interact with our app, we can use the `v-on` directive to attach event listeners that invoke methods on our instances: ```html
    From eef29e0d623e5426ae627dbba83ac9e22eb93409 Mon Sep 17 00:00:00 2001 From: Leyth Adan Date: Fri, 29 Oct 2021 08:13:14 -0700 Subject: [PATCH 07/32] fixed missing commas (#1302) * fixed missing commas * Update src/guide/introduction.md Co-authored-by: Natalia Tepluhina --- src/guide/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index a9fc1b0..93cef89 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -96,7 +96,7 @@ Vue.createApp(AttributeBinding).mount('#bind-attribute') -Here we're encountering something new. The `v-bind` attribute you're seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here we are basically saying "_keep this element's `title` attribute up-to-date with the `message` property on the current active instance._" +Here we're encountering something new. The `v-bind` attribute you're seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, we're basically saying "_keep this element's `title` attribute up-to-date with the `message` property on the current active instance._" ## Handling User Input From d026fc225da4a32236c925d1452bf0f9e1745e1f Mon Sep 17 00:00:00 2001 From: wxsm Date: Sat, 30 Oct 2021 20:25:07 +0800 Subject: [PATCH 08/32] Update introduction.md (#1306) remove strange markups --- src/guide/ssr/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/ssr/introduction.md b/src/guide/ssr/introduction.md index 86a50a4..b8a1ee1 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' From f4311edd022a936e8edf9998c96815267616bf40 Mon Sep 17 00:00:00 2001 From: Miguel-Bento-Github <51338450+Miguel-Bento-Github@users.noreply.github.com> Date: Sun, 31 Oct 2021 09:08:14 +0100 Subject: [PATCH 09/32] Update deprecated app.config.isCustomElement (#1307) `app.config.isCustomElement` is deprecated and should be replaced with `app.config.compilerOptions.isCustomElement` --- src/guide/migration/custom-elements-interop.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/migration/custom-elements-interop.md b/src/guide/migration/custom-elements-interop.md index 766aa3e..845d326 100644 --- a/src/guide/migration/custom-elements-interop.md +++ b/src/guide/migration/custom-elements-interop.md @@ -52,11 +52,11 @@ Vue.config.ignoredElements = ['plastic-button'] ] ``` -- If using on-the-fly template compilation, pass it via `app.config.isCustomElement`: +- If using on-the-fly template compilation, pass it via `app.config.compilerOptions.isCustomElement`: ```js const app = Vue.createApp({}) - app.config.isCustomElement = tag => tag === 'plastic-button' + app.config.compilerOptions.isCustomElement = tag => tag === 'plastic-button' ``` It's important to note the runtime config only affects runtime template compilation - it won't affect pre-compiled templates. @@ -125,6 +125,6 @@ With the behavior change of `is`, a `vue:` prefix is now required to resolve the ## Migration Strategy -- Replace `config.ignoredElements` with either `vue-loader`'s `compilerOptions` (with the build step) or `app.config.isCustomElement` (with on-the-fly template compilation) +- Replace `config.ignoredElements` with either `vue-loader`'s `compilerOptions` (with the build step) or `app.config.compilerOptions.isCustomElement` (with on-the-fly template compilation) - Change all non-`` tags with `is` usage to `` (for SFC templates) or prefix it with `vue:` (for in-DOM templates). From 5ddaf3516b4286c08fa397f4f11913c70b3e97be Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Wed, 3 Nov 2021 14:58:36 +0000 Subject: [PATCH 10/32] fix: use createSSRApp instead of createApp (#1311) --- src/guide/ssr/routing.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/guide/ssr/routing.md b/src/guide/ssr/routing.md index e52fd98..e78314b 100644 --- a/src/guide/ssr/routing.md +++ b/src/guide/ssr/routing.md @@ -25,14 +25,14 @@ And update our client and server entries: ```js // entry-client.js -import { createApp } from 'vue' +import { createSSRApp } from 'vue' import { createWebHistory } from 'vue-router' import createRouter from './router.js' import App from './App.vue' // ... -const app = createApp(App) +const app = createSSRApp(App) const router = createRouter(createWebHistory()) @@ -50,7 +50,7 @@ import createRouter from './router.js' import App from './App.vue' export default function () { - const app = createSSRApp(Vue) + const app = createSSRApp(App) const router = createRouter(createMemoryHistory()) app.use(router) @@ -79,16 +79,16 @@ const routes = [ ] ``` -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 [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 'vue' +import { createSSRApp } from 'vue' import { createWebHistory } from 'vue-router' import createRouter from './router.js' import App from './App.vue' -const app = createApp(App) +const app = createSSRApp(App) const router = createRouter(createWebHistory()) From 563ed2715dabe2eedfbd521c0ceb851d969ffa6c Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Wed, 3 Nov 2021 14:59:22 +0000 Subject: [PATCH 11/32] docs: expand the explanation about using VNodes with (#1310) --- src/api/built-in-components.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index 31b7c03..0f1e4bb 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -20,7 +20,7 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' - **Props:** - - `is` - `string | Component` + - `is` - `string | Component | VNode` - **Usage:** @@ -41,6 +41,8 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' ``` +- **Usage with built-in components:** + The built-in components `KeepAlive`, `Transition`, `TransitionGroup`, and `Teleport` can all be passed to `is`, but you must register them if you want to pass them by name. For example: ```js @@ -62,15 +64,15 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' Registration is not required if you pass the component itself to `is` rather than its name. -- **key:** +- **Usage with VNodes:** -When using and passing vnode of the same type, you need to provide keys: - -```html - -``` + In advanced use cases, it can sometimes be useful to render an existing VNode via a template. Using a `` makes this possible, but it should be seen as an escape hatch, used to avoid rewriting the entire template as a `render` function. + + ```html + + ``` -Otherwise, you are passing two compiled vnodes of the same type to the renderer. Because they are compiled as completely static, they will not be updated at all. + A caveat of mixing VNodes and templates in this way is that you need to provide a suitable `key` attribute. The VNode will be considered static, so any updates will be ignored unless the `key` changes. The `key` can be on the VNode or the `` tag, but either way it must change every time you want the VNode to re-render. This caveat doesn't apply if the nodes have different types, e.g. changing a `span` to a `div`. - **See also:** [Dynamic Components](../guide/component-dynamic-async.html) From 3d84cff19037e6c95fb04f5b04f10e3ab9d31bc7 Mon Sep 17 00:00:00 2001 From: Calvin Zheng Date: Sat, 6 Nov 2021 05:15:07 +0800 Subject: [PATCH 12/32] Fix typo (#1315) When executing command `npm run build:server` got an error: "ERROR Build failed with errors." --- src/guide/ssr/structure.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/ssr/structure.md b/src/guide/ssr/structure.md index 281eb44..0a93803 100644 --- a/src/guide/ssr/structure.md +++ b/src/guide/ssr/structure.md @@ -147,7 +147,7 @@ import { createSSRApp } from 'vue' import App from './App.vue' export default function () { - const app = createSSRApp(Vue) + const app = createSSRApp(App) return { app From 009706511b33add39286ad423ce0fac4c937f963 Mon Sep 17 00:00:00 2001 From: Razvan Stoenescu Date: Sun, 7 Nov 2021 22:09:15 +0200 Subject: [PATCH 13/32] chore: Update partners on myself (#1318) --- src/.vuepress/components/community/team/partners.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/.vuepress/components/community/team/partners.js b/src/.vuepress/components/community/team/partners.js index 5e1dd97..2caeb13 100644 --- a/src/.vuepress/components/community/team/partners.js +++ b/src/.vuepress/components/community/team/partners.js @@ -211,15 +211,14 @@ export default shuffle([ github: 'rstoenescu', twitter: 'quasarframework', work: { - role: 'Developer', + role: 'Author', org: 'Quasar Framework', - orgUrl: 'http://quasar-framework.org/' + orgUrl: 'http://quasar.dev/' }, reposPersonal: [ - 'quasarframework/quasar', - 'quasarframework/quasar-cli', - 'quasarframework/quasar-play' - ] + 'quasarframework/quasar' + ], + links: ['https://quasar.dev'] }, { name: 'Jilson Thomas', From 4fae0d0d6539f58ef952ad0d6c9d21d7d61fd135 Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Tue, 9 Nov 2021 19:51:22 -0600 Subject: [PATCH 14/32] =?UTF-8?q?add=20vue=20school=20links=20to=20supplem?= =?UTF-8?q?ent=20component=20documentation=20with=20video=E2=80=A6=20(#111?= =?UTF-8?q?9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add vue school links to supplement component documentation with video courses * link sfc doc to sfc intro lesson instead of course since only first lesson is free --- src/guide/component-basics.md | 2 ++ src/guide/component-props.md | 2 ++ src/guide/component-registration.md | 2 ++ src/guide/component-slots.md | 2 ++ src/guide/single-file-component.md | 2 ++ 5 files changed, 10 insertions(+) diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index fa9f431..9d647f4 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -1,5 +1,7 @@ # Components Basics +Learn component basics with a free video course on Vue School + ## Base Example Here's an example of a Vue component: diff --git a/src/guide/component-props.md b/src/guide/component-props.md index 94e9505..c38a42d 100644 --- a/src/guide/component-props.md +++ b/src/guide/component-props.md @@ -2,6 +2,8 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +Learn how component props work with a free lesson on Vue School + ## Prop Types So far, we've only seen props listed as an array of strings: diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md index 0f561af..d7c17eb 100644 --- a/src/guide/component-registration.md +++ b/src/guide/component-registration.md @@ -1,5 +1,7 @@ # Component Registration +Learn how component registration works with a free lesson on Vue School + > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. ## Component Names diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md index 154d4f8..8c62adc 100644 --- a/src/guide/component-slots.md +++ b/src/guide/component-slots.md @@ -2,6 +2,8 @@ > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +Learn slot basics with a free lesson on Vue School + ## Slot Content Vue implements a content distribution API inspired by the [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the `` element to serve as distribution outlets for content. diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md index 5078f78..55c7b8a 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: From 3c97d52e2cb457fd2208133be316a185843dd57c Mon Sep 17 00:00:00 2001 From: Xuqian Date: Wed, 10 Nov 2021 13:39:38 +0800 Subject: [PATCH 15/32] Update description about .number modifier (#1285) * Update description about .number modifier * Update src/guide/forms.md Co-authored-by: Natalia Tepluhina --- src/guide/forms.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/forms.md b/src/guide/forms.md index d32402c..41571c8 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -269,10 +269,10 @@ By default, `v-model` syncs the input with the data after each `input` event (wi If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs: ```html - + ``` -This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string. If the value cannot be parsed with `parseFloat()`, then the original value is returned. +This is often useful when the input type is `text`. If the input type is `number`, Vue can automatically convert the raw string value to a number, and you don't need to add the `.number` modifier to `v-model`. If the value cannot be parsed with `parseFloat()`, then the original value is returned. ### `.trim` From 45b9049d4c5382c60f58c6c3a80a767446bb87d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Wed, 10 Nov 2021 06:40:25 +0100 Subject: [PATCH 16/32] fix: Explain usage of custom directives with script-setup (#1319) * fix: Explain usage of custom directives with script-setup * Update src/api/sfc-script-setup.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> * Update src/api/sfc-script-setup.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/api/sfc-script-setup.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md index cfb7b2b..4d7d4e5 100644 --- a/src/api/sfc-script-setup.md +++ b/src/api/sfc-script-setup.md @@ -131,6 +131,31 @@ import * as Form from './form-components' ``` +## Using Custom Directives + +Globally registered custom directives just work as expected, and local ones can be used directly in the template, much like we explained above for components. + +But there's one restriction to be aware of: You must name local custom directives according to the following schema: `vNameOfDirective` in order for them to be directly usable in the template. + +```html + + +``` +```html + +``` + ## `defineProps` and `defineEmits` To declare `props` and `emits` in ` + + diff --git a/src/.vuepress/theme/components/BannerTop.vue b/src/.vuepress/theme/components/BannerTop.vue index 6e18821..db0688d 100644 --- a/src/.vuepress/theme/components/BannerTop.vue +++ b/src/.vuepress/theme/components/BannerTop.vue @@ -1,40 +1,47 @@ + + diff --git a/src/.vuepress/theme/components/BannerTop.vue b/src/.vuepress/theme/components/BannerTop.vue index 87c0f06..6e3e1a9 100644 --- a/src/.vuepress/theme/components/BannerTop.vue +++ b/src/.vuepress/theme/components/BannerTop.vue @@ -10,12 +10,13 @@ Access to all Vue Courses at Vue School
    - Black Friday 40% OFF + Cyber Monday 40% OFF - Closes Soon
    Get Discount
    + Extended
    Close @@ -55,7 +56,11 @@ $topBannerHeightMobile ?= 5rem z-index: 100 line-height: 1 height: $topBannerHeightMobile + background-image: url(/images/vueschool/vueschool_banner_mobile.png) + background-size: cover + background-repeat: no-repeat @media (min-width: 680px) + background-image: none height: $topBannerHeight justify-content: center @@ -65,8 +70,10 @@ $topBannerHeightMobile ?= 5rem background: linear-gradient(261deg, #e61463 100%, #db5248 3%) .vs-core - display: flex - align-items: center + display: none + @media (min-width: 680px) + align-items: center + display: flex .vs-slogan font-family: Archivo @@ -100,13 +107,19 @@ $topBannerHeightMobile ?= 5rem @media (min-width: 680px) margin-right: 0 padding: 8px 24px - margin-left: 32px - @media (min-width: 680px) + margin-left: 20px + @media (min-width: 1024px) margin-left: 69px + .vs-tag + margin-left: 10px + @media (min-width: 1024px) + margin-left: 30px + .vs-close right: 6px position: absolute + z-index: 10 @media (min-width: 680px) padding: 10px right: 20px From 56eff3442fbc4e2250e83041b5ed9d0544f670f2 Mon Sep 17 00:00:00 2001 From: Simon Legner Date: Tue, 30 Nov 2021 20:43:17 +0100 Subject: [PATCH 30/32] docs: add indonesia translation url (#1357) --- .../components/guide/contributing/translations-data.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/.vuepress/components/guide/contributing/translations-data.js b/src/.vuepress/components/guide/contributing/translations-data.js index 82b5ba2..aef5d0e 100644 --- a/src/.vuepress/components/guide/contributing/translations-data.js +++ b/src/.vuepress/components/guide/contributing/translations-data.js @@ -13,7 +13,7 @@ export const labels = { export const repos = [ { lang: 'en-us', owner: 'vuejs', repo: 'docs', branch: 'master', url: 'https://v3.vuejs.org/' }, { lang: 'fr', owner: 'demahom18', repo: 'docs-next', branch: 'master', url: 'https://vue3-fr.netlify.app' }, - { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian' }, + { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian', url: 'https://v3-vuejsid-docs.netlify.app/' }, { lang: 'ja', owner: 'vuejs-jp', repo: 'ja.vuejs.org', branch: 'lang-ja', url: 'https://v3.ja.vuejs.org/' }, { lang: 'ko', owner: 'vuejs-kr', repo: 'docs-next', branch: 'rootKoKr', url: 'https://v3.ko.vuejs.org/' }, { lang: 'pt-br', owner: 'vuejs-br', repo: 'docs-next', branch: 'master', url: 'https://vuejsbr-docs-next.netlify.app/' }, From 334ea378617b385c886a84d30132d5bf9e79bb87 Mon Sep 17 00:00:00 2001 From: wxsm Date: Wed, 1 Dec 2021 03:50:53 +0800 Subject: [PATCH 31/32] update transitions-overview.md (#1352) --- src/guide/transitions-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index eb98a33..a1f772b 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 a cubic-bezier property, [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. From 12071a76f3fb83d12c5401a877c19ff9ede67234 Mon Sep 17 00:00:00 2001 From: wxsm Date: Wed, 1 Dec 2021 17:12:09 +0800 Subject: [PATCH 32/32] use camelCase (#1338) --- src/guide/component-custom-events.md | 2 +- src/guide/migration/vnode-lifecycle-events.md | 2 +- src/guide/render-function.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 68d340d..4b91982 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -4,7 +4,7 @@ ## Event Names -Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camel case, you will be able to add a kebab-cased listener in the parent: +Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camelCase, you will be able to add a kebab-cased listener in the parent: ```js this.$emit('myEvent') diff --git a/src/guide/migration/vnode-lifecycle-events.md b/src/guide/migration/vnode-lifecycle-events.md index 25202ae..8ad0b23 100644 --- a/src/guide/migration/vnode-lifecycle-events.md +++ b/src/guide/migration/vnode-lifecycle-events.md @@ -31,7 +31,7 @@ In Vue 3, the event name is prefixed with `vnode-`: ``` -Or just `vnode` if you're using camel case: +Or just `vnode` if you're using camelCase: ```html