diff --git a/.nvmrc b/.nvmrc
deleted file mode 100644
index 988d5e9ef1..0000000000
--- a/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-v8.9.4
\ No newline at end of file
diff --git a/README.md b/README.md
index 69395ba4f9..bed7c6049c 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# vuejs.org
+# v2.vuejs.org
> Important: This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the [v3 doc repo](https://github.com/vuejs/docs-next).
@@ -6,7 +6,7 @@ This site is built with [hexo](http://hexo.io/). Site content is written in Mark
## Writing
-See the [Vue Docs Writing Guide](https://github.com/vuejs/vuejs.org/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation.
+See the [Vue Docs Writing Guide](https://github.com/vuejs/v2.vuejs.org/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation.
## Developing
@@ -122,7 +122,7 @@ Bahasa Indonesia translation is maintained by [Vue.js Indonesia](https://github.
### Want to help with the translation?
-If you feel okay with translating quite alone, you can fork the repo, post a comment on the [Community Translation Announcements](https://github.com/vuejs/vuejs.org/issues/2015) issue page to inform others that you're doing the translation and go for it.
+If you feel okay with translating quite alone, you can fork the repo, post a comment on the [Community Translation Announcements](https://github.com/vuejs/v2.vuejs.org/issues/2015) issue page to inform others that you're doing the translation and go for it.
If you are more of a team player, Translation Gang might be for you. Let us know somehow that you're ready to join this international open-source translators community. Feel free to contact [Grigoriy Beziuk](https://gbezyuk.github.io) or anybody else from [the team](https://github.com/orgs/translation-gang/people).
diff --git a/_config.yml b/_config.yml
index 6a54967667..38ce868cd3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -12,7 +12,7 @@ language:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: https://vuejs.org
+url: https://v2.vuejs.org
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
@@ -29,7 +29,8 @@ new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
-external_link: true # Open external links in new tab
+external_link:
+ enable: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
@@ -102,49 +103,49 @@ markdown:
# Offline
## Config passed to sw-precache
## https://github.com/JLHwung/hexo-offline
-offline:
- maximumFileSizeToCacheInBytes: 10485760
- staticFileGlobs:
- - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,eot,ttf,woff,woff2,json,xml}
- stripPrefix: public
- verbose: true
- runtimeCaching:
- # Ad Sources - should be networkFirst
- - urlPattern: /*
- handler: networkFirst
- options:
- origin: sendgrid.sp1.convertro.com
- - urlPattern: /*
- handler: networkFirst
- options:
- origin: ad.doubleclick.net
- # CDNs - should be cacheFirst, since they should be used specific versions so should not change
- - urlPattern: /*
- handler: cacheFirst
- options:
- origin: cdn.jsdelivr.net
- - urlPattern: /*
- handler: cacheFirst
- options:
- origin: fonts.googleapis.com
- - urlPattern: /*
- handler: cacheFirst
- options:
- origin: fonts.gstatic.com
- - urlPattern: /*
- handler: cacheFirst
- options:
- origin: cdnjs.cloudflare.com
- - urlPattern: /*
- handler: cacheFirst
- options:
- origin: maxcdn.bootstrapcdn.com
+# offline:
+# maximumFileSizeToCacheInBytes: 10485760
+# staticFileGlobs:
+# - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,eot,ttf,woff,woff2,json,xml}
+# stripPrefix: public
+# verbose: true
+# runtimeCaching:
+# # Ad Sources - should be networkFirst
+# - urlPattern: /*
+# handler: networkFirst
+# options:
+# origin: sendgrid.sp1.convertro.com
+# - urlPattern: /*
+# handler: networkFirst
+# options:
+# origin: ad.doubleclick.net
+# # CDNs - should be cacheFirst, since they should be used specific versions so should not change
+# - urlPattern: /*
+# handler: cacheFirst
+# options:
+# origin: cdn.jsdelivr.net
+# - urlPattern: /*
+# handler: cacheFirst
+# options:
+# origin: fonts.googleapis.com
+# - urlPattern: /*
+# handler: cacheFirst
+# options:
+# origin: fonts.gstatic.com
+# - urlPattern: /*
+# handler: cacheFirst
+# options:
+# origin: cdnjs.cloudflare.com
+# - urlPattern: /*
+# handler: cacheFirst
+# options:
+# origin: maxcdn.bootstrapcdn.com
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
- repository: git@github.com:vuejs/vuejs.org.git
+ repository: git@github.com:vuejs/v2.vuejs.org.git
feed:
type: atom
diff --git a/_scripts/pre-deploy.js b/_scripts/pre-deploy.js
new file mode 100644
index 0000000000..bf435118ed
--- /dev/null
+++ b/_scripts/pre-deploy.js
@@ -0,0 +1,61 @@
+// udpate to latest built files of Vue
+require('./sync-sponsors')
+
+const fs = require('fs')
+const zlib = require('zlib')
+const axios = require('axios')
+const execSync = require('child_process').execSync
+
+const themeconfPath = 'themes/vue/_config.yml'
+const installPath = 'src/v2/guide/installation.md'
+const themeconfig = fs.readFileSync(themeconfPath, 'utf-8')
+const installation = fs.readFileSync(installPath, 'utf-8')
+
+// get latest Vue version
+console.log(`Checking latest Vue version...`)
+const localVersion = themeconfig.match(/vue_version: (.*)/)[1]
+const version = execSync('npm view vue@v2-latest version').toString().trim()
+
+if (localVersion === version) {
+ console.log(`Version is up-to-date.`)
+ process.exit(0)
+}
+
+console.log(`Latest version: ${version}. Downloading dist files...`)
+
+// replace version in theme config
+fs.writeFileSync(
+ themeconfPath,
+ themeconfig.replace(/vue_version: .*/, 'vue_version: ' + version)
+)
+
+// grab it from unpkg
+Promise.all([download(`vue.js`), download(`vue.min.js`)])
+ .then(([devSize, prodSize]) => {
+ // replace installation page version and size
+ fs.writeFileSync(
+ installPath,
+ installation
+ .replace(/vue_version: .*/, 'vue_version: ' + version)
+ .replace(/gz_size:.*/g, `gz_size: "${prodSize}"`)
+ .replace(/\/vue@[\d\.]+/g, `/vue@${version}`)
+ )
+ console.log(
+ `\nSuccessfully updated Vue version (${version}) and gzip file size (${prodSize}kb).\n`
+ )
+ })
+ .catch((err) => {
+ console.error(err)
+ process.exit(1)
+ })
+
+function download(file) {
+ return axios({
+ url: `http://unpkg.com/vue@${version}/dist/${file}`,
+ method: 'get'
+ }).then((res) => {
+ fs.writeFileSync(`themes/vue/source/js/${file}`, res.data)
+ const zipped = zlib.gzipSync(Buffer.from(res.data))
+ return (zipped.length / 1024).toFixed(2)
+ })
+}
diff --git a/_scripts/sync-sponsors.js b/_scripts/sync-sponsors.js
new file mode 100644
index 0000000000..60c726da62
--- /dev/null
+++ b/_scripts/sync-sponsors.js
@@ -0,0 +1,18 @@
+// sync latest data from sponsor.vuejs.org
+const fs = require('fs')
+const path = require('path')
+const axios = require('axios')
+const yaml = require('js-yaml')
+
+const configPath = path.resolve(__dirname, '../themes/vue/_config.yml')
+
+;(async () => {
+ const { data } = await axios(`https://sponsors.vuejs.org/data.json`)
+ const yml = yaml.dump(data)
+ const config = fs.readFileSync(configPath, 'utf-8')
+ const updated = config.replace(
+ /(# START SPONSORS)[^]*(# END SPONSORS)/,
+ `$1\n${yml}$2`
+ )
+ fs.writeFileSync(configPath, updated)
+})()
diff --git a/package.json b/package.json
index e3640cc3fa..b88a44c727 100644
--- a/package.json
+++ b/package.json
@@ -1,32 +1,31 @@
{
- "name": "vuejs.org",
+ "name": "v2.vuejs.org",
"private": true,
"hexo": {
- "version": "3.8.0"
+ "version": "6.2.0"
},
"scripts": {
- "start": "hexo server",
- "build": "node pre-deploy.js && hexo clean && hexo generate",
+ "dev": "node _scripts/sync-sponsors.js && hexo server",
+ "build": "node _scripts/pre-deploy.js && hexo clean && hexo generate",
"deploy": "npm run build && hexo deploy"
},
"engines": {
- "node": ">=8.9.0"
+ "node": ">=14.0.0"
},
"dependencies": {
- "hexo": "^3.6.0",
- "hexo-deployer-git": "0.3.1",
+ "axios": "^0.27.2",
+ "hexo": "^6.2.0",
"hexo-generator-alias": "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git",
- "hexo-generator-archive": "^0.1.5",
- "hexo-generator-category": "^0.1.3",
- "hexo-generator-feed": "^1.2.2",
- "hexo-generator-index": "^0.2.1",
- "hexo-generator-tag": "^0.2.0",
- "hexo-offline": "^1.0.0",
- "hexo-renderer-ejs": "^0.3.1",
- "hexo-renderer-marked": "^0.3.0",
- "hexo-renderer-stylus": "^0.3.3",
- "hexo-server": "^0.3.1",
+ "hexo-generator-archive": "^1.0.0",
+ "hexo-generator-category": "^1.0.0",
+ "hexo-generator-feed": "^3.0.0",
+ "hexo-generator-index": "^2.0.0",
+ "hexo-generator-tag": "^1.0.0",
+ "hexo-renderer-ejs": "^2.0.0",
+ "hexo-renderer-marked": "^0.3.2",
+ "hexo-renderer-stylus": "^2.1.0",
+ "hexo-server": "^3.0.0",
"hoek": "^6.1.2",
- "request": "^2.85.0"
+ "js-yaml": "^4.1.0"
}
-}
\ No newline at end of file
+}
diff --git a/pre-deploy.js b/pre-deploy.js
deleted file mode 100644
index 36b523e766..0000000000
--- a/pre-deploy.js
+++ /dev/null
@@ -1,74 +0,0 @@
-// udpate to latest built files of Vue
-
-const fs = require('fs')
-const zlib = require('zlib')
-const request = require('request')
-const execSync = require('child_process').execSync
-
-const themeconfPath = 'themes/vue/_config.yml'
-const installPath = 'src/v2/guide/installation.md'
-const themeconfig = fs.readFileSync(themeconfPath, 'utf-8')
-const installation = fs.readFileSync(installPath, 'utf-8')
-
-// get latest Vue version
-console.log(`Checking latest Vue version...`)
-const localVersion = themeconfig.match(/vue_version: (.*)/)[1]
-const version = execSync('npm view vue version').toString().trim()
-
-if (localVersion === version) {
- console.log(`Version is up-to-date.`)
- process.exit(0)
-}
-
-console.log(`Latest version: ${version}. Downloading dist files...`)
-
-// replace version in theme config
-fs.writeFileSync(
- themeconfPath,
- themeconfig.replace(/vue_version: .*/, 'vue_version: ' + version)
-)
-
-// grab it from unpkg
-Promise.all([
- download(`vue.js`),
- download(`vue.min.js`)
-]).then(([ devSize, prodSize ]) => {
- // replace installation page version and size
- fs.writeFileSync(
- installPath,
- installation
- .replace(/vue_version: .*/, 'vue_version: ' + version)
- .replace(/gz_size:.*/g, `gz_size: "${prodSize}"`)
- .replace(/\/vue@[\d\.]+/g, `/vue@${version}`)
- )
- console.log(`\nSuccessfully updated Vue version and gzip file size.\n`)
-}).catch(err => {
- console.error(err)
- process.exit(1)
-})
-
-function download (file) {
- return new Promise((resolve, reject) => {
- request({
- url: `http://unpkg.com/vue@${version}/dist/${file}`,
- encoding: null
- }, (err, res, body) => {
- if (err) {
- return reject(err)
- }
- if (res.statusCode != 200) {
- return reject(
- `unexpected response code when downloading from unpkg: ${res.statusCode}` +
- `\n${body.toString()}`
- )
- }
- fs.writeFile(`themes/vue/source/js/${file}`, body, err => {
- if (err) return reject(err)
- zlib.gzip(body, (err, zipped) => {
- if (err) return reject(err)
- resolve((zipped.length / 1024).toFixed(2))
- })
- })
- })
- })
-}
diff --git a/src/_posts/common-gotchas.md b/src/_posts/common-gotchas.md
index a8abf2314e..c4ed741291 100644
--- a/src/_posts/common-gotchas.md
+++ b/src/_posts/common-gotchas.md
@@ -15,7 +15,7 @@ Most of the time, when you change a Vue instance's data, the view updates. But t
2. When you modify an Array by directly setting an index (e.g. `arr[0] = val`) or modifying its `length` property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method `arr.$set(index, value)` which is syntax sugar for `arr.splice(index, 1, value)`.
-Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](http://vuejs.org/guide/list.html#Array-Change-Detection).
+Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](/guide/list.html#Array-Change-Detection).
### When is the DOM updated?
@@ -33,6 +33,6 @@ Further reading: [Component Option Caveats](/guide/components.html#Component-Opt
All Vue.js templates are valid, parsable HTML markup, and Vue.js relies on spec-compliant parsers to process its templates. However, as specified in the standard, HTML is case-insensitive when matching tag and attribute names. This means camelCase attributes like `:myProp="123"` will be matched as `:myprop="123"`. As a rule of thumb, you should use camelCase in JavaScript and kebab-case in templates. For example a prop defined in JavaScript as `myProp` should be bound in templates as `:my-prop`.
-Further reading: [camelCase vs. kebab-case](http://vuejs.org/guide/components.html#camelCase-vs-kebab-case).
+Further reading: [camelCase vs. kebab-case](/guide/components.html#camelCase-vs-kebab-case).
We are also discussing the possibility of eliminating this inconsistency by resolving props and components in a case-insensitive manner. Join the conversation [here](https://github.com/vuejs/vue/issues/2308).
diff --git a/src/_posts/why-no-template-url.md b/src/_posts/why-no-template-url.md
index f6fbabe2dd..8ffacabbbb 100644
--- a/src/_posts/why-no-template-url.md
+++ b/src/_posts/why-no-template-url.md
@@ -13,8 +13,8 @@ First, it allows us to write our template in a separate HTML file. This gives us
Second, because `templateURL` loads the template via Ajax at runtime, you don't need a build step in order to split up your files. This is convenient during development, but comes at a serious cost when you want to deploy it to production. Before HTTP/2 is universally supported, the number of HTTP requests is still probably the most critical factor in your app's initial load performance. Now imagine you use `templateURL` for every component in your app - the browser needs to perform dozens of HTTP requests before even being able to display anything! In case you don't know, most browsers limit the number of parallel requests it can perform to a single server. When you exceed that limit, your app's initial rendering will suffer for every extra round trip the browser has to wait for. Sure, there are build tools that can help you pre-register all those templates in `$templateCache` - but that shows us a build step is, in fact, inevitable for any serious frontend development.
-So, without `templateURL`, how do we deal with the development experience problem? Writing templates as inline JavaScript strings is terrible, faking templates with `
+
...
@@ -39,7 +39,7 @@ Vue already allows components to be written as a single file. Because a Single F
> "Why can't people use my `.vue` file directly? Isn't that the simplest way to share components?"
-It's true, you can share `.vue` files directly, and anyone using a [Vue build](https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds) containing the Vue compiler can consume it immediately. Also, the SSR build uses string concatenation as an optimization, so the `.vue` file might be preferred in this scenario (see [Packaging Components for npm > SSR Usage](#SSR-Usage) for details). However, this excludes anyone who wishes to use the component directly in a browser via `
-
+
{% endraw %}
-See [this example](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo.
+See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo.
## Organizing Transitions into Components
diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md
index a693cfb8db..7f0637d78e 100644
--- a/src/v2/guide/transitions.md
+++ b/src/v2/guide/transitions.md
@@ -4,6 +4,12 @@ type: guide
order: 201
---
+
+
## Overview
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:
@@ -1245,7 +1251,7 @@ new Vue({
One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use `display: inline-block` or place elements in a flex context.
-These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions):
+These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions):
{% raw %}
diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md
index 7c9b61424e..8567e99b66 100644
--- a/src/v2/style-guide/index.md
+++ b/src/v2/style-guide/index.md
@@ -189,7 +189,7 @@ In committed code, prop definitions should always be as detailed as possible, sp
{% endraw %}
-Detailed [prop definitions](https://vuejs.org/v2/guide/components.html#Prop-Validation) have two advantages:
+Detailed [prop definitions](/v2/guide/components.html#Prop-Validation) have two advantages:
- They document the API of the component, so that it's easy to see how the component is meant to be used.
- In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error.
@@ -771,22 +771,6 @@ Some advantages of this convention:
- Since component names should always be multi-word, this convention prevents you from having to choose an arbitrary prefix for simple component wrappers (e.g. `MyButton`, `VueButton`).
-- Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with Webpack:
-
- ``` js
- var requireComponent = require.context("./src", true, /Base[A-Z]\w+\.(vue|js)$/)
- requireComponent.keys().forEach(function (fileName) {
- var baseComponentConfig = requireComponent(fileName)
- baseComponentConfig = baseComponentConfig.default || baseComponentConfig
- var baseComponentName = baseComponentConfig.name || (
- fileName
- .replace(/^.+\//, '')
- .replace(/\.\w+$/, '')
- )
- Vue.component(baseComponentName, baseComponentConfig)
- })
- ```
-
{% raw %}{% endraw %}
{% raw %}
{% endraw %}
@@ -1755,7 +1739,7 @@ computed: {
**It's usually best to use `key` with `v-if` + `v-else`, if they are the same element type (e.g. both `
` elements).**
-By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same.
+By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same.
{% raw %}
{% endraw %}
#### Bad
@@ -1806,7 +1790,7 @@ Prefer class selectors over element selectors in `scoped` styles, because large
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.
{% raw %}{% endraw %}
@@ -1941,9 +1925,9 @@ Vue.component('TodoItem', {
**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.**
-Managing state on `this.$root` and/or using a [global event bus](https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but it is not appropriate for most applications.
+Managing state on `this.$root` and/or using a [global event bus](/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but it is not appropriate for most applications.
-Vuex is the [official flux-like implementation](https://vuejs.org/v2/guide/state-management.html#Official-Flux-Like-Implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](https://vuejs.org/v2/guide/installation.html#Vue-Devtools) support).
+Vuex is the [official flux-like implementation](/v2/guide/state-management.html#Official-Flux-Like-Implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](/v2/guide/installation.html#Vue-Devtools) support).
{% raw %}{% endraw %}
diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml
index 6af792a69e..ae2c91815a 100644
--- a/themes/vue/_config.yml
+++ b/themes/vue/_config.yml
@@ -1,168 +1,246 @@
site_description: Vue.js - The Progressive JavaScript Framework
google_analytics: UA-46852172-1
root_domain: vuejs.org
-vue_version: 2.5.16
-platinum_sponsors_china:
- - url: 'http://www.dcloud.io/?hmsr=vuejsorg&hmpl=&hmcu=&hmkw=&hmci='
- img: dcloud.gif
-special_sponsors:
- - url: 'https://autocode.com/'
- img: autocode.svg
- name: Autocode
- description: 'Instant Webhooks, Scripts and APIs'
-platinum_sponsors:
- - url: >-
+vue_version: 2.7.14
+# START SPONSORS
+special:
+ - name: appwrite
+ url: https://appwrite.io
+ img: appwrite.svg
+ description: Open-source backend cloud platform
+ priority: true
+platinum:
+ - name: Bit
+ url: https://bit.dev
+ img: bit.svg?v2
+ priority: true
+ - name: VueMastery
+ url: https://www.vuemastery.com/
+ img: vuemastery.png
+ - name: VueSchool
+ url: >-
https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1
img: vueschool.png
- name: VueSchool
- - url: 'https://vehikl.com/'
+ - name: Vehikl
+ url: https://vehikl.com/
img: vehikl.png
- name: Vehikl
- - url: 'https://retool.com/?utm_source=sponsor&utm_campaign=vue'
- img: retool.png
- name: Retool
- - url: 'https://passionatepeople.io/'
+ - name: Passionate People
+ url: https://passionatepeople.io/
img: passionate_people.png
- name: Passionate People
- - url: 'https://www.storyblok.com'
+ - name: Storyblok
+ url: https://www.storyblok.com
img: storyblok.png
- name: Storyblok
- - url: >-
+ - name: Ionic
+ url: >-
https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs
- img: ionic.png
- name: Ionic
- - url: 'https://nuxtjs.org/'
- img: nuxt.png
- name: Nuxt
-gold_sponsors:
- - url: 'https://www.vuemastery.com/'
- img: vuemastery.png
- name: VueMastery
- - url: 'https://laravel.com'
+ img: ionic.png?v2
+ - name: Skilled
+ url: https://skilled.yashio-corp.com
+ img: skilled.svg
+ - name: Chrome Frameworks Fund
+ url: https://opencollective.com/2021-frameworks-fund
+ img: chrome_frameworks_fund.png
+ - name: HeroDevs
+ url: https://www.herodevs.com/support/vue
+ img: herodevs.png
+gold:
+ - name: Laravel
+ url: https://laravel.com
img: laravel.png
- name: Laravel
- - url: 'https://htmlburger.com'
- img: html_burger.png
- name: HTML Burger
- - url: 'https://www.frontenddeveloperlove.com/'
- img: frontendlove.png
- name: FrontendLove
- - url: 'https://neds.com.au/'
- img: neds.png
- name: Neds
- - url: 'https://icons8.com/'
- img: icons_8.png
- name: Icons 8
- - url: 'https://tidelift.com/subscription/npm/vue'
+ - name: Tidelift
+ url: https://tidelift.com/subscription/npm/vue
img: tidelift.png
- name: Tidelift
- - url: 'https://www.firesticktricks.com/'
- img: firestick_tricks.png
- name: Firestick Tricks
- - url: 'https://intygrate.com/'
+ - name: Intygrate
+ url: https://intygrate.com/
img: intygrate.png
- name: Intygrate
- - url: 'http://en.shopware.com/'
- img: shopware_ag.png
- name: shopware AG
- - url: 'https://www.vpnranks.com/'
- img: vpnranks.png
- name: VPNRanks
- - url: 'https://www.bacancytechnology.com/hire-vuejs-developer'
- img: bacancy_technology.png
- name: Bacancy Technology
- - url: 'https://www.bestvpn.co/'
- img: bestvpn_co.png
- name: BestVPN.co
- - url: 'https://www.y8.com/'
+ - name: Y8
+ url: https://www.y8.com/
img: y8.png
- name: Y8
- - url: 'https://js.devexpress.com/'
+ - name: DevExpress
+ url: https://js.devexpress.com/
img: devexpress.png
- name: DevExpress
- - url: 'https://fastcoding.jp/javascript/ '
+ - name: FASTCODING Inc
+ url: 'https://fastcoding.jp/javascript/ '
img: fastcoding_inc.svg
- name: FASTCODING Inc
- - url: 'https://usave.co.uk/utilities/broadband'
- img: usave.png
- name: usave
- - url: 'https://storekit.com'
- img: storekit.png
- name: StoreKit
- - url: 'https://www.foo.software'
- img: foo.png
- name: Foo
- - url: 'https://flatlogic.com/templates'
- img: flatlogic_templates.svg
- name: Flatlogic Templates
- - url: 'https://www.layer0.co'
- img: layer0.png
- name: Layer0
- - url: 'https://vpn-review.com/netflix-vpn'
- img: vpn_review.png
- name: VPN Review
- - url: 'https://cosmos.network/'
- img: tendermint.png
- name: Tendermint
- - url: 'https://www.okayhq.com/'
- img: okay.png
- name: Okay
- - url: 'https://www.vpsserver.com'
- img: vpsserver_com.png
- name: VPSServer.com
- - url: 'https://aussiecasinohex.com/'
- img: aussiecasinohex.svg
- name: AussieCasinoHEX
- - url: 'https://litslink.com'
- img: litslink.png
- name: LITSLINK
- - url: 'https://newicon.net'
- img: newicon.png
- name: Newicon
- - url: 'https://lowdefy.com?k=w432'
- img: lowdefy.png
- name: Lowdefy
- - url: 'https://quickbookstoolhub.com/'
- img: quickbooks_tool_hub.png
- name: Quickbooks Tool Hub
- - url: 'https://linecorp.com'
- img: line_corporation.png
- name: LINE Corporation
- - url: 'https://exmax.it/'
- img: exmax.png
- name: Exmax
-silver_sponsors:
- - url: 'https://roadster.com'
- img: roadster.png
- name: Roadster
- - url: 'https://www.inkoop.io'
- img: inkoop.png
- name: Inkoop
- - url: 'https://www.thecasinodb.com'
- img: isolutions_uk_limited.png
- name: iSolutions UK Limited
- - url: 'https://teamextension.io'
+ - name: LY Corporation
+ url: https://www.lycorp.co.jp/en/
+ img: ly_corporation.png?v2
+ - name: Fenêtre Online Solutions
+ url: https://www.fenetre.nl/
+ img: fen_tre_online_solutions.svg
+ - name: Ant Design Vue
+ url: https://antdv.com
+ img: ant_design_vue.png
+ - name: Crisp
+ url: https://crisp.chat/en/
+ img: crisp.png
+ - name: Localazy
+ url: >-
+ https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=vuejs&utm_medium=banner&utm_campaign=sponsorships_vuejs&utm_content=logo
+ img: localazy.svg
+ - name: Casinoburst.com
+ url: https://casinoburst.com/casino-utan-licens/
+ img: casinoburst_com.png
+ - name: 'Enkrypt: Ethereum and Polkadot Web3 Wallet'
+ url: https://www.enkrypt.com
+ img: enkrypt__ethereum_and_polkadot_web3_wallet.svg
+ - name: uudetkasinot.com
+ url: https://www.uudetkasinot.com
+ img: uudetkasinot_com.png
+ - name: Fathom Analytics
+ url: https://usefathom.com/
+ img: fathom_analytics.svg
+ - name: Goread.io
+ url: https://goread.io/buy-instagram-followers
+ img: goread_io.png
+ - name: Sentry
+ url: https://sentry.io/for/vue?utm_source=vuejs.org&utm_medium=paid-community
+ img: sentry.png
+ - name: Poprey.com
+ url: https://poprey.com/
+ img: poprey_com.png
+ - name: Ilmaiset Pitkävetovihjeet
+ url: https://www.vedonlyontibonukset.com/pitkavetovihjeet
+ img: ilmaiset_pitk_vetovihjeet.png
+ - name: Famoid
+ url: https://famoid.com/
+ img: famoid.png
+ - name: Certible
+ url: https://www.certible.com
+ img: certible.svg
+ - name: FORTUNE GAMES
+ url: https://www.fortunegames.com
+ img: fortune_games.png
+ - name: TBDC - Agro Software
+ url: http://tbdc.com.br/
+ img: tbdc___agro_software.svg
+ - name: FineProxy
+ url: https://fineproxy.org/
+ img: fineproxy.svg
+ - name: Daniel
+ url: >-
+ https://rxdb.info/?utm_source=sponsor&utm_medium=opencollective&utm_campaign=opencollective-vuejs
+ img: daniel.png
+ - name: SurveyJS
+ url: https://surveyjs.io/
+ img: surveyjs.png?v2
+ - name: Stormlikes
+ url: https://www.stormlikes.net/buy-instagram-followers
+ img: stormlikes.png
+silver:
+ - name: Draxlr
+ url: https://www.draxlr.com
+ img: draxlr.svg
+ - name: Team Extension North America Inc
+ url: https://teamextension.io
img: team_extension_north_america_inc.png
- name: Team Extension North America Inc
- - url: 'https://freebets.us'
+ - name: Free Bets US
+ url: https://freebets.us
img: free_bets_us.png
- name: Free Bets US
- - url: 'https://betting.bet'
- img: betting_bet.png
- name: betting.bet
-bronze_sponsors:
- - url: 'https://www.accelebrate.com/'
- img: accelebrate.png
- name: Accelebrate
- - url: 'https://polyglotengineer.com/derek.pollard'
+ - name: Doximity
+ url: https://technology.doximity.com/
+ img: doximity.png
+ - name: Interflora Group
+ url: https://www.interflora.fr
+ img: interflora_group.png
+ - name: Codesmith
+ url: https://codesmith.io
+ img: codesmith.png
+ - name: Optimizers
+ url: https://www.optimizers.nl
+ img: optimizers.png
+ - name: FORTUNE GAMES
+ url: https://www.fortunegames.com
+ img: fortune_games.png
+ - name: Indy
+ url: https://www.indy.fr/
+ img: indy.png
+ - name: Buy Instagram Followers from SocialWick
+ url: https://www.socialwick.com/instagram/followers
+ img: buy_instagram_followers_from_socialwick.png
+ - name: Social Followers
+ url: https://www.socialfollowers.uk/buy-tiktok-followers/
+ img: social_followers.png
+ - name: Nettcasino
+ url: https://www.nettcasino.com/
+ img: nettcasino.png
+ - name: Spelpressen
+ url: https://spelpressen.se/
+ img: spelpressen.png
+ - name: Casino Utan Svensk Licens
+ url: https://casino-utan-svensk-licens.com/
+ img: casino_utan_svensk_licens.png
+ - name: Outlook India
+ url: >-
+ https://www.outlookindia.com/outlook-spotlight/casinos-not-on-gamstop-uk-news-302214/
+ img: outlook_india.png
+bronze:
+ - name: Derek Pollard
+ url: https://polyglotengineer.com/derek.pollard
img: derek_pollard.png
- name: Derek Pollard
- - url: 'https://www.earthlink.ro'
- img: earthlink.png
- name: Earthlink
- - url: 'https://www.webucator.com'
- img: webucator.png
- name: Webucator
- - url: 'https://memberful.com/'
- img: memberful.png
- name: Memberful
+ - name: BGASoft
+ url: https://www.bgasoft.com
+ img: bgasoft.png
+ - name: RStudio
+ url: https://rstudio.com
+ img: rstudio.png
+ - name: Darkhorse Analytics
+ url: https://www.darkhorseanalytics.com/
+ img: darkhorse_analytics.png
+ - name: vuejs.de - German Vue Community
+ url: https://vuejs.de
+ img: vuejs_de___german_vue_community.svg
+ - name: Liip AG
+ url: https://www.liip.ch/en
+ img: liip_ag.png
+ - name: Bürkert Werke GmbH & Co KG
+ url: https://www.burkert.com
+ img: b_rkert_werke_gmbh___co_kg.png
+ - name: codefortynine
+ url: https://codefortynine.com
+ img: codefortynine.png
+ - name: Arcanite
+ url: https://arcanite.ch
+ img: arcanite.png
+platinum_china:
+ - name: CRMEB
+ url: http://github.crmeb.net/u/vue
+ img: crmeb.svg?v2
+ description: 开源电商系统
+ - name: MISBoot
+ url: https://vue.misboot.com/#/user/Login?from=vuejs
+ img: misboot.png?v3
+ description: 低代码开发平台
+# END SPONSORS
+redirects:
+ '/v2/api/index.html': '/api/'
+ '/v2/guide/index.html': '/guide/introduction.html'
+ '/v2/guide/installation.html': '/guide/quick-start.html'
+ '/v2/guide/instance.html': '/guide/essentials/application.html' # has page redirects
+ '/v2/guide/syntax.html': '/guide/essentials/template-syntax.html'
+ '/v2/guide/computed.html': '/guide/essentials/computed.html' # has page redirects
+ '/v2/guide/class-and-style.html': '/guide/essentials/class-and-style.html'
+ '/v2/guide/conditional.html': '/guide/essentials/conditional.html'
+ '/v2/guide/list.html': '/guide/essentials/list.html'
+ '/v2/guide/events.html': '/guide/essentials/event-handling.html'
+ '/v2/guide/forms.html': '/guide/essentials/forms.html'
+ '/v2/guide/components.html': '/guide/essentials/component-basics.html'
+ '/v2/guide/components-registration.html': '/guide/components/registration.html'
+ '/v2/guide/components-props.html': '/guide/components/props.html' # has page redirects
+ '/v2/guide/components-custom-events.html': '/guide/components/events.html'
+ '/v2/guide/components-slots.html': '/guide/components/slots.html'
+ '/v2/guide/components-dynamic-async.html': '/guide/built-ins/keep-alive.html' # has page redirects
+ '/v2/guide/transitions.html': '/guide/built-ins/transition.html' # has page redirects
+ '/v2/guide/transitioning-state.html': '/guide/extras/animation.html'
+ '/v2/guide/custom-directive.html': '/guide/reusability/custom-directives.html'
+ '/v2/guide/render-function.html': '/guide/extras/render-function.html'
+ '/v2/guide/plugins.html': '/guide/reusability/plugins.html'
+ '/v2/guide/single-file-components.html': '/guide/scaling-up/sfc.html'
+ '/v2/guide/testing.html': '/guide/scaling-up/testing.html'
+ '/v2/guide/typescript.html': '/guide/typescript/overview.html'
+ '/v2/guide/deployment.html': '/guide/best-practices/production-deployment.html'
+ '/v2/guide/routing.html': '/guide/scaling-up/routing.html'
+ '/v2/guide/state-management.html': '/guide/scaling-up/state-management.html'
+ '/v2/guide/ssr.html': '/guide/scaling-up/ssr.html'
+ '/v2/guide/security.html': '/guide/best-practices/security.html'
+ '/v2/guide/reactivity.html': '/guide/extras/reactivity-in-depth.html'
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index ea8840e0e0..efb5587336 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -1,3 +1,5 @@
+<% function logo(img) { return `https://sponsors.vuejs.org/images/${img}` } %>
+
- You’re browsing the documentation for v2.x and earlier.
- Click here for v3.x documentation.
+ Vue 2 has reached EOL and is no longer actively maintained.
+ Upgrade to Vue 3
+ or learn more about
+ |
+ Vue 2 EOL.