BranchesTags

Latest commit

History

4,858 Commits

Folders and files

NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts

Repository files navigation


Element Plus - A Vue.js 3 UI library

  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript

Getting Started

Alright, for you to get started if you are looking for making Element Plus better you should keep reading. For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.

Breaking change list

The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.

You can find the breaking change list here: Breaking Change List.

Migration Tool πŸ› οΈ

We have made a migration tool for you to migrate your project from Element UI to Element Plus.

You can find the gogo code migration tool here.

We have tested this on Vue Element Admin. You can find the transpiled code here.

Playground

You can also try Element Plus out with the components built-in playground.

Try it with our built-in playground

Playground

Try it with code sandbox

Edit element-plus

Special thanks to the generous sponsorship by:


Platinum Sponsors

Gold Sponsors

Translations

Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become a proofreader Crowdin

For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link above and leave a message if you want to help translating Element Plus into your desired language.

How to help translating

See how to help translating in Translating Element Plus.

Stay tuned πŸ‘€

Join our Discord to start communicating with everybody.

This thing is broken, I should help improve it!

Awesommmmmmee. Everything you need is down below. You can also refer to CONTRIBUTING and Code of Conduct where you'll find the same information listed below.

I would like to become a part of the development team!

Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please reach out to us, you are more than welcomed to join us! ❀️

We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™

Contributors

This project exists thanks to all the people who contribute.

And thank you to all our backers! πŸ™

License

Element Plus is open source software licensed as MIT.

About

πŸŽ‰ A Vue.js 3 UI Library made by Element team

element-plus.org

Resources

Readme
License

Code of conduct

Code of conduct

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Latest commit
History
4,858 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts
Repository files navigation

Element Plus - A Vue.js 3 UI library
  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript
Getting Started
Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.
Breaking change list
The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
Migration Tool πŸ› οΈ
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here.
Playground
You can also try Element Plus out with the components built-in playground.
Try it with our built-in playground
Playground
Try it with code sandbox
Edit element-plus
Special thanks to the generous sponsorship by:

Platinum Sponsors
Gold Sponsors
Translations
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader Crowdin
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link
above and leave a message if you want to help translating Element Plus into your desired language.
How to help translating
See how to help translating in Translating Element Plus.
Stay tuned πŸ‘€
Join our Discord to start communicating with everybody.
This thing is broken, I should help improve it!
Awesommmmmmee. Everything you need is down below. You can also refer to
CONTRIBUTING and
Code of Conduct
where you'll find the same information listed below.
I would like to become a part of the development team!
Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please
reach out to us, you are more than welcomed to join us! ❀️
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™
Contributors
This project exists thanks to all the people who contribute.
And thank you to all our backers! πŸ™
License
Element Plus is open source software licensed as
MIT.
About
πŸŽ‰ A Vue.js 3 UI Library made by Element team
element-plus.org
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
4,858 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts
Repository files navigation

Element Plus - A Vue.js 3 UI library
  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript
Getting Started
Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.
Breaking change list
The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
Migration Tool πŸ› οΈ
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here.
Playground
You can also try Element Plus out with the components built-in playground.
Try it with our built-in playground
Playground
Try it with code sandbox
Edit element-plus
Special thanks to the generous sponsorship by:

Platinum Sponsors
Gold Sponsors
Translations
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader Crowdin
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link
above and leave a message if you want to help translating Element Plus into your desired language.
How to help translating
See how to help translating in Translating Element Plus.
Stay tuned πŸ‘€
Join our Discord to start communicating with everybody.
This thing is broken, I should help improve it!
Awesommmmmmee. Everything you need is down below. You can also refer to
CONTRIBUTING and
Code of Conduct
where you'll find the same information listed below.
I would like to become a part of the development team!
Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please
reach out to us, you are more than welcomed to join us! ❀️
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™
Contributors
This project exists thanks to all the people who contribute.
And thank you to all our backers! πŸ™
License
Element Plus is open source software licensed as
MIT.
About
πŸŽ‰ A Vue.js 3 UI Library made by Element team
element-plus.org
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
4,858 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts
Repository files navigation

Element Plus - A Vue.js 3 UI library
  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript
Getting Started
Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.
Breaking change list
The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
Migration Tool πŸ› οΈ
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here.
Playground
You can also try Element Plus out with the components built-in playground.
Try it with our built-in playground
Playground
Try it with code sandbox
Edit element-plus
Special thanks to the generous sponsorship by:

Platinum Sponsors
Gold Sponsors
Translations
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader Crowdin
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link
above and leave a message if you want to help translating Element Plus into your desired language.
How to help translating
See how to help translating in Translating Element Plus.
Stay tuned πŸ‘€
Join our Discord to start communicating with everybody.
This thing is broken, I should help improve it!
Awesommmmmmee. Everything you need is down below. You can also refer to
CONTRIBUTING and
Code of Conduct
where you'll find the same information listed below.
I would like to become a part of the development team!
Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please
reach out to us, you are more than welcomed to join us! ❀️
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™
Contributors
This project exists thanks to all the people who contribute.
And thank you to all our backers! πŸ™
License
Element Plus is open source software licensed as
MIT.
About
πŸŽ‰ A Vue.js 3 UI Library made by Element team
element-plus.org
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Latest commit
History
4,858 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts
Repository files navigation

Element Plus - A Vue.js 3 UI library
  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript
Getting Started
Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.
Breaking change list
The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
Migration Tool πŸ› οΈ
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here.
Playground
You can also try Element Plus out with the components built-in playground.
Try it with our built-in playground
Playground
Try it with code sandbox
Edit element-plus
Special thanks to the generous sponsorship by:

Platinum Sponsors
Gold Sponsors
Translations
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader Crowdin
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link
above and leave a message if you want to help translating Element Plus into your desired language.
How to help translating
See how to help translating in Translating Element Plus.
Stay tuned πŸ‘€
Join our Discord to start communicating with everybody.
This thing is broken, I should help improve it!
Awesommmmmmee. Everything you need is down below. You can also refer to
CONTRIBUTING and
Code of Conduct
where you'll find the same information listed below.
I would like to become a part of the development team!
Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please
reach out to us, you are more than welcomed to join us! ❀️
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™
Contributors
This project exists thanks to all the people who contribute.
And thank you to all our backers! πŸ™
License
Element Plus is open source software licensed as
MIT.
About
πŸŽ‰ A Vue.js 3 UI Library made by Element team
element-plus.org
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
4,858 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts
Repository files navigation

Element Plus - A Vue.js 3 UI library
  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript
Getting Started
Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.
Breaking change list
The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
Migration Tool πŸ› οΈ
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here.
Playground
You can also try Element Plus out with the components built-in playground.
Try it with our built-in playground
Playground
Try it with code sandbox
Edit element-plus
Special thanks to the generous sponsorship by:

Platinum Sponsors
Gold Sponsors
Translations
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader Crowdin
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link
above and leave a message if you want to help translating Element Plus into your desired language.
How to help translating
See how to help translating in Translating Element Plus.
Stay tuned πŸ‘€
Join our Discord to start communicating with everybody.
This thing is broken, I should help improve it!
Awesommmmmmee. Everything you need is down below. You can also refer to
CONTRIBUTING and
Code of Conduct
where you'll find the same information listed below.
I would like to become a part of the development team!
Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please
reach out to us, you are more than welcomed to join us! ❀️
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™
Contributors
This project exists thanks to all the people who contribute.
And thank you to all our backers! πŸ™
License
Element Plus is open source software licensed as
MIT.
About
πŸŽ‰ A Vue.js 3 UI Library made by Element team
element-plus.org
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
4,858 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts
Repository files navigation

Element Plus - A Vue.js 3 UI library
  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript
Getting Started
Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.
Breaking change list
The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
Migration Tool πŸ› οΈ
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here.
Playground
You can also try Element Plus out with the components built-in playground.
Try it with our built-in playground
Playground
Try it with code sandbox
Edit element-plus
Special thanks to the generous sponsorship by:

Platinum Sponsors
Gold Sponsors
Translations
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader Crowdin
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link
above and leave a message if you want to help translating Element Plus into your desired language.
How to help translating
See how to help translating in Translating Element Plus.
Stay tuned πŸ‘€
Join our Discord to start communicating with everybody.
This thing is broken, I should help improve it!
Awesommmmmmee. Everything you need is down below. You can also refer to
CONTRIBUTING and
Code of Conduct
where you'll find the same information listed below.
I would like to become a part of the development team!
Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please
reach out to us, you are more than welcomed to join us! ❀️
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™
Contributors
This project exists thanks to all the people who contribute.
And thank you to all our backers! πŸ™
License
Element Plus is open source software licensed as
MIT.
About
πŸŽ‰ A Vue.js 3 UI Library made by Element team
element-plus.org
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Latest commit
History
4,858 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.husky
.husky
.vscode
.vscode
breakings
breakings
docs
docs
internal
internal
packages
packages
play
play
scripts
scripts
ssr-testing
ssr-testing
typings
typings
.editorconfig
.editorconfig
.env
.env
.eslintignore
.eslintignore
.eslintrc.json
.eslintrc.json
.gitattributes
.gitattributes
.gitignore
.gitignore
.gitpod.yml
.gitpod.yml
.markdownlint.json
.markdownlint.json
.npmrc
.npmrc
.nvmrc
.nvmrc
.prettierignore
.prettierignore
.prettierrc
.prettierrc
CHANGELOG.en-US.md
CHANGELOG.en-US.md
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CONTRIBUTING.md
LICENSE
LICENSE
README.md
README.md
codecov.yml
codecov.yml
commitlint.config.js
commitlint.config.js
commitlint.config.ts
commitlint.config.ts
global.d.ts
global.d.ts
package.json
package.json
pnpm-lock.yaml
pnpm-lock.yaml
pnpm-workspace.yaml
pnpm-workspace.yaml
tsconfig.base.json
tsconfig.base.json
tsconfig.json
tsconfig.json
tsconfig.node.json
tsconfig.node.json
tsconfig.play.json
tsconfig.play.json
tsconfig.vite-config.json
tsconfig.vite-config.json
tsconfig.vitest.json
tsconfig.vitest.json
tsconfig.web.json
tsconfig.web.json
vitest.config.ts
vitest.config.ts
vitest.setup.ts
vitest.setup.ts
Repository files navigation

Element Plus - A Vue.js 3 UI library
  • πŸ’ͺ Vue 3 Composition API
  • πŸ”₯ Written in TypeScript
Getting Started
Alright, for you to get started if you are looking for making Element Plus better you should keep reading.
For developers that uses Element Plus to develop your website you should go ahead visit Getting Started.
Breaking change list
The first stable release of Element Plus suitable for use in production was released on February 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
Migration Tool πŸ› οΈ
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here.
Playground
You can also try Element Plus out with the components built-in playground.
Try it with our built-in playground
Playground
Try it with code sandbox
Edit element-plus
Special thanks to the generous sponsorship by:

Platinum Sponsors
Gold Sponsors
Translations
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader Crowdin
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link
above and leave a message if you want to help translating Element Plus into your desired language.
How to help translating
See how to help translating in Translating Element Plus.
Stay tuned πŸ‘€
Join our Discord to start communicating with everybody.
This thing is broken, I should help improve it!
Awesommmmmmee. Everything you need is down below. You can also refer to
CONTRIBUTING and
Code of Conduct
where you'll find the same information listed below.
I would like to become a part of the development team!
Welcome 🀩! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please
reach out to us, you are more than welcomed to join us! ❀️
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. πŸ™
Contributors
This project exists thanks to all the people who contribute.
And thank you to all our backers! πŸ™
License
Element Plus is open source software licensed as
MIT.
About
πŸŽ‰ A Vue.js 3 UI Library made by Element team
element-plus.org
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages