diff --git a/.github/contributing/writing-guide.md b/.github/contributing/writing-guide.md
index 44320ee1ab..a686f0924e 100644
--- a/.github/contributing/writing-guide.md
+++ b/.github/contributing/writing-guide.md
@@ -10,15 +10,15 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
- Cognitive capacity is **depleted more slowly** when we help them feel consistently smart, powerful, and curious. Breaking things down into digestible pieces and minding the flow of the document can help keep them in this state.
- **Always try to see from the user's perspective.** When we understand something thoroughly, it becomes obvious to us. This is called _the curse of knowledge_. In order to write good documentation, try to remember what you first needed to know when learning this concept. What jargon did you need to learn? What did you misunderstand? What took a long time to really grasp? Good documentation meets users where they are. It can be helpful to practice explaining the concept to people in person before.
- **Describe the _problem_ first, then the solution.** Before showing how a feature works, it's important to explain why it exists. Otherwise, users won't have the context to know if this information is important to them (is it a problem they experience?) or what prior knowledge/experience to connect it to.
-- **While writing, don't be afraid to ask questions**, _especially_ if you're afraid they might be "dumb". Being vulnerable is hard, but it's the only way for us to more fully understand what we need to explain.
-- **Be involved in feature discussions.** The best APIs come from documentation-driven development, where we build features that are easy to explain, rather than trying to figure out how to explain them later. Asking questions (especially "dumb" questions) earlier often helps reveal confusions, inconsistencies, and problematic behavior before a breaking change would be required to fix them.
+- **While writing, don't be afraid to ask questions**, _especially_ if you're afraid that your questions might be "foolish". Being vulnerable is hard, but it's the only way for us to more fully understand what we need to explain.
+- **Be involved in feature discussions.** The best APIs come from documentation-driven development, where we build features that are easy to explain, rather than trying to figure out how to explain them later. Asking questions (especially "foolish" questions) earlier often helps reveal confusions, inconsistencies, and problematic behavior before a breaking change would be required to fix them.
## Organization
- **Installation/Integration**: Provide a thorough overview of how to integrate the software into as many different kinds of projects as necessary.
- **Introduction/Getting Started**:
- Provide a less than 10 minute overview of the problems the project solves and why it exists.
- - Provide a less than 30 minute overview of the problems the project solves and how, including when and why to use the project and some simple code examples. At the end, link to both to Installation page and the beginning of the Essentials Guide.
+ - Provide a less than 30 minute overview of the problems the project solves and how, including when and why to use the project and some simple code examples. At the end, link to both the Installation page and the beginning of the Essentials Guide.
- **Guide**: Make users feel smart, powerful, and curious, then maintain this state so that users maintain the motivation and cognitive capacity to keep learning more. Guide pages are meant to be read sequentially, so should generally be ordered from the highest to lowest power/effort ratio.
- **Essentials**: It should take no longer than 5 hours to read the Essentials, though shorter is better. Its goal is to provide the 20% of knowledge that will help users handle 80% of use cases. Essentials can link to more advanced guides and the API, though, in most cases, you should avoid such links. When they are provided, you need also provide a context so users are aware if they should follow this link on their first reading. Otherwise, many users end up exhausting their cognitive capacity link-hopping, trying to fully learn every aspect of a feature before moving on, and as a result, never finish that first read-through of the Essentials. Remember that a smooth read is more important than being thorough. We want to give people the information they need to avoid a frustrating experience, but they can always come back and read further, or Google a less common problem when they encounter it.
- **Advanced**: While the Essentials helps people handle ~80% of use cases, subsequent guides help get users to 95% of use cases, plus more detailed information on non-essential features (e.g. transitions, animations), more complex convenience features (e.g. mixins, custom directives), and dev experience improvements (e.g. JSX, plugins). The final 5% of use cases that are more niche, complex, and/or prone to abuse will be left to the cookbook and API reference, which can be linked to from these advanced guides.
@@ -59,9 +59,9 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
- **When referencing a directly following example, use a colon (`:`) to end a sentence**, rather than a period (`.`).
- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). 
- Source: [The Serial (Oxford) Comma: When and Why To Use It](https://www.inkonhand.com/2015/10/the-serial-oxford-comma-when-and-why-to-use-it/)
-- **When referencing the name of a project, use the name that project refers to itself as.** For example, "webpack" and "npm" should both use lowercase as that's how their documentation refers to them.
+- **When referencing the name of a project, use the name that the project refers to itself as.** For example, "webpack" and "npm" should both use lowercase as that's how their documentation refers to them.
- **Use Title Case for headings** - at least for now, since it's what we use through the rest of the docs. There's research suggesting that sentence case (only first word of the heading starts with a capital) is actually superior for legibility and also reduces the cognitive overhead for documentation writers, since they don't have to try to remember whether to capitalize words like "and", "with", and "about".
-- **Don't use emojis (except in discussions).** Emojis are cute and friendly, but they can be a distraction in documentation and some emoji even convey different meanings in different cultures.
+- **Don't use emojis (except in discussions).** Emojis are cute and friendly, but they can be a distraction in documentation and some emojis even convey different meanings in different cultures.
## Iteration & Communication
@@ -85,11 +85,11 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
### Tips, Callouts, Alerts, and Line Highlights
-We have some dedicated styles to denote something that's worth highlighting in a particular way. These are captured [on this page](https://vitepress.vuejs.org/guide/markdown.html#custom-containers). **They are to be used sparingly.**
+We have some dedicated styles to denote something that's worth highlighting in a particular way. These are captured [on this page](https://vitepress.dev/guide/markdown#custom-containers). **They are to be used sparingly.**
-There is a certain temptation to abuse these styles, as one can simply add a change inside a callout. However, this breaks up the flow of reading for the user, and thus, should only be used in special circumstances. Wherever possible, we should attempt to create a narrative and flow within the page to respect the readers cognitive load.
+There is a certain temptation to abuse these styles, as one can simply add a change inside a callout. However, this breaks up the flow of reading for the user and should only be used in special circumstances. Wherever possible, we should attempt to create a narrative and flow within the page to respect the reader's cognitive load.
-Under no circumstances should 2 alerts be used next to one another, it's a sign that we're not able to explain context well enough.
+Under no circumstances should two alerts be used next to one another, it's a sign that we're not able to explain context well enough.
### Contributing
diff --git a/.gitignore b/.gitignore
index b4a9415240..e52da2f480 100644
--- a/.gitignore
+++ b/.gitignore
@@ -95,8 +95,10 @@ pnpm-global
# rollup.js default build output
dist/
-# vuepress build output
-.vuepress/dist
+# vitepress build output
+.vitepress/dist
+.vitepress/cache
+.vitepress/.temp
# Serverless directories
.serverless/
@@ -109,3 +111,6 @@ src/api/index.json
src/examples/data.json
src/tutorial/data.json
draft.md
+
+# folders created by IDE
+.idea
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000..e941d13c20
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+package-manager-strict=false
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..65a7d0588f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+*.vue
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 8f07a4f4fb..80c74de089 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -1,11 +1,13 @@
import fs from 'fs'
import path from 'path'
-import { defineConfigWithTheme } from 'vitepress'
+import { defineConfigWithTheme, type HeadConfig, type Plugin } from 'vitepress'
import type { Config as ThemeConfig } from '@vue/theme'
+import llmstxt from 'vitepress-plugin-llms'
import baseConfig from '@vue/theme/config'
import { headerPlugin } from './headerMdPlugin'
+// import { textAdPlugin } from './textAdMdPlugin'
-const nav = [
+const nav: ThemeConfig['nav'] = [
{
text: 'Docs',
activeMatch: `^/(guide|style-guide|cookbook|examples)/`,
@@ -15,6 +17,8 @@ const nav = [
{ text: 'Examples', link: '/examples/' },
{ text: 'Quick Start', link: '/guide/quick-start' },
// { text: 'Style Guide', link: '/style-guide/' },
+ { text: 'Glossary', link: '/glossary/' },
+ { text: 'Error Reference', link: '/error-reference/' },
{
text: 'Vue 2 Docs',
link: 'https://v2.vuejs.org/'
@@ -32,7 +36,7 @@ const nav = [
},
{
text: 'Playground',
- link: 'https://sfc.vuejs.org/'
+ link: 'https://play.vuejs.org/'
},
{
text: 'Ecosystem',
@@ -42,16 +46,23 @@ const nav = [
text: 'Resources',
items: [
{ text: 'Partners', link: '/partners/' },
+ { text: 'Developers', link: '/developers/' },
{ text: 'Themes', link: '/ecosystem/themes' },
+ { text: 'UI Components', link: 'https://ui-libs.vercel.app/' },
+ {
+ text: 'Certification',
+ link: 'https://certificates.dev/vuejs/?ref=vuejs-nav'
+ },
{ text: 'Jobs', link: 'https://vuejobs.com/?ref=vuejs' },
{ text: 'T-Shirt Shop', link: 'https://vue.threadless.com/' }
]
},
{
- text: 'Core Libraries',
+ text: 'Official Libraries',
items: [
{ text: 'Vue Router', link: 'https://router.vuejs.org/' },
- { text: 'Pinia', link: 'https://pinia.vuejs.org/' }
+ { text: 'Pinia', link: 'https://pinia.vuejs.org/' },
+ { text: 'Tooling Guide', link: '/guide/scaling-up/tooling.html' }
]
},
{
@@ -86,8 +97,8 @@ const nav = [
items: [
{ text: 'Blog', link: 'https://blog.vuejs.org/' },
{ text: 'Twitter', link: 'https://twitter.com/vuejs' },
- { text: 'Newsletter', link: 'https://news.vuejs.org/' },
- { text: 'Events', link: 'https://events.vuejs.org/' }
+ { text: 'Events', link: 'https://events.vuejs.org/' },
+ { text: 'Newsletters', link: '/ecosystem/newsletters' }
]
}
]
@@ -104,6 +115,7 @@ const nav = [
link: '/about/community-guide'
},
{ text: 'Code of Conduct', link: '/about/coc' },
+ { text: 'Privacy Policy', link: '/about/privacy' },
{
text: 'The Documentary',
link: 'https://www.youtube.com/watch?v=OrxmtDw4pVI'
@@ -115,13 +127,17 @@ const nav = [
link: '/sponsor/'
},
{
- text: 'Partners',
- link: '/partners/',
- activeMatch: `^/partners/`
+ text: 'Experts',
+ badge: { text: 'NEW' },
+ activeMatch: `^/(partners|developers)/`,
+ items: [
+ { text: 'Partners', link: '/partners/' },
+ { text: 'Developers', link: '/developers/', badge: { text: 'NEW' } }
+ ]
}
]
-export const sidebar = {
+export const sidebar: ThemeConfig['sidebar'] = {
'/guide/': [
{
text: 'Getting Started',
@@ -166,15 +182,15 @@ export const sidebar = {
link: '/guide/essentials/event-handling'
},
{ text: 'Form Input Bindings', link: '/guide/essentials/forms' },
- {
- text: 'Lifecycle Hooks',
- link: '/guide/essentials/lifecycle'
- },
{ text: 'Watchers', link: '/guide/essentials/watchers' },
{ text: 'Template Refs', link: '/guide/essentials/template-refs' },
{
text: 'Components Basics',
link: '/guide/essentials/component-basics'
+ },
+ {
+ text: 'Lifecycle Hooks',
+ link: '/guide/essentials/lifecycle'
}
]
},
@@ -187,6 +203,7 @@ export const sidebar = {
},
{ text: 'Props', link: '/guide/components/props' },
{ text: 'Events', link: '/guide/components/events' },
+ { text: 'Component v-model', link: '/guide/components/v-model' },
{
text: 'Fallthrough Attributes',
link: '/guide/components/attrs'
@@ -311,16 +328,11 @@ export const sidebar = {
{
text: 'Animation Techniques',
link: '/guide/extras/animation'
- },
- {
- text: 'Reactivity Transform',
- link: '/guide/extras/reactivity-transform'
}
// {
// text: 'Building a Library for Vue',
// link: '/guide/extras/building-a-library'
// },
- // { text: 'Custom Renderers', link: '/guide/extras/custom-renderer' },
// {
// text: 'Vue for React Devs',
// link: '/guide/extras/vue-for-react-devs'
@@ -362,6 +374,10 @@ export const sidebar = {
{
text: 'Dependency Injection',
link: '/api/composition-api-dependency-injection'
+ },
+ {
+ text: 'Helpers',
+ link: '/api/composition-api-helpers'
}
]
},
@@ -401,7 +417,7 @@ export const sidebar = {
]
},
{
- text: 'Single File Component',
+ text: 'Single-File Component',
items: [
{ text: 'Syntax Specification', link: '/api/sfc-spec' },
{ text: '
+
+
+
+
+
+ Some pages contain different content based on the API style
+ chosen. Use this switch to toggle between APIs styles.
+
+
+
+
+ Showing content for
+ {{ preferComposition ? 'Composition' : 'Options' }} API because
+ {{
+ source === 'url-query'
+ ? 'it is specified by the URL query.'
+ : 'the target section is only available for that API.'
+ }}
+
+
+ This is different from your saved preference and will only affect
+ the current browsing session.
+
The current latest stable version of Vue is {{ version }}.
@@ -24,7 +24,7 @@ Checking latest version...
A full changelog of past releases is available on [GitHub](https://github.com/vuejs/core/blob/main/CHANGELOG.md).
-## Release Cycle
+## Release Cycle {#release-cycle}
Vue does not have a fixed release cycle.
@@ -34,11 +34,11 @@ Vue does not have a fixed release cycle.
- Major releases will be announced ahead of time, and will go through an early discussion phase and alpha / beta pre-release phases.
-## Semantic Versioning Edge Cases
+## Semantic Versioning Edge Cases {#semantic-versioning-edge-cases}
Vue releases follow [Semantic Versioning](https://semver.org/) with a few edge cases.
-### TypeScript Definitions
+### TypeScript Definitions {#typescript-definitions}
We may ship incompatible changes to TypeScript definitions between **minor** versions. This is because:
@@ -48,30 +48,32 @@ We may ship incompatible changes to TypeScript definitions between **minor** ver
If you are using TypeScript, you can use a semver range that locks the current minor and manually upgrade when a new minor version of Vue is released.
-### Compiled Code Compatibility with Older Runtime
+### Compiled Code Compatibility with Older Runtime {#compiled-code-compatibility-with-older-runtime}
A newer **minor** version of Vue compiler may generate code that isn't compatible with the Vue runtime from an older minor version. For example, code generated by Vue 3.2 compiler may not be fully compatible if consumed by the runtime from Vue 3.1.
-This is only a concern for library authors, because in applications, the compiler version and the runtime version is always the same. A version mismatch can only happen if you ship pre-compiled Vue component code as a package, and a consumer uses it in a project using an older version of Vue. As a result, your package may need to explicit declare a minimum required minor version of Vue.
+This is only a concern for library authors, because in applications, the compiler version and the runtime version is always the same. A version mismatch can only happen if you ship pre-compiled Vue component code as a package, and a consumer uses it in a project using an older version of Vue. As a result, your package may need to explicitly declare a minimum required minor version of Vue.
-## Pre Releases
+## Pre Releases {#pre-releases}
Minor releases typically go through a non-fixed number of beta releases. Major releases will go through an alpha phase and a beta phase.
+Additionally, we publish canary releases every week from the `main` and `minor` branches on GitHub. They are published as different packages to avoid bloating the npm metadata of the stable channel. You can install them via `npx install-vue@canary` or `npx install-vue@canary-minor`, respectively.
+
Pre-releases are meant for integration / stability testing, and for early adopters to provide feedback for unstable features. Do not use pre-releases in production. All pre-releases are considered unstable and may ship breaking changes in between, so always pin to exact versions when using pre-releases.
-## Deprecations
+## Deprecations {#deprecations}
We may periodically deprecate features that have new, better replacements in minor releases. Deprecated features will continue to work, and will be removed in the next major release after it entered deprecated status.
-## RFCs
+## RFCs {#rfcs}
New features with substantial API surface and major changes to Vue will go through the **Request for Comments** (RFC) process. The RFC process is intended to provide a consistent and controlled path for new features to enter the framework, and give the users an opportunity to participate and offer feedback in the design process.
The RFC process is conducted in the [vuejs/rfcs](https://github.com/vuejs/rfcs) repo on GitHub.
-## Experimental Features
+## Experimental Features {#experimental-features}
-Some features are shipped and documented in a stable version of Vue, but marked as experimental. Experimental features are typically features that have an associated RFC discussion with most of the design problems resolved on paper, but still lacking feedback from real world usage.
+Some features are shipped and documented in a stable version of Vue, but marked as experimental. Experimental features are typically features that have an associated RFC discussion with most of the design problems resolved on paper, but still lacking feedback from real-world usage.
The goal of experimental features is to allow users to provide feedback for them by testing them in a production setting, without having to use an unstable version of Vue. Experimental features themselves are considered unstable, and should only be used in a controlled manner, with the expectation that the feature may change between any release types.
diff --git a/src/about/team/Member.ts b/src/about/team/Member.ts
index f124977e25..865be87ef4 100644
--- a/src/about/team/Member.ts
+++ b/src/about/team/Member.ts
@@ -5,7 +5,7 @@ export interface Member {
company?: string
companyLink?: string
projects: Link[]
- location: string
+ location: string | string[]
languages: string[]
website?: Link
socials: Socials
@@ -21,5 +21,6 @@ export interface Link {
export interface Socials {
github: string
twitter?: string
+ linkedin?: string
codepen?: string
}
diff --git a/src/about/team/TeamHero.vue b/src/about/team/TeamHero.vue
index 0ad0f9107e..974c61c9a7 100644
--- a/src/about/team/TeamHero.vue
+++ b/src/about/team/TeamHero.vue
@@ -66,7 +66,7 @@
font-size: 14px;
font-weight: 500;
color: var(--vt-c-brand);
- transition: color .25s;
+ transition: color 0.25s;
}
.action :deep(a:hover) {
diff --git a/src/about/team/TeamList.vue b/src/about/team/TeamList.vue
index 95aaa1d2b3..19b4bc2601 100644
--- a/src/about/team/TeamList.vue
+++ b/src/about/team/TeamList.vue
@@ -20,9 +20,12 @@ defineProps<{
Meet the Team
- The development of Vue and its ecosystem is guided by an international
- team, some of whom have chosen to be
- featured below.
+
+ The development of Vue and its ecosystem is guided by an
+ international team, some of whom have chosen to be
+ featured below.
+
Learn more about teams
+ Learn more about teams
+
-
+
Core Team Members
- Core team members are those who are actively involved in the
- maintenance of one or more core projects. They have made significant
- contributions to the Vue ecosystem, with a long term commitment to the
- success of the project and its users.
+
+ Core team members are those who are actively involved in the
+ maintenance of one or more core projects. They have made
+ significant contributions to the Vue ecosystem, with a long term
+ commitment to the success of the project and its users.
+
-
+
Core Team Emeriti
- Here we honor some no-longer-active core team members who have made
- valuable contributions in the past.
+
+ Here we honor some no-longer-active core team members who have made
+ valuable contributions in the past.
+
-
+
Community Partners
- Some members of the Vue community have so enriched it, that they
- deserve special mention. We've developed a more intimate relationship
- with these key partners, often coordinating with them on upcoming
- features and news.
+
+ Some members of the Vue community have so enriched it, that they
+ deserve special mention. We've developed a more intimate
+ relationship with these key partners, often coordinating with them
+ on upcoming features and news.
+
@@ -175,7 +165,7 @@ h3 {
margin-bottom: 20px;
background-color: var(--vt-c-bg-soft);
border-radius: 8px;
- padding: 28px 32px;
+ padding: 24px 28px;
transition: background-color 0.5s;
}
@@ -192,10 +182,15 @@ h3 {
gap: 1rem;
}
-.api-filter input {
+#api-filter {
border: 1px solid var(--vt-c-divider);
border-radius: 8px;
padding: 6px 12px;
+ transition: box-shadow 0.25s ease;
+}
+
+#api-filter:focus {
+ box-shadow: 0 0 4pt #00d47499;
}
.api-filter:focus {
diff --git a/src/api/api.data.ts b/src/api/api.data.ts
index 8f828e2544..5c4f023b35 100644
--- a/src/api/api.data.ts
+++ b/src/api/api.data.ts
@@ -1,16 +1,19 @@
// api.data.ts
-// a file ending with data.(j|t)s will be evaluated in Node.js
import fs from 'fs'
import path from 'path'
+import type { MultiSidebarConfig } from '@vue/theme/src/vitepress/config.ts'
import { sidebar } from '../../.vitepress/config'
+// Interface defining the structure of a single header in the API
interface APIHeader {
anchor: string
text: string
}
+// Interface defining the structure of an API group with text, anchor, and items
export interface APIGroup {
text: string
+ anchor: string
items: {
text: string
link: string
@@ -18,61 +21,108 @@ export interface APIGroup {
}[]
}
-// declare resolved data type
+// Declare the resolved data type for API groups
export declare const data: APIGroup[]
-export default {
- // declare files that should trigger HMR
- watch: './*.md',
- // read from fs and generate the data
- load(): APIGroup[] {
- return sidebar['/api/'].map((group) => ({
- text: group.text,
- items: group.items.map((item) => ({
- ...item,
- headers: parsePageHeaders(item.link)
- }))
- }))
- }
+// Utility function to generate a slug from a string (used for anchor links)
+function slugify(text: string): string {
+ return (
+ text
+ // Replace special characters and spaces with hyphens
+ .replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-')
+ // Remove continuous separators
+ .replace(/-{2,}/g, '-')
+ // Remove leading/trailing hyphens
+ .replace(/^-+|-+$/g, '')
+ // Ensure it doesn't start with a number (e.g. #121)
+ .replace(/^(\d)/, '_$1')
+ // Convert to lowercase
+ .toLowerCase()
+ )
}
-const headersCache = new Map<
- string,
- {
- headers: APIHeader[]
- timestamp: number
- }
->()
-
-function parsePageHeaders(link: string) {
- const fullPath = path.join(__dirname, '../', link) + '.md'
- const timestamp = fs.statSync(fullPath).mtimeMs
+// Utility function to parse headers from a markdown file at a given link
+function parsePageHeaders(link: string): APIHeader[] {
+ const fullPath = path.join(__dirname, '../', link) + '.md' // Resolve the full file path
+ const timestamp = fs.statSync(fullPath).mtimeMs // Get the last modified timestamp of the file
+ // Check if the file is cached and if its timestamp matches
const cached = headersCache.get(fullPath)
if (cached && timestamp === cached.timestamp) {
- return cached.headers
+ return cached.headers // Return cached headers if they're up-to-date
}
- const src = fs.readFileSync(fullPath, 'utf-8')
- const h2s = src.match(/^## [^\n]+/gm)
- let headers: APIHeader[] = []
- if (h2s) {
- headers = h2s.map((h) => {
- const text = h
- .slice(2)
- .replace(/ {
+ const text = cleanHeaderText(h, anchorRE) // Clean up header text
+ const anchor = extractAnchor(h, anchorRE, text) // Extract or generate anchor
+ return { text, anchor }
+ })
+ }
+
return headers
}
+
+// Helper function to clean up header text (e.g., remove superscript, code formatting)
+function cleanHeaderText(h: string, anchorRE: RegExp): string {
+ return h
+ .slice(2) // Remove the "##" part of the header
+ .replace(/ tags)
+ .replace(/\\()
+
+// Main export function for loading the API data
+export default {
+ // Declare files that should trigger Hot Module Replacement (HMR)
+ watch: './*.md',
+
+ // Load API data and process sidebar items
+ load(): APIGroup[] {
+ // Generate the API group data by processing the sidebar configuration
+ return (sidebar as MultiSidebarConfig)['/api/'].map((group) => ({
+ text: group.text, // Text of the group (e.g., 'API')
+ anchor: slugify(group.text), // Generate anchor for the group title
+ items: group.items.map((item) => ({
+ ...item, // Spread the original item properties
+ headers: parsePageHeaders(item.link), // Parse the headers from the item's markdown link
+ }))
+ }))
+ }
+}
diff --git a/src/api/application.md b/src/api/application.md
index 72ebb26855..f6e96bbe73 100644
--- a/src/api/application.md
+++ b/src/api/application.md
@@ -1,6 +1,6 @@
-# Application API
+# Application API {#application-api}
-## createApp()
+## createApp() {#createapp}
Creates an application instance.
@@ -35,13 +35,13 @@ Creates an application instance.
const app = createApp(App)
```
-- **See also:** [Guide - Creating a Vue Application](/guide/essentials/application.html)
+- **See also** [Guide - Creating a Vue Application](/guide/essentials/application)
-## createSSRApp()
+## createSSRApp() {#createssrapp}
-Creates an application instance in [SSR Hydration](/guide/scaling-up/ssr.html#client-hydration) mode. Usage is exactly the same as `createApp()`.
+Creates an application instance in [SSR Hydration](/guide/scaling-up/ssr#client-hydration) mode. Usage is exactly the same as `createApp()`.
-## app.mount()
+## app.mount() {#app-mount}
Mounts the application instance in a container element.
@@ -59,7 +59,7 @@ Mounts the application instance in a container element.
If the component has a template or a render function defined, it will replace any existing DOM nodes inside the container. Otherwise, if the runtime compiler is available, the `innerHTML` of the container will be used as the template.
- In SSR hydration mode, it will hydrate the existing DOM nodes inside the container. If there are [mismatches](/guide/scaling-up/ssr.html#hydration-mismatch), the existing DOM nodes will be morphed to match the expected output.
+ In SSR hydration mode, it will hydrate the existing DOM nodes inside the container. If there are [mismatches](/guide/scaling-up/ssr#hydration-mismatch), the existing DOM nodes will be morphed to match the expected output.
For each app instance, `mount()` can only be called once.
@@ -78,7 +78,7 @@ Mounts the application instance in a container element.
app.mount(document.body.firstChild)
```
-## app.unmount()
+## app.unmount() {#app-unmount}
Unmounts a mounted application instance, triggering the unmount lifecycle hooks for all components in the application's component tree.
@@ -90,65 +90,19 @@ Unmounts a mounted application instance, triggering the unmount lifecycle hooks
}
```
-## app.provide()
+## app.onUnmount() {#app-onunmount}
-Provide a value that can be injected in all descendent components within the application.
+Registers a callback to be called when the app is unmounted.
- **Type**
```ts
interface App {
- provide(key: InjectionKey | symbol | string, value: T): this
- }
- ```
-
-- **Details**
-
- Expects the injection key as the first argument, and the provided value as the second. Returns the application instance itself.
-
-- **Example**
-
- ```js
- import { createApp } from 'vue'
-
- const app = createApp(/* ... */)
-
- app.provide('message', 'hello')
- ```
-
- Inside a component in the application:
-
-
-
-- **See also:**
- - [Provide / Inject](/guide/components/provide-inject.html)
- - [App-level Provide](/guide/components/provide-inject.html#app-level-provide)
-
-## app.component()
+## app.component() {#app-component}
Registers a global component if passing both a name string and a component definition, or retrieves an already registered one if only the name is passed.
@@ -169,17 +123,17 @@ Registers a global component if passing both a name string and a component defin
const app = createApp({})
// register an options object
- app.component('my-component', {
+ app.component('MyComponent', {
/* ... */
})
// retrieve a registered component
- const MyComponent = app.component('my-component')
+ const MyComponent = app.component('MyComponent')
```
-- **See also:** [Component Registration](/guide/components/registration.html)
+- **See also** [Component Registration](/guide/components/registration)
-## app.directive()
+## app.directive() {#app-directive}
Registers a global custom directive if passing both a name string and a directive definition, or retrieves an already registered one if only the name is passed.
@@ -202,24 +156,24 @@ Registers a global custom directive if passing both a name string and a directiv
})
// register (object directive)
- app.directive('my-directive', {
+ app.directive('myDirective', {
/* custom directive hooks */
})
// register (function directive shorthand)
- app.directive('my-directive', () => {
+ app.directive('myDirective', () => {
/* ... */
})
// retrieve a registered directive
- const myDirective = app.directive('my-directive')
+ const myDirective = app.directive('myDirective')
```
-- **See also:** [Custom Directives](/guide/reusability/custom-directives.html)
+- **See also** [Custom Directives](/guide/reusability/custom-directives)
-## app.use()
+## app.use() {#app-use}
-Installs a [plugin](/guide/reusability/plugins.html).
+Installs a [plugin](/guide/reusability/plugins).
- **Type**
@@ -250,16 +204,16 @@ Installs a [plugin](/guide/reusability/plugins.html).
app.use(MyPlugin)
```
-- **See also:** [Plugins](/guide/reusability/plugins.html)
+- **See also** [Plugins](/guide/reusability/plugins)
-## app.mixin()
+## app.mixin() {#app-mixin}
Applies a global mixin (scoped to the application). A global mixin applies its included options to every component instance in the application.
:::warning Not Recommended
Mixins are supported in Vue 3 mainly for backwards compatibility, due to their widespread use in ecosystem libraries. Use of mixins, especially global mixins, should be avoided in application code.
-For logic reuse, prefer [Composables](/guide/reusability/composables.html) instead.
+For logic reuse, prefer [Composables](/guide/reusability/composables) instead.
:::
- **Type**
@@ -270,9 +224,100 @@ For logic reuse, prefer [Composables](/guide/reusability/composables.html) inste
}
```
-## app.version
+## app.provide() {#app-provide}
-Provides the version of Vue that the application was created with. This is useful inside [plugins](/guide/reusability/plugins.html), where you might need conditional logic based on different Vue versions.
+Provide a value that can be injected in all descendant components within the application.
+
+- **Type**
+
+ ```ts
+ interface App {
+ provide(key: InjectionKey | symbol | string, value: T): this
+ }
+ ```
+
+- **Details**
+
+ Expects the injection key as the first argument, and the provided value as the second. Returns the application instance itself.
+
+- **Example**
+
+ ```js
+ import { createApp } from 'vue'
+
+ const app = createApp(/* ... */)
+
+ app.provide('message', 'hello')
+ ```
+
+ Inside a component in the application:
+
+
+
+- **See also**
+ - [Provide / Inject](/guide/components/provide-inject)
+ - [App-level Provide](/guide/components/provide-inject#app-level-provide)
+ - [app.runWithContext()](#app-runwithcontext)
+
+## app.runWithContext() {#app-runwithcontext}
+
+- Only supported in 3.3+
+
+Execute a callback with the current app as injection context.
+
+- **Type**
+
+ ```ts
+ interface App {
+ runWithContext(fn: () => T): T
+ }
+ ```
+
+- **Details**
+
+ Expects a callback function and runs the callback immediately. During the synchronous call of the callback, `inject()` calls are able to look up injections from the values provided by the current app, even when there is no current active component instance. The return value of the callback will also be returned.
+
+- **Example**
+
+ ```js
+ import { inject } from 'vue'
+
+ app.provide('id', 1)
+
+ const injected = app.runWithContext(() => {
+ return inject('id')
+ })
+
+ console.log(injected) // 1
+ ```
+
+## app.version {#app-version}
+
+Provides the version of Vue that the application was created with. This is useful inside [plugins](/guide/reusability/plugins), where you might need conditional logic based on different Vue versions.
- **Type**
@@ -297,9 +342,9 @@ Provides the version of Vue that the application was created with. This is usefu
}
```
-- **See also:** [Global API - version](/api/general.html#version)
+- **See also** [Global API - version](/api/general#version)
-## app.config
+## app.config {#app-config}
Every application instance exposes a `config` object that contains the configuration settings for that application. You can modify its properties (documented below) before mounting your application.
@@ -311,7 +356,7 @@ const app = createApp(/* ... */)
console.log(app.config)
```
-## app.config.errorHandler
+## app.config.errorHandler {#app-config-errorhandler}
Assign a global handler for uncaught errors propagating from within the application.
@@ -343,6 +388,10 @@ Assign a global handler for uncaught errors propagating from within the applicat
- Custom directive hooks
- Transition hooks
+ :::tip
+ In production, the 3rd argument (`info`) will be a shortened code instead of the full information string. You can find the code to string mapping in the [Production Error Code Reference](/error-reference/#runtime-errors).
+ :::
+
- **Example**
```js
@@ -351,7 +400,7 @@ Assign a global handler for uncaught errors propagating from within the applicat
}
```
-## app.config.warnHandler
+## app.config.warnHandler {#app-config-warnhandler}
Assign a custom handler for runtime warnings from Vue.
@@ -385,27 +434,27 @@ Assign a custom handler for runtime warnings from Vue.
}
```
-## app.config.performance
+## app.config.performance {#app-config-performance}
Set this to `true` to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API.
-- **Type**: `boolean`
+- **Type:** `boolean`
-- **See also:** [Guide - Performance](/guide/best-practices/performance.html)
+- **See also** [Guide - Performance](/guide/best-practices/performance)
-## app.config.compilerOptions
+## app.config.compilerOptions {#app-config-compileroptions}
-Configure runtime compiler options. Values set on this object will be passed to the in-browser template compiler and affect every component in the configured app. Note you can also override these options on a per-component basis using the [`compilerOptions` option](/api/options-rendering.html#compileroptions).
+Configure runtime compiler options. Values set on this object will be passed to the in-browser template compiler and affect every component in the configured app. Note you can also override these options on a per-component basis using the [`compilerOptions` option](/api/options-rendering#compileroptions).
::: warning Important
This config option is only respected when using the full build (i.e. the standalone `vue.js` that can compile templates in the browser). If you are using the runtime-only build with a build setup, compiler options must be passed to `@vue/compiler-dom` via build tool configurations instead.
- For `vue-loader`: [pass via the `compilerOptions` loader option](https://vue-loader.vuejs.org/options.html#compileroptions). Also see [how to configure it in `vue-cli`](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader).
-- For `vite`: [pass via `@vitejs/plugin-vue` options](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#options).
+- For `vite`: [pass via `@vitejs/plugin-vue` options](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options).
:::
-### app.config.compilerOptions.isCustomElement
+### app.config.compilerOptions.isCustomElement {#app-config-compileroptions-iscustomelement}
Specifies a check method to recognize native custom elements.
@@ -426,9 +475,9 @@ Specifies a check method to recognize native custom elements.
}
```
-- **See also:** [Vue and Web Components](/guide/extras/web-components.html)
+- **See also** [Vue and Web Components](/guide/extras/web-components)
-### app.config.compilerOptions.whitespace
+### app.config.compilerOptions.whitespace {#app-config-compileroptions-whitespace}
Adjusts template whitespace handling behavior.
@@ -452,7 +501,7 @@ Adjusts template whitespace handling behavior.
app.config.compilerOptions.whitespace = 'preserve'
```
-### app.config.compilerOptions.delimiters
+### app.config.compilerOptions.delimiters {#app-config-compileroptions-delimiters}
Adjusts the delimiters used for text interpolation within the template.
@@ -471,7 +520,7 @@ Adjusts the delimiters used for text interpolation within the template.
app.config.compilerOptions.delimiters = ['${', '}']
```
-### app.config.compilerOptions.comments
+### app.config.compilerOptions.comments {#app-config-compileroptions-comments}
Adjusts treatment of HTML comments in templates.
@@ -489,7 +538,7 @@ Adjusts treatment of HTML comments in templates.
app.config.compilerOptions.comments = true
```
-## app.config.globalProperties
+## app.config.globalProperties {#app-config-globalproperties}
An object that can be used to register global properties that can be accessed on any component instance inside the application.
@@ -523,7 +572,9 @@ An object that can be used to register global properties that can be accessed on
}
```
-## app.config.optionMergeStrategies
+- **See also** [Guide - Augmenting Global Properties](/guide/typescript/options-api#augmenting-global-properties)
+
+## app.config.optionMergeStrategies {#app-config-optionmergestrategies}
An object for defining merging strategies for custom component options.
@@ -572,4 +623,42 @@ An object for defining merging strategies for custom component options.
// logs 'Hello Vue'
```
-- **See also:** [Component Instance - `$options`](/api/component-instance.html#options)
+- **See also** [Component Instance - `$options`](/api/component-instance#options)
+
+## app.config.idPrefix {#app-config-idprefix}
+
+Configure a prefix for all IDs generated via [useId()](/api/composition-api-helpers.html#useid) inside this application.
+
+- **Type:** `string`
+
+- **Default:** `undefined`
+
+- **Example**
+
+ ```js
+ app.config.idPrefix = 'myApp'
+ ```
+
+ ```js
+ // in a component:
+ const id1 = useId() // 'myApp:0'
+ const id2 = useId() // 'myApp:1'
+ ```
+
+## app.config.throwUnhandledErrorInProduction {#app-config-throwunhandlederrorinproduction}
+
+Force unhandled errors to be thrown in production mode.
+
+- **Type:** `boolean`
+
+- **Default:** `false`
+
+- **Details**
+
+ By default, errors thrown inside a Vue application but not explicitly handled have different behavior between development and production modes:
+
+ - In development, the error is thrown and can possibly crash the application. This is to make the error more prominent so that it can be noticed and fixed during development.
+
+ - In production, the error will only be logged to the console to minimize the impact to end users. However, this may prevent errors that only happen in production from being caught by error monitoring services.
+
+ By setting `app.config.throwUnhandledErrorInProduction` to `true`, unhandled errors will be thrown even in production mode.
diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md
index 44407c5359..462f1c1eba 100644
--- a/src/api/built-in-components.md
+++ b/src/api/built-in-components.md
@@ -2,12 +2,12 @@
pageClass: api
---
-# Built-in Components
+# Built-in Components {#built-in-components}
:::info Registration and Usage
Built-in components can be used directly in templates without needing to be registered. They are also tree-shakeable: they are only included in the build when they are used.
-When using them in [render functions](/guide/extras/render-function.html), they need to be imported explicitly. For example:
+When using them in [render functions](/guide/extras/render-function), they need to be imported explicitly. For example:
```js
import { h, Transition } from 'vue'
@@ -19,7 +19,7 @@ h(Transition, {
:::
-## ``
+## `` {#transition}
Provides animated transition effects to a **single** element or component.
@@ -102,6 +102,14 @@ Provides animated transition effects to a **single** element or component.
```
+ Forcing a transition by changing the `key` attribute:
+
+ ```vue-html
+
+
{{ text }}
+
+ ```
+
Dynamic component, with transition mode + animate on appear:
```vue-html
@@ -118,9 +126,9 @@ Provides animated transition effects to a **single** element or component.
```
-- **See also:** [`` Guide](/guide/built-ins/transition.html)
+- **See also** [Guide - Transition](/guide/built-ins/transition)
-## ``
+## `` {#transitiongroup}
Provides transition effects for **multiple** elements or components in a list.
@@ -150,7 +158,7 @@ Provides transition effects for **multiple** elements or components in a list.
By default, `` doesn't render a wrapper DOM element, but one can be defined via the `tag` prop.
- Note that every child in a `` must be [**uniquely keyed**](/guide/essentials/list.html#maintaining-state-with-key) for the animations to work properly.
+ Note that every child in a `` must be [**uniquely keyed**](/guide/essentials/list#maintaining-state-with-key) for the animations to work properly.
`` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` prop). If the CSS `transform` property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).
@@ -164,9 +172,9 @@ Provides transition effects for **multiple** elements or components in a list.
```
-- **See also:** [Guide - TransitionGroup](/guide/built-ins/transition-group.html)
+- **See also** [Guide - TransitionGroup](/guide/built-ins/transition-group)
-## ``
+## `` {#keepalive}
Caches dynamically toggled components wrapped inside.
@@ -257,9 +265,9 @@ Caches dynamically toggled components wrapped inside.
```
-- **See also:** [Guide - KeepAlive](/guide/built-ins/keep-alive.html)
+- **See also** [Guide - KeepAlive](/guide/built-ins/keep-alive)
-## ``
+## `` {#teleport}
Renders its slot content to another part of the DOM.
@@ -278,6 +286,12 @@ Renders its slot content to another part of the DOM.
* Can be changed dynamically.
*/
disabled?: boolean
+ /**
+ * When `true`, the Teleport will defer until other
+ * parts of the application have been mounted before
+ * resolving its target. (3.5+)
+ */
+ defer?: boolean
}
```
@@ -286,22 +300,31 @@ Renders its slot content to another part of the DOM.
Specifying target container:
```vue-html
-
-
-
+
+
+
```
Conditionally disabling:
```vue-html
-
+
+
```
-- **See also:** [Guide - Teleport](/guide/built-ins/teleport.html)
+ Defer target resolution :
+
+ ```vue-html
+ ...
-## ``
+
+
+ ```
+
+- **See also** [Guide - Teleport](/guide/built-ins/teleport)
+
+## `` {#suspense}
Used for orchestrating nested async dependencies in a component tree.
@@ -310,6 +333,7 @@ Used for orchestrating nested async dependencies in a component tree.
```ts
interface SuspenseProps {
timeout?: string | number
+ suspensible?: boolean
}
```
@@ -323,6 +347,8 @@ Used for orchestrating nested async dependencies in a component tree.
`` accepts two slots: the `#default` slot and the `#fallback` slot. It will display the content of the fallback slot while rendering the default slot in memory.
- If it encounters async dependencies ([Async Components](/guide/components/async.html) and components with [`async setup()`](/guide/built-ins/suspense.html#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.
+ If it encounters async dependencies ([Async Components](/guide/components/async) and components with [`async setup()`](/guide/built-ins/suspense#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.
+
+ By setting the Suspense as `suspensible`, all the async dependency handling will be handled by the parent Suspense. See [implementation details](https://github.com/vuejs/core/pull/6736)
-- **See also:** [Guide - Suspense](/guide/built-ins/suspense.html)
+- **See also** [Guide - Suspense](/guide/built-ins/suspense)
diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md
index 80c44e0089..8afb0bfc48 100644
--- a/src/api/built-in-directives.md
+++ b/src/api/built-in-directives.md
@@ -1,6 +1,6 @@
-# Built-in Directives
+# Built-in Directives {#built-in-directives}
-## v-text
+## v-text {#v-text}
Update the element's text content.
@@ -8,7 +8,7 @@ Update the element's text content.
- **Details**
- `v-text` works by setting the element's [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property, so it will overwrite any existing content inside the element. If you need to update the part of `textContent`, you should use [mustache interpolations](/guide/essentials/template-syntax.html#text-interpolation) instead.
+ `v-text` works by setting the element's [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property, so it will overwrite any existing content inside the element. If you need to update the part of `textContent`, you should use [mustache interpolations](/guide/essentials/template-syntax#text-interpolation) instead.
- **Example**
@@ -18,15 +18,15 @@ Update the element's text content.
{{msg}}
```
-- **See also:** [Template Syntax - Text Interpolation](/guide/essentials/template-syntax.html#text-interpolation)
+- **See also** [Template Syntax - Text Interpolation](/guide/essentials/template-syntax#text-interpolation)
-## v-html
+## v-html {#v-html}
Update the element's [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).
- **Expects:** `string`
-- **Details:**
+- **Details**
Contents of `v-html` are inserted as plain HTML - Vue template syntax will not be processed. If you find yourself trying to compose templates using `v-html`, try to rethink the solution by using components instead.
@@ -34,17 +34,17 @@ Update the element's [innerHTML](https://developer.mozilla.org/en-US/docs/Web/AP
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and **never** on user-provided content.
:::
- In [Single-File Components](/guide/scaling-up/sfc), `scoped` styles will not apply to content inside `v-html`, because that HTML is not processed by Vue's template compiler. If you want to target `v-html` content with scoped CSS, you can instead use [CSS modules](./sfc-css-features.html#css-modules) or an additional, global `
```
-### Global Selectors
+### Global Selectors {#global-selectors}
If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another `
```
-### Mixing Local and Global Styles
+### Mixing Local and Global Styles {#mixing-local-and-global-styles}
You can also include both scoped and non-scoped styles in the same component:
@@ -96,13 +96,13 @@ You can also include both scoped and non-scoped styles in the same component:
```
-### Scoped Style Tips
+### Scoped Style Tips {#scoped-style-tips}
- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.
- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
-## CSS Modules
+## CSS Modules {#css-modules}
A `
```
-### Usage with Composition API
+### Usage with Composition API {#usage-with-composition-api}
The injected classes can be accessed in `setup()` and `
+
+
+
+
+
+
diff --git a/src/developers/components/type.ts b/src/developers/components/type.ts
new file mode 100644
index 0000000000..4271a19764
--- /dev/null
+++ b/src/developers/components/type.ts
@@ -0,0 +1,44 @@
+export interface DeveloperExperienceDescription {
+ isGrouped: boolean
+ content: string | string[]
+}
+export interface DeveloperExperience {
+ id: number
+ role: string
+ company: string
+ startDate: string
+ endDate: string
+ period: string
+ description: DeveloperExperienceDescription[]
+ skills: string[]
+}
+
+export interface DeveloperEducation {
+ id: number
+ degree: string
+ school: string
+ startDate: string
+ endDate: string
+}
+
+export interface DeveloperCompensations {
+ partTime: string
+ monthly: string
+}
+
+export interface DeveloperProfile {
+ id: number
+ slug: string
+ name: string
+ alias: string
+ description: string[]
+ proficiencies: string[]
+ compensations: DeveloperCompensations
+ location: string
+ region: string
+ experiences?: DeveloperExperience[]
+ education?: DeveloperEducation[]
+}
+
+export interface DeveloperProfiles extends Array {
+}
diff --git a/src/developers/components/utils.ts b/src/developers/components/utils.ts
new file mode 100644
index 0000000000..3528f4826b
--- /dev/null
+++ b/src/developers/components/utils.ts
@@ -0,0 +1,54 @@
+/**
+ * Generate a UTM-encoded URL for tracking purposes.
+ * @param baseUrl - The base URL to append UTM parameters to.
+ * @param page - The page path to be used for the UTM campaign.
+ * @param utmSource - The UTM source parameter.
+ * @param utmMedium - The UTM medium parameter.
+ * @returns The full URL with UTM parameters.
+ */
+export function generateUTMUrl(
+ baseUrl: string,
+ page: string = '/developers/',
+ utmSource: string = 'partnership',
+ utmMedium: string = 'vuejs'
+): string {
+ if (!baseUrl) {
+ console.warn('Base URL is empty. Returning an empty string.')
+ return ''
+ }
+
+ const cleanedPage = page.replace(/\//g, '-').replace(/^-+|-+$/g, '')
+
+ const url = new URL(baseUrl)
+ url.searchParams.append('utm_source', utmSource)
+ url.searchParams.append('utm_medium', utmMedium)
+ url.searchParams.append('utm_campaign', cleanedPage)
+
+ return url.toString()
+}
+
+/**
+ * Truncate a combined string from an array of text to a specified length.
+ * @param textArray - The array of strings to combine and truncate.
+ * @param maxLength - The maximum allowed length of the resulting string.
+ * @param ellipsis - The string to append to truncated text, defaulting to '...'.
+ * @returns The truncated string with ellipsis if truncation occurs.
+ */
+export function truncateTextFromArray(
+ textArray: string[],
+ maxLength: number,
+ ellipsis: string = '...'
+): string {
+ if (textArray.length === 0) return ''
+
+ const combinedText = textArray.join(' ')
+
+ if (combinedText.length <= maxLength) return combinedText
+
+ let truncatedText = combinedText.slice(0, combinedText.lastIndexOf(' ', maxLength))
+
+ // Remove trailing comma or punctuation
+ truncatedText = truncatedText.replace(/,\s*$/, '')
+
+ return `${truncatedText}${ellipsis}`
+}
diff --git a/src/developers/developers.json b/src/developers/developers.json
new file mode 100644
index 0000000000..00e1011b38
--- /dev/null
+++ b/src/developers/developers.json
@@ -0,0 +1,2027 @@
+[
+ {
+ "id": 1346,
+ "name": "Stelios Kitziris",
+ "slug": "stelios-vue-node-fullstack-developer",
+ "alias": "Stelios",
+ "description": [
+ "Stelios is a fullstack developer with over six years of commercial experience, specializing in the MEVN stack.",
+ "He is skilled in building scalable software solutions and has successfully led the development of several large-scale and business-critical systems. Also, he is interested in emerging technologies such as Web3 and AI.",
+ "Stelios holds a Master’s Degree in Computing, equipping him with a thorough understanding of the tech landscape. His perfectionist approach is ideal for projects that benefit from meticulous attention to detail."
+ ],
+ "proficiencies": [
+ "MongoDB",
+ "Vue.js",
+ "Express.js",
+ "Node.js",
+ "TypeScript",
+ "Nuxt.js",
+ "Laravel",
+ "PHP",
+ "PostgreSQL",
+ "Ionic",
+ "Cordova",
+ "MySQL",
+ "Docker",
+ "React.js"
+ ],
+ "compensations": {
+ "partTime": "€4,276 /month (20 h per week)",
+ "monthly": "€7,879 /month (40 h per week)"
+ },
+ "location": "Greece",
+ "region": "GTM+3",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Senior Frontend Engineer",
+ "company": "White Hat Gaming",
+ "startDate": "Dec 2020",
+ "endDate": "May 2024",
+ "period": "3 years 5 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "White Hat Gaming is a casino game provider company in Malta:"
+ },
+ {
+ "isGrouped": true,
+ "content": [
+ "Using Vue.js version 3 with composition API for front end development Software Architecture;",
+ "Planning and Development for in-house Web Apps; Unit testing."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "PostgreSQL",
+ "Node.js",
+ "Nuxt.js",
+ "TypeScript"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Lead Node.js Developer",
+ "company": "Netguru S.A.",
+ "startDate": "Dec 2019",
+ "endDate": "Dec 2020",
+ "period": "1 year",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Provided effective troubleshooting and remediation for web applications;",
+ "Interfaced with clients to identify business requirements;",
+ "Utilized the latest software development tools, techniques, and approaches. Using Node.js, Express.js, Vue.js, React.js, MongoDB, PostgreSQL. Brought forth a passion and dedication to software development;",
+ "Utilized the latest software development tools, techniques, and approaches."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "MongoDB",
+ "Node.js",
+ "Express.js",
+ "PostgreSQL",
+ "TypeScript",
+ "Nuxt.js"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Lead Software Engineer",
+ "company": "Draxis Environment S.A.",
+ "startDate": "Oct 2017",
+ "endDate": "Dec 2019",
+ "period": "2 years 2 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "Draxis was a company that created applications for European unions, with a focus on agricultural applications:"
+ },
+ {
+ "isGrouped": true,
+ "content": [
+ "Performed software architecture, planning, and development for web apps, and mobile apps;",
+ "Designed and developed large-scale ICT systems, funded by international donors, the Horizon 2020 program, and the European Commission."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "Laravel",
+ "JavaScript",
+ "React.js",
+ "Vue.js",
+ "PostgreSQL",
+ "TypeScript",
+ "Node.js",
+ "Nuxt.js",
+ "Cordova"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Full-Stack Developer",
+ "company": "Archirodon Group N.V.",
+ "startDate": "Sept 2015",
+ "endDate": "Aug 2017",
+ "period": "1 year 11 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "Archirodon Group N.V. was a construction company focused on building artificial lakes and skyscrapers."
+ },
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed web applications;",
+ "Created, communicated, and managed project plans."
+ ]
+ }
+ ],
+ "skills": [
+ "Laravel",
+ "JavaScript",
+ "Angular.js",
+ "Vue.js"
+ ]
+ },
+ {
+ "id": 5,
+ "role": "Web Developer",
+ "company": "24 Media Digital Media Group",
+ "startDate": "Jan 2015",
+ "endDate": "Aug 2015",
+ "period": "7 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "It was an internship. 24 Media Digital Media Group is a big journal company in Greece."
+ },
+ {
+ "isGrouped": true,
+ "content": [
+ "Created websites and web applications."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "Laravel",
+ "Angular.js",
+ "WordPress"
+ ]
+ },
+ {
+ "id": 6,
+ "role": "Web Developer",
+ "company": "Shape LTD",
+ "startDate": "Dec 2013",
+ "endDate": "Feb 2014",
+ "period": "2 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "It was an ads company, and Stelios was creating websites."
+ },
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed and supported the website;",
+ "Performed SEO of the platform."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "WordPress"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "MSc. Computing",
+ "school": "Cardiff Metropolitan University",
+ "startDate": "2019",
+ "endDate": "2022"
+ },
+ {
+ "id": 2,
+ "degree": "BSc. Computer Science",
+ "school": "IEK Akmi",
+ "startDate": "2014",
+ "endDate": "2016"
+ }
+ ]
+ },
+ {
+ "id": 2535,
+ "name": "Tomek Jankowski",
+ "slug": "tomek-vue-node-fullstack-developer",
+ "alias": "Tomek",
+ "description": [
+ "Tomek is a fullstack developer with over 17 years of commercial experience. Over the years, he has transitioned from using PHP to mastering modern tech stacks, focusing on Vue.js and Node.js in the last six years. His expertise in these technologies has driven the development and support of robust, high-traffic systems.",
+ "As the Technical Director at a web development agency for over a decade, he has successfully managed a team of 12 to 17 people and overseen projects for high-profile clients across various sectors.",
+ "Tomek has consistently received high appreciation from Proxify clients for his outstanding contributions and leadership."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "Node.js",
+ "MongoDB",
+ "Nuxt.js",
+ "PHP",
+ "MySQL",
+ "Google Cloud",
+ "ElasticSearch",
+ "Redis",
+ "RabbitMQ",
+ "Kubernetes",
+ "TypeScript",
+ "Express.js",
+ "Koa",
+ "Nest.js"
+ ],
+ "compensations": {
+ "partTime": "€4,696 /month (20 h per week)",
+ "monthly": "€8,551 /month (40 h per week)"
+ },
+ "location": "Poland",
+ "region": "GTM+3",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Technical Director",
+ "company": "i3MEDIA LTD",
+ "startDate": "Jul 2010",
+ "endDate": "Jun 2022",
+ "period": "11 years 11 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Feature design, requirements for the dev team.",
+ "Development of more advanced or mission-critical features.",
+ "Code reviews + support for the other dev/front-end.",
+ "Technical meetings with clients.",
+ "Infrastructure design and maintenance/automation (GCP last 10 years).",
+ "Time & cost estimates."
+ ]
+ },
+ {
+ "isGrouped": false,
+ "content": "Systems That Built"
+ },
+ {
+ "isGrouped": true,
+ "content": [
+ "Multi-channel (eBay, Amazon + web front) eCommerce solution with advanced modules to calculate optimal selling prices, complex product definitions & shipping rules, promotions, and integrations with couriers & warehousing solutions.",
+ "Public sector CMS with content versioning, advanced access control, publishing flows, widget-based content editor, dynamic forms module with manageable logic, validation, and payments; eventually used by councils for most citizen-council interactions (about 80 forms per website, i.e., bus passes, reporting issues, bins).",
+ "Charity donation platform - used to this date by a number of medium to large charities in the UK, integrated with MS Dynamics and other CRM solutions, also integrated with Gov.UK.",
+ "Project management - dedicated for media agencies, used internally for about 4 years. Too many features to list, definitely more than Basecamp/TeamWork (leaders at the time).",
+ "SEO campaign management - dedicated to marketing agencies, integrated into all relevant tools in the world of online marketing, report generation, prospect negotiations, content writing, time tracking, campaign schedule planning, task lists, etc.",
+ "Many bespoke websites: penny auctions, online poster design, search directories of various sorts, award applications, recruitment...the list goes on."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "Symfony",
+ "Laravel",
+ "MySQL",
+ "JavaScript",
+ "Vue.js",
+ "jQuery",
+ "Node.js",
+ "Zend",
+ "Google Cloud"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Web Developer, then Lead Developer",
+ "company": "i3MEDIA",
+ "startDate": "May 2007",
+ "endDate": "Jul 2010",
+ "period": "3 years 2 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "i3MEDIA was a small agency building websites for local businesses.\n\n"
+ },
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed the first bespoke CMS, which became the core product, the second version of which was implemented on some nationally recognized websites in 2010."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "MySQL",
+ "JavaScript",
+ "Zend"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Web Developer",
+ "company": "Freelance",
+ "startDate": "Mar 2005",
+ "endDate": "Mar 2007",
+ "period": "2 years",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "Managed to complete 3 commercial projects."
+ }
+ ],
+ "skills": [
+ "PHP",
+ "MySQL",
+ "Adobe Flash"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "MSc. Computer Science",
+ "school": "Faculty of Mathematics and Computer Science, University of Łódź",
+ "startDate": "2002",
+ "endDate": "2006"
+ }
+ ]
+ },
+ {
+ "id": 3021,
+ "name": "Vardan Hayrapetyan",
+ "slug": "vardan-vue-node-fullstack-developer",
+ "alias": "Vardan",
+ "description": [
+ "Vardan is a frontend-heavy fullstack developer with expertise in Vue.js, and Node.js. With six years of experience, he has worked on several large-scale web applications, particularly excelling in the real estate sector.",
+ "He is known for his leadership skills, guiding development teams toward completing high-quality projects that often exceed expectations. His problem-solving and management abilities ensure successful project outcomes.",
+ "Beyond his technical proficiency, Vardan's analytical skills are enhanced by his Master’s in International Relations, adding a unique perspective to his approach in technology projects."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "React.js",
+ "Node.js",
+ "MongoDB",
+ "TypeScript",
+ "PostgreSQL",
+ "SQL",
+ "Apollo",
+ "Flask"
+ ],
+ "compensations": {
+ "partTime": "€3,772 /month (20 h per week)",
+ "monthly": "€6,871 /month (40 h per week)"
+ },
+ "location": "Armenia",
+ "region": "GTM+4",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Tech Lead",
+ "company": "Flair.hr",
+ "startDate": "Feb 2023",
+ "endDate": "Feb 2024",
+ "period": "1 year",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Led the development of the HR Help Desk, Ticketing, Inventory, Documents Management and Performance Reviews projects.",
+ "Participated in code reviews and provided constructive feedback to colleagues to ensure best practices and high-quality code.",
+ "Led post-project evaluations to identify areas for improvement and implemented process improvements for future projects."
+ ]
+ }
+ ],
+ "skills": [
+ "React.js",
+ "Node.js",
+ "GraphQL",
+ "Apollo"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Tech Lead",
+ "company": "Monday Merch",
+ "startDate": "Feb 2022",
+ "endDate": "Dec 2023",
+ "period": "1 year 10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Effectively communicated project progress, risks, and issues to stakeholders, ensuring that all parties were informed and aligned throughout the project.",
+ "Conducted a thorough analysis of existing processes and identified areas for improvement, using this knowledge to develop and implement new processes that better aligned with business needs and objectives.",
+ "Switched the MVP version by defining the project structure and revisiting the architecture."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "TypeScript",
+ "Python",
+ "Tailwind",
+ "Team leading"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Web Developer",
+ "company": "Remix",
+ "startDate": "May 2022",
+ "endDate": "Nov 2022",
+ "period": "6 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed the Remix official website's user interface and core functionalities, ensuring mobile responsiveness;",
+ "Utilized GitHub Pages to deploy the React application;",
+ "Implemented a custom section scroller for enhanced user experience."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "React.js",
+ "TypeScript",
+ "Project management",
+ "Tailwind"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Tech Lead",
+ "company": "Flote",
+ "startDate": "May 2017",
+ "endDate": "Nov 2022",
+ "period": "5 years 6 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Mentored 4 junior frontend developers, enhancing their proficiency in JavaScript and Vue.js;",
+ "Collaborated closely with the PM to ensure alignment with project plans, timelines, and billing;",
+ "Developed and constructed dynamic user interfaces within Agile environments for enterprise clients with valuations of up to $3 billion;",
+ "Participated actively in all development phases, from conceptualization and functional design to detailed implementation, debugging, and software solution deployment;",
+ "Supervised and coordinated a team of six employees, overseeing multiple critical business processes;",
+ "Led the design of the project's frontend architecture, leading weekly team meetings and formulating and executing strategies and plans;",
+ "Provided 24/7 technical support to maintain the seamless operation of the website;",
+ "Generated wireframes, mockups, and prototypes to communicate design concepts visually;",
+ "Implemented responsive design techniques, ensuring optimal user interface performance across various devices and screen sizes;",
+ "Contributed to enhancing the software development by proposing new tools and implementing best practices;",
+ "Conducted user research and usability testing, gathering feedback and pinpointing areas for improvement;",
+ "Played a key role in documenting project requirements, technical specifications, and development procedures."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "TypeScript",
+ "Project management",
+ "Design",
+ "Tailwind",
+ "Team leading"
+ ]
+ },
+ {
+ "id": 5,
+ "role": "Tech Lead",
+ "company": "Tenanti",
+ "startDate": "Dec 2019",
+ "endDate": "Jun 2021",
+ "period": "1 year 6 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Supervised a web development team, which included contract and off-shore developers, and held supervisory responsibilities over employees;",
+ "Established team-wide standards for quality processes and methodologies, ensuring that all applications met the highest quality benchmarks;",
+ "Provided mentorship and support to fellow team members, functioning as a team leader and in client interactions;",
+ "Led team meetings and organized task prioritization to ensure the punctual delivery of projects met required standards;",
+ "Maintained vigilant oversight across all facets of application development to guarantee alignment with quality standards;",
+ "Created comprehensive documentation for development tasks and Product Requirement Documents (PRD), ensuring clarity for team members and stakeholders;",
+ "Orchestrated software release planning and execution, encompassing testing, deployment, and documentation processes;",
+ "Conducted code reviews of team members' work, offering constructive feedback and guidance to enhance code quality."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "React.js",
+ "TypeScript",
+ "Flask",
+ "Design",
+ "Tailwind",
+ "Team leading"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "MSc. International Relations and Affairs",
+ "school": "Armenian National Academy of Sciences",
+ "startDate": "2017",
+ "endDate": "2019"
+ },
+ {
+ "id": 2,
+ "degree": "BSc. Caucasian Studies",
+ "school": "Yerevan State University",
+ "startDate": "2013",
+ "endDate": "2017"
+ }
+ ]
+ },
+ {
+ "id": 2030,
+ "name": "Emre Demir",
+ "slug": "emre-vue-frontend-developer",
+ "alias": "Emre",
+ "description": [
+ "Emre is a talented frontend developer with over six years of commercial experience in IT services & solutions and design. Throughout his career, Emre has worked in various industries, including FinTech, banking, gaming, marketing automation, defense, and cybersecurity.",
+ "He is the most skilled in frontend programming languages like JS framework Vue.js, React.js, Typescript, and RxJs. Specializing in collaborating with product managers and designers to gather requirements, produce plans and improve designs for usability and functionality.",
+ "Emre is goal-oriented and brings a strong commitment to collaboration. He uses various web design packages to develop custom-crafted, customer-focused websites and designs."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "JavaScript",
+ "React.js",
+ "Node.js",
+ "Nuxt.js",
+ "Java",
+ "AWS",
+ "Figma",
+ "Jira",
+ "REST API"
+ ],
+ "compensations": {
+ "partTime": "€4,452 /month (20 h per week)",
+ "monthly": "€8,215 /month (40 h per week)"
+ },
+ "location": "Turkey",
+ "region": "GTM+3",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Senior Front-end Developer",
+ "company": "A5 Labs",
+ "startDate": "Mar 2021",
+ "endDate": "Oct 2022",
+ "period": "1 year 7 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Worked as a Front End Developer in the Back Office project of the WPTO Poker application. This project is responsible for CRUD operations such as reading BOT Detection results, locking accounts, locking withdrawal/deposit, etc...",
+ "Responsible for creating GraphQL contracts, and integrating them with the backend (GraphQL, Rest, Websocket).",
+ "Created UI library using MaterialUI.",
+ "Scheduled meetings with the designer and product manager to handle edge cases, improvements, and requirements."
+ ]
+ }
+ ],
+ "skills": [
+ "React.js",
+ "Vue.js",
+ "RxJs",
+ "GraphQL",
+ "Figma",
+ "API",
+ "Jira",
+ "Material-UI",
+ "REST API"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Senior Consultant",
+ "company": "Softtech",
+ "startDate": "Aug 2020",
+ "endDate": "Apr 2021",
+ "period": "8 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "Worked as a Senior Consultant in banking and finance projects as a member of international Agile teams - (Delivery Hub - Remote) Vue.js, Amazon AWS"
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "AWS",
+ "Agile"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Senior Front-end Developer",
+ "company": "Insider",
+ "startDate": "Feb 2020",
+ "endDate": "Aug 2020",
+ "period": "6 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Insider—one platform for individualized, cross-channel experiences—enables enterprise marketers to connect customer data across channels and systems, predict their future behavior with an AI intent engine and individualize customer experiences. Marketers use Insider’s platform to deliver experiences across channels like Web, App, Web Push, Email, SMS, and Messaging Apps (WhatsApp, Facebook Messenger, RCS).",
+ "Worked as a Lead Senior Frontend Developer, implemented the frontend part of a dashboard using Vue.js."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Expert Software Developer",
+ "company": "Comodo",
+ "startDate": "May 2018",
+ "endDate": "Dec 2019",
+ "period": "1 year 7 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "Worked in DNS-based Web filtering project, Dome Shield, and also worked in sub-projects, Dome Analytics, Comodo Threat Analysis, and NuEDUSec. Worked as a full-stack developer in all of the projects - Dome Shield, Dome Analytics ,Comodo Threat Analysis and NuEDUSec"
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "MySQL",
+ "MongoDB",
+ "AWS",
+ "Redis",
+ "Node.js",
+ "Jenkins",
+ "AWS SQS",
+ "AWS Lambda",
+ "Nuxt.js",
+ "Angular"
+ ]
+ },
+ {
+ "id": 5,
+ "role": "Software Developer",
+ "company": "Freelance",
+ "startDate": "Jul 2017",
+ "endDate": "May 2018",
+ "period": "10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "He quit his job because he accepted a master's degree at Berlin Technical University. He started freelance work to make some money before he went to Berlin. Some medical issues occurred, and he canceled his master's degree.",
+ "Worked in development, design, deployment, and ASO for Android and iOS games using Unity.",
+ "Created SPA using Vue.js and Node.js for customers that found me on upwork.com"
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "Node.js",
+ "Unity"
+ ]
+ },
+ {
+ "id": 6,
+ "role": "Research and Development Engineer",
+ "company": "Havelsan Teknoloji Radar(HTR)",
+ "startDate": "Sep 2016",
+ "endDate": "Jul 2017",
+ "period": "10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Designed and implemented Geographic Information System in Java and Android.",
+ "Built and managed a database system for both Java and Android versions of GIS using PostgreSql and Java.",
+ "Designed RabbitMQ messaging infrastructure for communicating with all system devices.",
+ "Integrated Radar, Sonars, Cameras, Cabins, and UPS to GIS using both RabbitMQ and PostgreSQL.",
+ "Displayed both live and recorded cameras using video encoder and decoder libraries.",
+ "This project is shown by Havelsan Teknoloji Radar A.Ş. at IDEF17 International Defence Industry Fair in İstanbul."
+ ]
+ }
+ ],
+ "skills": [
+ "PostgreSQL",
+ "Java",
+ "Android",
+ "RabbitMQ"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "BSc. Computer Engineering",
+ "school": "TOBB Ekonomi ve Teknoloji Üniversitesi",
+ "startDate": "2011",
+ "endDate": "2016"
+ },
+ {
+ "id": 2,
+ "degree": "BSc. Computer Engineering",
+ "school": "School name AGH University of Science and Technology (Exchange)",
+ "startDate": "2013",
+ "endDate": "2014"
+ }
+ ]
+ },
+ {
+ "id": 5328,
+ "name": "Santiago Anaya",
+ "slug": "santiago-anaya-vue-ruby-fullstack-developer",
+ "alias": "Santiago",
+ "description": [
+ "Santiago is a fullstack engineer with over six years of commercial experience, focusing on frontend development. He is an expert in Vue.js. On the backend, he uses Ruby on Rails and various relational databases, particularly PostgreSQL.",
+ "He is adept at increasing app performance and enhancing user experience, significantly contributing to every engagement he undertakes. His experience as a Tech and Engineering Lead highlights his leadership capabilities and ability to drive technical initiatives.",
+ "Santiago's combination of technical expertise, leadership skills, and dedication to improving application performance makes him a valuable asset to any development team."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "PostgreSQL",
+ "Ruby",
+ "Ruby on Rails",
+ "TypeScript",
+ "SQL",
+ "Java",
+ "Vuex",
+ "Backbone",
+ "Angular",
+ "MySQL",
+ "Vuetify",
+ "React.js",
+ "Node.js",
+ "WordPress",
+ "MongoDB"
+ ],
+ "compensations": {
+ "partTime": "€3,100 /month (20 h per week)",
+ "monthly": "€5,695 /month (40 h per week)"
+ },
+ "location": "Argentina",
+ "region": "GTM-3",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Engineer Manager",
+ "company": "WISBOO.COM",
+ "startDate": "Oct 2022",
+ "endDate": "Aug 2023",
+ "period": "10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "GROUP TECH LEAD & DEVELOPER ENGINEER MANAGER.",
+ "APP DEVELOPMENT - WISBOO.COM / A dynamic application tailored for content creators, enabling them to craft and sell courses through personalized websites.",
+ "Responsible for the roles of Engineer Manager and Tech Lead.",
+ "Helped the team with contributing significantly to a dedicated working cell focused on a specific component of the app."
+ ]
+ }
+ ],
+ "skills": [
+ "Angular.js",
+ "React.js",
+ "Ruby on Rails",
+ "Bootstrap"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Full Stack Developer",
+ "company": "KEEPCON",
+ "startDate": "Jun 2020",
+ "endDate": "Apr 2022",
+ "period": "1 year 10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "APP DEVELOPMENT - KEEPCON.COM / An innovative application for large corporations, aggregating messages from various social media platforms for efficient operator response.",
+ "Responsible for a strategic migration to Vue.js.",
+ "Helped the team with enhancing the app's performance and user experience."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "Ruby on Rails",
+ "Bootstrap",
+ "TypeScript",
+ "Java",
+ "Backbone"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Full Stack Developer",
+ "company": "XUBIO",
+ "startDate": "Mar 2019",
+ "endDate": "Dec 2019",
+ "period": "9 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "APP DEVELOPMENT - XUBIO.COM / A specialized application for accountants, designed to manage client or company accounts with features tailored to different countries.",
+ "Responsible for providing a robust and user-friendly platform for accounting needs."
+ ]
+ }
+ ],
+ "skills": [
+ "MySQL",
+ "Bootstrap",
+ "TypeScript",
+ "Java"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Full Stack Developer",
+ "company": "KEEPERS",
+ "startDate": "Feb 2018",
+ "endDate": "Mar 2019",
+ "period": "1 year 1 month",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "WEB APPLICATIONS DEVELOPMENT.",
+ "Responsible for user-friendly and efficient platforms."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "MongoDB",
+ "Node.js"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "BSc. Systems Engeneering",
+ "school": "Universidad Technologica Nacinal",
+ "startDate": "2015",
+ "endDate": "2021"
+ }
+ ]
+ },
+ {
+ "id": 5697,
+ "name": "Harshit Sangani",
+ "slug": "harshit-vue-frontend-developer",
+ "alias": "Harshit",
+ "description": [
+ "Harshit is a frontend engineer with over six years of commercial experience, specializing in Vue.js. He has been integral to various stages of the software development lifecycle, from ideation to deployment, ensuring top-notch user experiences and scalable applications.",
+ "His expertise extends to modern frontend technologies and proficiency in DevOps practices. Notably, he has led the development of a CO2 Calculator for cost-splitting emissions and a community application targeting a 15M+ user base.",
+ "His strong background in building complex, modular frontend solutions and managing deployment cycles and state management tools like Vuex and Apollo further solidifies his capability to deliver high-quality, user-centric applications."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "Nuxt.js",
+ "TypeScript",
+ "Flutter",
+ "Node.js",
+ "Golang",
+ "GraphQL",
+ "React.js",
+ "JavaScript",
+ "Tailwind",
+ "Dart",
+ "Apollo",
+ "Vuex",
+ "Figma",
+ "Neo4j",
+ "Vuetify",
+ "Angular",
+ "Storybook",
+ "Laravel",
+ "React Native"
+ ],
+ "compensations": {
+ "partTime": "€3,688 /month (20 h per week)",
+ "monthly": "€6,552 /month (40 h per week)"
+ },
+ "location": "India",
+ "region": "GTM+5:30",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Sr. Software Engineer",
+ "company": "Purpose Digital Real Estate GmbH",
+ "startDate": "Nov 2022",
+ "endDate": "Jun 2024",
+ "period": "1 year 7 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Single-handedly worked on a CO2 Calculator, which helped easily calculate the cost split for CO2 emission between landlords and tenants.",
+ "Created the base project setup, leveraging TypeScript to speed up the development in the long run.",
+ "Generated many modular base components to be used throughout the project.",
+ "Helped setting up deployment cycles and environments using Vercel."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "TypeScript",
+ "Microservices",
+ "Tailwind",
+ "DevOps",
+ "Angular",
+ "VSCode",
+ "Storybook",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Founder and Engineering Manager",
+ "company": "BK Softech",
+ "startDate": "Jun 2022",
+ "endDate": "Apr 2024",
+ "period": "1 year and 10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Managed a team of 15+ members actively collaborating on non-profit community projects.",
+ "Connected communities across divided regions on a single platform to perform integrated businesses, find matrimonial matches, engage in advanced discussions, and much more."
+ ]
+ }
+ ],
+ "skills": [
+ "React.js",
+ "Vue.js",
+ "TypeScript",
+ "Node.js",
+ "Flutter",
+ "Golang",
+ "Microservices",
+ "Figma",
+ "Tailwind",
+ "Nuxt.js",
+ "DevOps",
+ "Dart",
+ "Neo4j",
+ "MVVM",
+ "Vuetify",
+ "VSCode",
+ "Chakra UI",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Sr. Software Engineer",
+ "company": "REO",
+ "startDate": "Nov 2021",
+ "endDate": "Oct 2022",
+ "period": "11 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Worked with a great team to build advanced real-estate brokerage software.",
+ "Solved many user-centric issues and helped the team transition to TypeScript.",
+ "Created real-time compilation of GraphQL schemas to be directly used in the Frontend codebase, reducing the related bug reports by ~40% and enhancing Developer Experience."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "TypeScript",
+ "GraphQL",
+ "Microservices",
+ "Tailwind",
+ "Nuxt.js",
+ "DevOps",
+ "VSCode",
+ "Apollo",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Co-Founder and Sr. Software Engineer",
+ "company": "HK Byte",
+ "startDate": "Nov 2017",
+ "endDate": "Apr 2022",
+ "period": "4 years 5 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Fulfilled requirements of 20+ clients.",
+ "Developed 25+ projects.",
+ "Helped the team grow with an overall experience in the SDLC process.",
+ "Managed a team of 8+ members.",
+ "Provided technical support to two successful startups, uplifting their profits by more than 250% and still counting."
+ ]
+ }
+ ],
+ "skills": [
+ "Laravel",
+ "JavaScript",
+ "Vue.js",
+ "TypeScript",
+ "Adobe Illustrator",
+ "Node.js",
+ "React Native",
+ "Flutter",
+ "Figma",
+ "Tailwind",
+ "Nuxt.js",
+ "DevOps",
+ "Dart",
+ "Neo4j",
+ "MVVM",
+ "VSCode",
+ "Fusion 360",
+ "Storybook",
+ "Vuex"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "BSc. Computer Science",
+ "school": "Smt. CZMG BCA College",
+ "startDate": "2015",
+ "endDate": "2018"
+ }
+ ]
+ },
+ {
+ "id": 3709,
+ "name": "Kostiantyn Draliuk",
+ "slug": "kostiantyn-vue-frontend-developer",
+ "alias": "Kostiantyn",
+ "description": [
+ "Kostiantyn is a frontend developer with eight years of commercial experience. His primary expertise lies in Vue.js, where he has demonstrated exceptional proficiency in building robust and scalable web applications.",
+ "On top of his development skills, he has a great eye for design and works alongside the designers in his teams using Figma.",
+ "He has a proven track record of working with Proxify clients, delivering outstanding results with both high output and high code quality."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "Vuex",
+ "Figma",
+ "Nuxt.js",
+ "TypeScript",
+ "Cypress",
+ "Svelte",
+ "JavaScript",
+ "SvelteKit"
+ ],
+ "compensations": {
+ "partTime": "€4,024 /month (20 h per week)",
+ "monthly": "€7,375 /month (40 h per week)"
+ },
+ "location": "Ukraine",
+ "region": "GTM+3",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Software Engineer (Frontend Developer / VueJs Developer / Svelte Developer)",
+ "company": "DNV GL (Norway, Remote)",
+ "startDate": "Oct 2021",
+ "endDate": "Jul 2024",
+ "period": "2 years 9 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed high-performance micro-frontends using cutting-edge technologies like VueJS, Svelte, and TypeScript, resulting in improved application performance and scalability.",
+ "Played a key role in designing and implementing a micro-frontend applications, component libraries, and routing, which allowed for faster development, easier maintenance, and consistent user experiences across multiple applications.",
+ "Collaborated with cross-functional teams, including UX/UI designers, backend developers, and product managers, in an Agile environment to ensure smooth communication, timely delivery of features, and overall project success.",
+ "Actively participated in code reviews, ensuring adherence to best practices and high-quality code standards.",
+ "Implemented and maintained unit and integration tests, resulting in increased application stability and reduced time spent on bug fixes.",
+ "Demonstrated commitment to continuous learning and professional development by staying up-to-date with the latest frontend technologies and industry trends, leading to adopting new tools and practices that improved team efficiency and product quality."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "TypeScript",
+ "Svelte"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Full-stack Developer",
+ "company": "Freelance",
+ "startDate": "Dec 2017",
+ "endDate": "Oct 2021",
+ "period": "3 years 10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Successfully delivered a wide range of projects for diverse clients, including the development of websites from scratch, enhancements to existing frontends, and the creation of custom web applications, showcasing adaptability and versatility in addressing varied client needs.",
+ "Achieved outstanding results in speed optimization, SEO optimization, and quality audits, leading to increased client satisfaction, improved site rankings, and reduced page load times.",
+ "Expertly utilized a diverse range of frontend and backend technologies, including VueJS, Laravel, NodeJS, AdonisJs, and ExpressJS, to develop tailor-made solutions that met client requirements and exceeded expectations.",
+ "Developed and maintained component libraries and design systems in VueJS, ensuring a seamless user experience, improved maintainability, and efficient UI development across multiple projects.",
+ "Collaborated with clients to gather requirements, provide estimates, and offer technical guidance, ensuring clear communication, timely delivery, and alignment with project goals.",
+ "Effectively managed projects using tools like Jira, Azure, and YouTrack, prioritizing tasks, tracking progress, and providing regular status updates to clients.",
+ "Proactively identified and addressed performance bottlenecks, security vulnerabilities, and code maintainability issues, resulting in the delivery of robust, secure, and maintainable web applications.",
+ "Kept up-to-date with the latest industry trends, best practices, and emerging technologies, incorporating them into projects when appropriate to deliver cutting-edge solutions and stay competitive in the market."
+ ]
+ }
+ ],
+ "skills": [
+ "Laravel",
+ "Vue.js",
+ "Node.js",
+ "Express.js",
+ "Azure"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Frontend Developer",
+ "company": "Boboyan (Khmelnytskyy, Ukraine)",
+ "startDate": "Mar 2016",
+ "endDate": "Dec 2017",
+ "period": "1 year 9 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed high-quality frontend solutions for Magento and OpenCart e-commerce platforms, consistently meeting project deadlines and exceeding client expectations with visually appealing and user-friendly designs.",
+ "Leveraged expertise in Git, Docker, and Linux to optimize development workflows, enhance collaboration among team members, and ensure efficient deployment and maintenance of applications.",
+ "Mentored colleagues in frontend development best practices, fostering a collaborative and supportive team environment that encouraged skill development and knowledge sharing.",
+ "Acted as a key contributor in the planning and execution of projects, working closely with project managers and other team members to gather requirements, estimate timelines, and allocate resources effectively.",
+ "Implemented responsive design principles, ensuring seamless and consistent user experiences across various devices and browsers, resulting in increased customer engagement and reduced bounce rates.",
+ "Proactively identified and resolved performance issues, bugs, and usability concerns, leading to improved site stability, increased conversion rates, and overall enhanced user satisfaction.",
+ "Participated in regular code reviews, providing constructive feedback and suggestions for improvement, leading to higher quality code and reduced technical debt.",
+ "Stayed up-to-date with the latest industry trends and frontend technologies, incorporating new tools and best practices to improve team efficiency, product quality, and client satisfaction."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Angular.js",
+ "Docker",
+ "Magento",
+ "Linux",
+ "eCommerce"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Frontend Developer",
+ "company": "Avivi (Khmelnytskyy, Ukraine)",
+ "startDate": "Feb 2015",
+ "endDate": "Oct 2016",
+ "period": "1 year 8 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Crafted visually stunning and responsive frontend designs for a variety of CMS-based websites using Photoshop and Zeplin mockups, resulting in increased client satisfaction and enhanced user experiences.",
+ "Developed responsive email templates that significantly improved client engagement, open rates, and click-through rates by optimizing for various devices and email clients.",
+ "Demonstrated proficiency in CSS, HTML, JavaScript, PHP, Angular, and Git to deliver exceptional results, showcasing adaptability and a strong foundation in frontend development technologies.",
+ "Collaborated with cross-functional teams, including designers, developers, and project managers, to ensure clear communication, efficient workflows, and alignment with project goals.",
+ "Implemented web accessibility best practices, ensuring that websites were usable and inclusive for a diverse range of users, leading to increased site traffic and improved brand reputation.",
+ "Actively participated in code reviews and knowledge sharing sessions, contributing to the continuous improvement of the team's coding standards and practices.",
+ "Worked with various CMS platforms, gaining valuable experience in customizing and extending their functionality to meet unique client requirements.",
+ "Kept up-to-date with the latest industry trends, best practices, and emerging frontend technologies, applying new knowledge and techniques to projects as appropriate."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "JavaScript",
+ "Angular"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "BSc. Computer Engineering and Systems Programming",
+ "school": "Khmelnytskyi National University",
+ "startDate": "2013",
+ "endDate": "2017"
+ }
+ ]
+ },
+ {
+ "id": 5022,
+ "name": "Eduard Miskov",
+ "slug": "eduard-miskov-vue-frontend-developer",
+ "alias": "Eduard",
+ "description": [
+ "Eduard is a frontend developer with over seven years of commercial experience. His primary expertise is crafting visually appealing and user-friendly web applications using Vue.js.",
+ "Eduard's positivity and high motivation set him apart in the fast-evolving field of frontend development. His outstanding code quality highlights his technical expertise and commitment to excellence.",
+ "He has successfully collaborated with Proxify clients, consistently delivering timely results and maintaining high-quality standards. Eduard's ability to focus on engagement goals and deliver outstanding results makes him a valuable team member."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "Vuex",
+ "Nuxt.js",
+ "Vanilla JavaScript",
+ "TypeScript",
+ "Jest",
+ "Figma",
+ "Vagrant",
+ "Shopware",
+ "jQuery",
+ "Storybook"
+ ],
+ "compensations": {
+ "partTime": "€3,436 /month (20 h per week)",
+ "monthly": "€6,119 /month (40 h per week)"
+ },
+ "location": "Ukraine",
+ "region": "GTM+3",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Frontend Developer",
+ "company": "Avenga",
+ "startDate": "May 2023",
+ "endDate": "Aug 2023",
+ "period": "3 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Led frontend development efforts in creating the online clothing store network for a leading German market player.",
+ "Focused on designing and implementing user panels, product listing pages, and search functionalities to enhance user experience.",
+ "Developed reusable components for Storybook, featuring diverse themes, to ensure consistent design elements across all online stores with unique visual identities.",
+ "Employed Nuxt 3 for its performance optimization and server-side rendering capabilities, enhancing overall website speed and responsiveness.",
+ "Demonstrated proficiency in Storybook, Vue, Nuxt, and Shopware to meet project requirements effectively."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "TypeScript",
+ "Nuxt.js",
+ "Storybook",
+ "Shopware"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Frontend Developer",
+ "company": "Simplifai",
+ "startDate": "Feb 2021",
+ "endDate": "Oct 2022",
+ "period": "1 year 8 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed a web application for a subsidiary of Elop specializing in smart concrete scanning solutions for architectural and bridge building firms.",
+ "Designed and implemented reusable UI components to enhance the application's usability and maintainability.",
+ "Utilized TypeScript to write clean and maintainable code, ensuring codebase quality and reliability.",
+ "Leveraged the Three.js library to create interactive 3D visualizations of concrete structures, enhancing the user experience.",
+ "Demonstrated expertise in Vue.js, JavaScript, Vuetify, and TypeScript to meet the project's technical requirements effectively.",
+ "Contributed to the advancement of smart concrete scanning solutions, supporting architectural and bridge-building companies in their projects."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "TypeScript",
+ "Vuetify"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Frontend Developer",
+ "company": "Recman AS",
+ "startDate": "May 2020",
+ "endDate": "Feb 2021",
+ "period": "9 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Spearheaded the development of a robust web calendar as an integral module within the Recman platform.",
+ "Employed Vanilla.js extensively to implement core features, including routing, MVC architecture, state management, and view rendering, all crafted from scratch.",
+ "Designed and built a calendar system akin to Google Calendar, seamlessly integrated into the organization's internal infrastructure.",
+ "Demonstrated proficiency in Vue.js, JavaScript, and SASS, ensuring the successful completion of the project.",
+ "Contributed significantly to enhancing the Recman platform's functionality by adding a feature-rich, internally focused web calendar module."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Frontend Developer",
+ "company": "Trinetix",
+ "startDate": "Jun 2019",
+ "endDate": "May 2020",
+ "period": "11 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Played a key role in a substantial analytical project aimed at enhancing the hotel and restaurant industry.",
+ "Led the migration process of an Angular.js application to Angular, ensuring the seamless transition while preserving the existing design system guidelines.",
+ "Successfully implemented new features within the Angular framework to enhance the functionality and capabilities of the application.",
+ "Demonstrated proficiency in Vue.js, JavaScript, SASS, and Angular to meet project requirements effectively.",
+ "Contributed significantly to the project's success, improving the analytical tools and capabilities available to the hotel and restaurant business."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Angular.js",
+ "Vue.js",
+ "Less CSS",
+ "Angular"
+ ]
+ },
+ {
+ "id": 5,
+ "role": "Medior Frontend Developer",
+ "company": "Devellar",
+ "startDate": "Mar 2017",
+ "endDate": "Jun 2019",
+ "period": "2 years 3 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Developed custom WordPress templates from scratch within the educational sector, paying close attention to design aesthetics, SEO best practices, and alignment with the business's core values.",
+ "Demonstrated proficiency in JavaScript, WordPress, PHP, and Angular to successfully create bespoke templates tailored to educational needs.",
+ "Played a crucial role in enhancing the online presence and functionality of educational websites, catering to both user experience and search engine optimization.",
+ "Contributed to the growth and success of educational institutions by providing them with tailored WordPress solutions that aligned with their unique requirements and goals."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "MySQL",
+ "JavaScript",
+ "HTML",
+ "WordPress",
+ "SQL",
+ "Angular",
+ "SASS"
+ ]
+ },
+ {
+ "id": 6,
+ "role": "Medior Frontend Developer",
+ "company": "Webkitchen",
+ "startDate": "Jun 2016",
+ "endDate": "Jan 2017",
+ "period": "7 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Crafted customized templates to meet clients' unique design and functionality demands during my tenure at a web agency.",
+ "Delivered tailored solutions for various projects, including basic corporate websites and expansive online cosmetics stores, all built from the ground up.",
+ "Demonstrated expertise in WordPress, PHP, and MySQL to develop templates that catered to the specific needs and goals of each client.",
+ "Played a pivotal role in the agency's ability to provide clients with highly individualized web solutions, contributing to the success of various online ventures."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "MySQL",
+ "HTML",
+ "WordPress",
+ "SQL",
+ "SASS"
+ ]
+ },
+ {
+ "id": 7,
+ "role": "Web Development Mentor",
+ "company": "Education US",
+ "startDate": "Nov 2014",
+ "endDate": "Jun 2016",
+ "period": "1 year 7 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Offered valuable guidance and mentorship to students, focusing on contemporary website creation techniques, Adobe Creative Cloud (CC) tools, and navigating the job search process.",
+ "Equipped students with the necessary skills and knowledge to excel in website development within the dynamic IT industry.",
+ "Facilitated students' journeys toward securing their first positions in the IT field by providing essential insights and practical advice.",
+ "Acted as a supportive and knowledgeable resource for aspiring professionals, contributing to their career development and growth."
+ ]
+ }
+ ],
+ "skills": [
+ "jQuery",
+ "Adobe Photoshop"
+ ]
+ },
+ {
+ "id": 8,
+ "role": "Web Designer",
+ "company": "Slicemix",
+ "startDate": "Mar 2014",
+ "endDate": "Aug 2014",
+ "period": "5 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Held the position of lead web designer, with primary responsibilities encompassing the creation of visually captivating and impactful promotional websites.",
+ "Designed banners and engaging printed materials tailored to clients' distinct requirements within our digital marketing agency.",
+ "Leveraged skills in Adobe Photoshop and Adobe Illustrator to ensure the delivery of high-quality design work that effectively communicated our clients' messages and brand identities.",
+ "Played a pivotal role in enhancing the online presence and marketing collateral of various clients, contributing to their success in the digital landscape."
+ ]
+ }
+ ],
+ "skills": [
+ "Adobe Photoshop",
+ "Adobe Illustrator"
+ ]
+ },
+ {
+ "id": 9,
+ "role": "Web Designer",
+ "company": "DigitalDealerz",
+ "startDate": "Feb 2013",
+ "endDate": "Jan 2014",
+ "period": "11 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Designed and developed commercial websites and promotional materials catering to the needs of small to mid-sized businesses.",
+ "Prioritized user-friendliness, responsiveness, and visual appeal in all web projects to enhance the online presence and customer engagement for clients.",
+ "Generated blueprints and wireframes for websites, establishing clear and concise plans before the development phase.",
+ "Ensured that the end products were not only interactive but also engaging for users, enhancing the overall user experience and client satisfaction."
+ ]
+ }
+ ],
+ "skills": [
+ "Adobe Photoshop",
+ "Adobe Illustrator",
+ "AutoCAD"
+ ]
+ },
+ {
+ "id": 10,
+ "role": "Junior PHP Developer",
+ "company": "Metr&co",
+ "startDate": "Jan 2012",
+ "endDate": "Jan 2013",
+ "period": "1 year",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Actively explored and applied Drupal's API to enhance the functionality and interactivity of web applications, contributing to the mastery of this versatile content management system.",
+ "Acquired knowledge and expertise in leveraging Drupal's capabilities to build dynamic and feature-rich web applications.",
+ "Kept abreast of the latest trends and best practices in Drupal web development, ensuring the ability to create robust and efficient solutions."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "MySQL",
+ "SQL",
+ "Drupal"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "BSc. Computer Science and Information Technologies",
+ "school": "National University of Food Technologies",
+ "startDate": "2014",
+ "endDate": "2019"
+ },
+ {
+ "id": 2,
+ "degree": "Sc. Software Development",
+ "school": "Kyiv Optical and Mechanical College",
+ "startDate": "2010",
+ "endDate": "2014"
+ }
+ ]
+ },
+ {
+ "id": 4290,
+ "name": "Nicolas Tellez",
+ "slug": "nicolas-vue-php-fullstack-developer",
+ "alias": "Nicolas",
+ "description": [
+ "Nicolas is a Fullstack and Integrations Developer with seven years of experience working in industries like education, government, transportation, and consulting in both Argentina and the US. He has gained strong technical skills and knows how to adapt to different business needs.",
+ "Along with his technical work, Nicolas has been responsible for technical hiring, choosing staff, and helping with internal technical training. His leadership has helped build solid development teams and improve technical knowledge within the companies he's worked for.",
+ "Nicolas is skilled in integrating systems with Hubspot and Mercadopago using APIs and webhooks. He has also worked with Mulesoft products to create solutions for both on-premise and cloud-based systems. He is experienced in designing data integration solutions and building Firebase-based projects."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "JavaScript",
+ "Nuxt.js",
+ "PHP",
+ "Laravel",
+ "Node.js",
+ "MySQL",
+ "Firebase",
+ "MongoDB",
+ "Express.js",
+ "Java"
+ ],
+ "compensations": {
+ "partTime": "€4,452 /month (20 h per week)",
+ "monthly": "€8,215 /month (40 h per week)"
+ },
+ "location": "Argentina",
+ "region": "GTM-3",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Principal Technical Engineer",
+ "company": "MuleSoft",
+ "startDate": "Jul 2020",
+ "endDate": "May 2024",
+ "period": "3 years and 10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Customer-facing position providing solutions on Mulesoft products and services for integrated solutions for on-premise and cloud.",
+ "Member of the Core Runtime team."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Docker",
+ "Java",
+ "Microservices",
+ "Maven",
+ "Eclipse",
+ "Bash",
+ "Data Engineering",
+ "Linux",
+ "API",
+ "IntelliJ",
+ "Load testing",
+ "Apache HTTP Server",
+ "AWS EC2"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Software Engineer",
+ "company": "Fundacion Conocimiento Abierto",
+ "startDate": "Jan 2018",
+ "endDate": "Jun 2024",
+ "period": "6 years 5 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Design and development of communication solutions for the organization.",
+ "Involved and responsible for the delivery process as a sysadmin but also self-carry projects as a Full Stack developer."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "Laravel",
+ "Node.js",
+ "SQL",
+ "Google Cloud",
+ "Product Development",
+ "Linux",
+ "Vuetify",
+ "Unix",
+ "REST API",
+ "Serverless",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "NodeJS Backend Developer",
+ "company": "ProMujer",
+ "startDate": "Jun 2022",
+ "endDate": "Mar 2023",
+ "period": "9 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Backend development for Edutech using typescript, NestJs, typeORM.",
+ "Worked on the Integration with Hubspot and Mercadopago by API and webhooks."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "TypeScript",
+ "Node.js",
+ "Nest.js",
+ "REST API",
+ "eCommerce"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Fullstack Developer",
+ "company": "El Patronato en Casa",
+ "startDate": "Feb 2020",
+ "endDate": "Dec 2020",
+ "period": "10 months",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "Development of an educational site, ruins VueJs and Nuxt, based on the Firebase suite (Auth, Firestore, Storage, Hosting, and Functions) and custom integration with Stripe and Vimeo."
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "Bootstrap",
+ "Node.js",
+ "Express.js",
+ "Google Cloud",
+ "Firebase",
+ "Nuxt.js",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 5,
+ "role": "Development/Operations Lead",
+ "company": "Raxar",
+ "startDate": "Sep 2019",
+ "endDate": "Jul 2020",
+ "period": "10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Development and infrastructure lead of the company. Involved and responsible for the delivery process.",
+ "Responsible for technical hiring and staff selection. Self-carried critical projects as Full Stack developer. (PHP/Laravel/JS/Vue) Internal technical training."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "Laravel",
+ "JavaScript",
+ "Vue.js",
+ "Docker",
+ "NGINX",
+ "Zend",
+ "Operational management",
+ "Google Cloud",
+ "Firebase",
+ "Nuxt.js",
+ "Jira",
+ "HTML / CSS",
+ "Apache HTTP Server",
+ "Electron"
+ ]
+ },
+ {
+ "id": 6,
+ "role": "Product Owner / FullStack Developer",
+ "company": "National Ministry of culture",
+ "startDate": "Jun 2018",
+ "endDate": "Jul 2019",
+ "period": "1 year 1 month",
+ "description": [
+ {
+ "isGrouped": false,
+ "content": "Led the development of a system to enable artists to submit information and data to run contests for not only visibility/exposure but also potentially earn financial support from the government."
+ }
+ ],
+ "skills": [
+ "PHP",
+ "Laravel",
+ "MySQL",
+ "Vue.js",
+ "SQL",
+ "Nuxt.js",
+ "Product Development",
+ "REST API",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 7,
+ "role": "Independent Information Technology Consultant",
+ "company": "IT Consultant",
+ "startDate": "Jun 2016",
+ "endDate": "Jul 2019",
+ "period": "3 years 1 month",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Custom application and product development as a fullstack developer using PHP/Laravel, VueJS, and mongoDB/MySQL.",
+ "Unix sysadmin working with AWS/Azure/GoogleCloud. Provided project management services. Infrastructure support and strategy planning Unix Security assessment and hardening."
+ ]
+ }
+ ],
+ "skills": [
+ "PHP",
+ "Laravel",
+ "JavaScript",
+ "Vue.js",
+ "MongoDB",
+ "AWS",
+ "Google Cloud",
+ "Linux",
+ "Vuetify",
+ "Azure Cloud",
+ "REST API",
+ "HTML / CSS",
+ "Apache HTTP Server",
+ "Electron",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 8,
+ "role": "Senior Web Middleware Specialist",
+ "company": "Hewlett Packard",
+ "startDate": "Jun 2007",
+ "endDate": "Oct 2016",
+ "period": "9 years 4 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "L3/L4 support the most widely used web-serving product types and brands. Performed the environment build-outs.",
+ "Provided coordination, assessment, and fixes for PCI security compliance rules involving access control, data protection, encryption, and best practices to allow systems to handle credit card transactions.",
+ "In charge of the offshore’s web middleware team to act as work queue manager and region SME. Management of thousands of SSL certificates across many platforms."
+ ]
+ }
+ ],
+ "skills": [
+ "Java",
+ "Project management",
+ "Google Cloud",
+ "Perl",
+ "Linux",
+ "Unix",
+ "Load testing",
+ "REST API",
+ "Apache HTTP Server",
+ "Tomcat",
+ "Jakarta",
+ "Team leading"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "Sc. Certified MuleSoft Developer",
+ "school": "SalesForce",
+ "startDate": "2020",
+ "endDate": "2020"
+ },
+ {
+ "id": 2,
+ "degree": "Sc. Certified Websphere Network Deployment Administration",
+ "school": "IBM",
+ "startDate": "2004",
+ "endDate": "2004"
+ }
+ ]
+ },
+ {
+ "id": 1020,
+ "name": "Abdusaid Umarov",
+ "slug": "abdusaid-html-css-vue-typescript-frontend-dev",
+ "alias": "Abdusaid",
+ "intro": "Abdusaid is a Senior Frontend Developer with over six years of experience, where he’s made a name for himself in Vue.js and Nuxt.js. His skill in Vue.js is top-notch, proven by the perfect 100% score he achieved on the Proxify test.",
+ "description": [
+ "Though he focuses on frontend work, Abdusaid isn’t just limited to that—he’s also jumped in to help with backend tasks using Laravel.",
+ "His experience across identity management, fintech, eCommerce, and other tech sectors shows his ability to adapt and thrive in different environments.",
+ "What makes Abdusaid stand out is not just his technical skills but his knack for understanding the bigger picture and delivering work that truly meets the needs of each project he takes on."
+ ],
+ "proficiencies": [
+ "Vue.js",
+ "Vuex",
+ "Nuxt.js",
+ "Laravel",
+ "Java",
+ "Tailwind",
+ "Jest",
+ "React.js",
+ "Jenkins",
+ "Storybook",
+ "SonarQube",
+ "Docker"
+ ],
+ "compensations": {
+ "partTime": "€2,764 /month (20 h per week)",
+ "monthly": "€5,359 /month (40 h per week)"
+ },
+ "location": "Uzbekistan",
+ "region": "GTM+5",
+ "experiences": [
+ {
+ "id": 1,
+ "role": "Senior Frontend Developer",
+ "company": "Identity Blitz",
+ "startDate": "Sept 2023",
+ "endDate": "Jul 2024",
+ "period": "10 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Got experience creating custom web plugins: i18n localization plugin and automated docker runner plugin using Vite.",
+ "Configured project settings with prettierrc and vite.config, postcss.config, tsup.config, ts.config.",
+ "Developed Tablet and Mobile views by applying PostCSS."
+ ]
+ }
+ ],
+ "skills": [
+ "Vue.js",
+ "Docker",
+ "TypeScript",
+ "SCSS"
+ ]
+ },
+ {
+ "id": 2,
+ "role": "Senior Frontend Developer",
+ "company": "Uzum",
+ "startDate": "Jan 2023",
+ "endDate": "Sept 2023",
+ "period": "8 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Got experience in building web apps using Modular Architecture.",
+ "Took full responsibility for complex tasks (such as authentication and fixing merge conflicts).",
+ "Got experience in using Turbo repo in projects that are based on mono repo architecture.",
+ "Did releases into the PROD environment.",
+ "Integrated localization using i18n-vue package."
+ ]
+ }
+ ],
+ "skills": [
+ "Laravel",
+ "MySQL",
+ "JavaScript",
+ "Vue.js",
+ "TypeScript",
+ "Tailwind"
+ ]
+ },
+ {
+ "id": 3,
+ "role": "Software Engineer",
+ "company": "EPAM Systems",
+ "startDate": "Sept 2021",
+ "endDate": "May 2023",
+ "period": "1 year 8 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Implemented new features using Vue.js/NUXT.js.",
+ "Conducted Code reviews.",
+ "Bug fixing.",
+ "Refactored the code to make it cleaner.",
+ "Made documented reports about commits using Gitlab's MergeRequests and Spikes.",
+ "Learnt new Prismic CMS.",
+ "Got experience with Magnolia CMS to work with the classic version of the project.",
+ "Worked in a Scrum environment and understood all of the features and terminologies of the methodology, including sprints, sprint plannings, retrospectives, and daily meetings/Stand-Ups."
+ ]
+ }
+ ],
+ "skills": [
+ "MySQL",
+ "JavaScript",
+ "Vue.js",
+ "ES5/ES6",
+ "Jenkins",
+ "Nuxt.js",
+ "SonarQube"
+ ]
+ },
+ {
+ "id": 4,
+ "role": "Frontend Developer",
+ "company": "Genesis-Innovation LLC. (Uzcard)",
+ "startDate": "Jan 2021",
+ "endDate": "Dec 2021",
+ "period": "11 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Created components/UI according to Figma design.",
+ "Connected APIs to UI using Axios.",
+ "Provided token authorizations, silent authentication method, and refreshed token/ JWT token.",
+ "Connected charts using Apex charts.",
+ "Created Vue Routers.",
+ "Used i18n internal language localization.",
+ "Widely used 'Vuex' module-based structure.",
+ "Created Designs using Element UI."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "UI",
+ "Vuex"
+ ]
+ },
+ {
+ "id": 5,
+ "role": "Web Developer",
+ "company": "Fido-Biznes LLC",
+ "startDate": "Jun 2019",
+ "endDate": "Jun 2021",
+ "period": "2 years",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Worked in a team to build the Uzbekistan Banking System.",
+ "Improved System’s performance, stability Querying, indexing, writing procedures, and functions to make the backend section of the system.",
+ "Created sophisticated JSP pages with JavaScript language for the frontend logic of the banking system.",
+ "Made Java services for exchanging information with the Government Custom Center in XML and JSON formats with key exchange techniques for providing such potential REST APIs."
+ ]
+ }
+ ],
+ "skills": [
+ "MySQL",
+ "JavaScript",
+ "Java",
+ "SQL",
+ "Oracle",
+ "JSON",
+ "PL/SQL",
+ "XML"
+ ]
+ },
+ {
+ "id": 6,
+ "role": "Web Developer",
+ "company": "Artel",
+ "startDate": "Sept 2018",
+ "endDate": "Jan 2020",
+ "period": "1 year 4 months",
+ "description": [
+ {
+ "isGrouped": true,
+ "content": [
+ "Worked in a team to build a real-world system for the technology industry.",
+ "Improved UI/frontend interface.",
+ "Built an Analytical section of the System with graphic analysis, according to the industry's provided Excel sheets, using logic to extract data.",
+ "Implemented frontend structures/components of the Internal Document Exchange System."
+ ]
+ }
+ ],
+ "skills": [
+ "JavaScript",
+ "Vue.js",
+ "ES5/ES6",
+ "SCSS",
+ "Vuex"
+ ]
+ }
+ ],
+ "education": [
+ {
+ "id": 1,
+ "degree": "BSc. Computer Science and Software Engineering",
+ "school": "INHA University in Tashkent",
+ "startDate": "2015",
+ "endDate": "2019"
+ }
+ ]
+ }
+]
diff --git a/src/developers/index.md b/src/developers/index.md
new file mode 100644
index 0000000000..2346253772
--- /dev/null
+++ b/src/developers/index.md
@@ -0,0 +1,11 @@
+---
+page: true
+footer: false
+title: Vue Developers
+---
+
+
+
+
diff --git a/src/developers/partnerConfig.js b/src/developers/partnerConfig.js
new file mode 100644
index 0000000000..48c391c94a
--- /dev/null
+++ b/src/developers/partnerConfig.js
@@ -0,0 +1,75 @@
+import partnerData from '../partners/partners.json'
+
+const partnerName = 'Proxify'
+const partner = partnerData.find(partner => partner.name === partnerName)
+
+const websiteLabel = 'proxify.io'
+const websiteUrl = 'https://proxify.io/'
+const applyUrl = 'https://career.proxify.io/apply'
+const hireUrl = 'https://proxify.io/hire-vuejs'
+const vueArticleUrl = 'https://proxify.io/hire-vue-developers'
+const imageStorageUrl = 'https://res.cloudinary.com/proxify-io/image/upload'
+
+const partnerConfig = {
+ // Partner information
+ partnerName: partner?.name,
+ logo: partner?.logo,
+ flipLogo: partner?.flipLogo || false,
+
+ // Partner website
+ websiteUrl: websiteUrl,
+ hireUsButtonUrl: hireUrl,
+
+ // Image storage URL
+ imageStorageUrl: imageStorageUrl,
+
+ // Hero Section
+ pageHeroBanner: {
+ title: 'Find top Vue.js developers for your team',
+ description1: 'Access certified Vue.js developers available for your next project.',
+ description2: 'Proxify handles the vetting process to ensure top-tier quality and reliability.',
+ hireButton: {
+ url: hireUrl,
+ label: 'Find Vue.js developers now'
+ },
+ footer: "Get matched with a top Vue.js developer in less than 48 hours",
+ },
+
+ // Hero Section
+ pageJoinSection: {
+ title: 'Become a listed developer',
+ description: 'Get a long-term part-time or full-time position at company looking for a Vue.js developer.',
+ applyButton: {
+ url: applyUrl,
+ label: 'Apply to join'
+ }
+ },
+
+ // Footer Configuration
+ pageFooter: {
+ text: `This highly vetted developer is brought to you by Vue’s partner:`,
+ email: 'vue@proxify.io',
+ phone: '+44 20 4614 2667',
+ websiteVueLink: vueArticleUrl,
+ websiteVueLabel: websiteLabel + '/hire-vue-developers'
+ },
+
+ // Diagram sections
+ profileDiagram: {
+ title: 'Candidate profile',
+ prependText: 'How our developers score in the parameters that correlate best with future success in the role.'
+ },
+
+ scoreDiagram: {
+ title: 'Engineering excellence score',
+ prependText: 'The practical score range is 0 to 300. This is the distribution of scores for all evaluated Vue.js developers, and here’s where your candidate scored.',
+ appendText: 'Data from 3,661 evaluated Vue.js developers and 38,008 applicants.'
+ },
+
+ // Proficiency Section
+ proficiencies: {
+ skillsPerCard: 5
+ }
+}
+
+export default partnerConfig
diff --git a/src/ecosystem/newsletters.md b/src/ecosystem/newsletters.md
new file mode 100644
index 0000000000..bebf687feb
--- /dev/null
+++ b/src/ecosystem/newsletters.md
@@ -0,0 +1,11 @@
+# Community Newsletters {#community-newsletters}
+
+There are many great newsletters / Vue-dedicated blogs from the community bringing you latest news and happenings in the Vue ecosystem. Here is a non-exhaustive list of active ones that we have come across:
+
+- [Vue.js Feed](https://vuejsfeed.com/)
+- [Michael Thiessen](https://michaelnthiessen.com/newsletter)
+- [Jakub Andrzejewski](https://dev.to/jacobandrewsky)
+- [Weekly Vue News](https://weekly-vue.news/)
+- [Vue.js Developers Newsletter](https://vuejsdevelopers.com/newsletter/)
+
+If you know a great one that isn't already included, please submit a pull request using the link below!
diff --git a/src/ecosystem/themes/ThemeListItem.vue b/src/ecosystem/themes/ThemeListItem.vue
index 5c246537af..8c79939491 100644
--- a/src/ecosystem/themes/ThemeListItem.vue
+++ b/src/ecosystem/themes/ThemeListItem.vue
@@ -3,17 +3,15 @@ import { computed } from 'vue'
import { VTLink } from '@vue/theme'
import ThemeProduct from './ThemeProduct.vue'
-const props = defineProps({
- provider: { type: Object, required: true }
-})
-
-const regex = /\[([^\[]+)\](\(.*\))/gm
+const props = defineProps<{
+ provider: Record
+}>()
const description = computed(() => {
// replace markdown link to html tag.
// [name](https://...) -> name
return props.provider.description.replace(
- /\[([^\]]+)\]\(([^\)]+)\)/,
+ /\[([^\]]+)\]\(([^\)]+)\)/g,
'$1'
)
})
diff --git a/src/ecosystem/themes/ThemePage.vue b/src/ecosystem/themes/ThemePage.vue
index 41ab1c8231..5dfa963b4e 100644
--- a/src/ecosystem/themes/ThemePage.vue
+++ b/src/ecosystem/themes/ThemePage.vue
@@ -8,7 +8,7 @@ import ThemeContact from './ThemeContact.vue'
Themes
- Check out the themes, UI Kits, and plugins. you can see how a real world application is built with Vue by our partners.
+ Check out the themes, UI Kits, and plugins. You can see how a real-world application is built with Vue by our partners.
diff --git a/src/ecosystem/themes/ThemeProduct.vue b/src/ecosystem/themes/ThemeProduct.vue
index dc8226877f..18be836d91 100644
--- a/src/ecosystem/themes/ThemeProduct.vue
+++ b/src/ecosystem/themes/ThemeProduct.vue
@@ -1,9 +1,9 @@
diff --git a/src/ecosystem/themes/themes.json b/src/ecosystem/themes/themes.json
index 751848b56a..a042892035 100644
--- a/src/ecosystem/themes/themes.json
+++ b/src/ecosystem/themes/themes.json
@@ -1,7 +1,28 @@
[
+ {
+ "name": "Nuxt UI",
+ "description": "[Nuxt UI](https://ui.nuxt.com) is a free and open-source UI library for Vue.js. It is built on top of Tailwind CSS and includes a variety of components and utilities that can be used to quickly build modern, responsive web applications.",
+ "seeMoreUrl": "https://ui.nuxt.com/pro",
+ "products": [
+ {
+ "name": "UI Pro Components",
+ "price": 199,
+ "description": "Premium Vue components, composables, and utils based on Nuxt UI.",
+ "url": "https://ui.nuxt.com/pro",
+ "image": "https://res.cloudinary.com/nuxt/image/upload/v1742036103/nuxt-ui/nuxt-ui-pro-og-image_vzvwge.png"
+ },
+ {
+ "name": "Dashboard",
+ "price": 199,
+ "description": "Vue Dashboard Template made with Nuxt UI Pro.",
+ "url": "https://vue-dashboard-template.nuxt.dev/",
+ "image": "https://res.cloudinary.com/nuxt/image/upload/v1742036101/nuxt-ui/nuxt-ui-dashboard-social-card_kpeysq.png"
+ }
+ ]
+ },
{
"name": "Creative Tim",
- "description": "With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application.",
+ "description": "With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real-world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real-world application.",
"seeMoreUrl": "https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=116187",
"products": [
{
@@ -45,76 +66,34 @@
"description": "Premium Vue.js UI Kit",
"url": "https://www.creative-tim.com/product/vue-now-ui-kit-pro?affiliate_id=116187",
"image": "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit-pro/vue-now-ui-kit-pro.jpg"
- },
- {
- "name": "Vue Now UI Dashboard Pro",
- "price": 59,
- "description": "Premium Vue.js Admin Template",
- "url": "https://www.creative-tim.com/product/vue-now-ui-dashboard-pro?affiliate_id=116187",
- "image": "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-dashboard-pro/vue-now-ui-dashboard-pro.jpg"
- },
- {
- "name": "Vue Now UI Kit",
- "price": 0,
- "description": "Free Vue.js UI Kit",
- "url": "https://www.creative-tim.com/product/vue-now-ui-kit?affiliate_id=116187",
- "image": "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit/vue-now-ui-kit.jpg"
- },
- {
- "name": "Vue Light Bootstrap Dashboard Pro",
- "price": 49,
- "description": "Premium Vue.js Admin Template",
- "url": "https://www.creative-tim.com/product/vue-light-bootstrap-dashboard-pro?affiliate_id=116187",
- "image": "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard-pro/vue-light-bootstrap-dashboard-pro.jpg"
- },
- {
- "name": "Vue Material Dashboard Pro",
- "price": 59,
- "description": "Premium Vue.js Admin Template",
- "url": "https://www.creative-tim.com/product/vue-material-dashboard-pro?affiliate_id=116187",
- "image": "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-dashboard-pro/vue-material-dashboard-pro.jpg"
- },
- {
- "name": "Vue Material Kit Pro",
- "price": 89,
- "description": "Premium Vue.js UI Kit",
- "url": "https://www.creative-tim.com/product/vue-material-kit-pro?affiliate_id=116187",
- "image": "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-kit-pro/vue-material-kit-pro.jpg"
- },
- {
- "name": "Vue Light Bootstrap Dashboard",
- "price": 0,
- "description": "Free Vue.js Admin Template",
- "url": "https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?affiliate_id=116187",
- "image": "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard/vue-light-bootstrap-dashboard.jpg"
}
]
},
{
"name": "MDBootstrap",
- "description": "Check out the themes, UI Kits and plugins below built by our partners from [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665). Learn how to use Vue in professional projects along such technologies as Bootstrap. Templates & ready components make your development faster and more efficient.`",
- "seeMoreUrl": "https://mdbootstrap.com/docs/vue?utm_ref_id=82665",
+ "description": "Check out the themes, UI Kits and plugins below built by our partners from [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665). Learn how to use Vue in professional projects along such technologies as Bootstrap. Templates & ready components make your development faster and more efficient.",
+ "seeMoreUrl": "https://mdbootstrap.com/docs/vue/?utm_ref_id=82665",
"products": [
{
- "url": "https://mdbootstrap.com/products/vue-ui-kit?utm_ref_id=82665",
+ "url": "https://mdbootstrap.com/docs/vue/pro/?utm_ref_id=82665",
"name": "Vue Material Bootstrap Pro",
"description": "Premium Vue.js UI Kit",
"image": "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/ui-kit.jpg",
- "price": 99
+ "price": 199
},
{
- "url": "https://mdbootstrap.com/docs/vue?utm_ref_id=82665",
+ "url": "https://mdbootstrap.com/docs/vue/?utm_ref_id=82665",
"name": "Vue Material Bootstrap Kit",
"description": "Free Vue.js UI Kit",
"image": "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/ui-kit.jpg",
"price": 0
},
{
- "url": "https://mdbootstrap.com/products/vue-admin-dashboard?utm_ref_id=82665",
+ "url": "https://mdbootstrap.com/docs/vue/templates/admin-dashboard/?utm_ref_id=82665",
"name": " Vue Admin Bootstrap Pro",
"description": "Premium Vue.js Templates Pack",
"image": "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/admin-pack.jpg",
- "price": 79
+ "price": 199
},
{
"url": "https://mdbootstrap.com/freebies/vue/admin-dashboard?utm_ref_id=82665",
@@ -122,13 +101,27 @@
"description": "Free Vue.js Templates Pack",
"image": "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/admin-pack.jpg",
"price": 0
+ },
+ {
+ "url": "https://mdbootstrap.com/docs/vue/plugins/calendar/?utm_ref_id=82665",
+ "name": "Vue Calendar Bootstrap",
+ "description": "Premium Vue.js Plugin",
+ "image": "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/plugins/calendar.jpg",
+ "price": 199
+ },
+ {
+ "url": "https://mdbootstrap.com/docs/vue/plugins/color-picker/?utm_ref_id=82665",
+ "name": "Vue Color Picker Bootstrap",
+ "description": "Premium Vue.js Plugin",
+ "image": "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/plugins/color-picker.jpg",
+ "price": 199
}
]
},
{
"name": "PrimeVue",
- "description": "The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) offers over 80 flexible components to build your apps with! They have a ton of different component themes and Vue-CLI application templates available to get the look & feel that suits you best.`",
- "seeMoreUrl": "https://www.primefaces.org/primevue/#/?af_id=4218",
+ "description": "The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/?af_id=4218) offers over 90 flexible components to build your apps with! They have a ton of different component themes and application templates available to get the look & feel that suits you best.",
+ "seeMoreUrl": "https://www.primefaces.org/primevue/?af_id=4218",
"products": [
{
"name": "Sakai",
@@ -137,6 +130,13 @@
"url": "https://www.primefaces.org/sakai-vue/#/?af_id=4218",
"image": "https://www.primefaces.org/vue-templates/sakai.jpg"
},
+ {
+ "name": "Apollo",
+ "price": 59,
+ "description": "Next-Gen Application Template",
+ "url": "https://www.primefaces.org/layouts/apollo-vue?af_id=4218",
+ "image": "https://www.primefaces.org/vue-templates/apollo.jpg"
+ },
{
"name": "Atlantis",
"price": 59,
@@ -164,75 +164,12 @@
"description": "PrimeOne Design Admin Template",
"url": "https://www.primefaces.org/layouts/diamond-vue?af_id=4218",
"image": "https://www.primefaces.org/vue-templates/diamond.jpg"
- },
- {
- "name": "Poseidon",
- "price": 59,
- "description": "PrimeOne Design Admin Template",
- "url": "https://www.primefaces.org/layouts/poseidon-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/poseidon.jpg"
- },
- {
- "name": "Verona",
- "price": 49,
- "description": "PrimeOne Design Admin Template",
- "url": "https://www.primefaces.org/layouts/verona-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/verona.jpg"
- },
- {
- "name": "Sapphire",
- "price": 49,
- "description": "Material Design Admin Template",
- "url": "https://www.primefaces.org/layouts/sapphire-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/sapphire.jpg"
- },
- {
- "name": "Avalon",
- "price": 49,
- "description": "Bootstrap Inspired Admin Template",
- "url": "https://www.primefaces.org/layouts/avalon-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/avalon.jpg"
- },
- {
- "name": "Serenity",
- "price": 49,
- "description": "Material Design Admin Template",
- "url": "https://www.primefaces.org/layouts/serenity-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/serenity.jpg"
- },
- {
- "name": "Apollo",
- "price": 49,
- "description": "Admin Template with a Dark Mode",
- "url": "https://www.primefaces.org/layouts/apollo-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/apollo.jpg"
- },
- {
- "name": "Babylon",
- "price": 49,
- "description": "Admin Template with Extensive Options",
- "url": "https://www.primefaces.org/layouts/babylon-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/babylon.jpg"
- },
- {
- "name": "Roma",
- "price": 39,
- "description": "Admin Template with a Clean Design System",
- "url": "https://www.primefaces.org/layouts/roma-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/roma.jpg"
- },
- {
- "name": "Prestige",
- "price": 39,
- "description": "Highly Customizable Admin Template",
- "url": "https://www.primefaces.org/layouts/prestige-vue?af_id=4218",
- "image": "https://www.primefaces.org/vue-templates/prestige.jpg"
}
]
},
{
"name": "Flatlogic",
- "description": "Check out the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.`",
+ "description": "Check out the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.",
"seeMoreUrl": "https://flatlogic.com/templates?ref=x-fdkuTAVW",
"products": [
{
@@ -278,5 +215,201 @@
"image": "https://flatlogic.com/assets/templates/light_blue_vue_full_nodejs-06f941c849f0a83a3c0d38c728101eace06a7515ea048f12bcd91f165280246f.webp"
}
]
+ },
+ {
+ "name": "WrapPixel",
+ "description": "Check out top [dashboard templates](https://www.wrappixel.com/templates/category/admin-dashboard-templates/?ref=320) built by our partners from [WrapPixel](https://www.wrappixel.com/?ref=320). Download highly customizable [Vue templates](https://www.wrappixel.com/templates/category/vuejs-templates/?ref=320) to start building your real time web application quickly to save hundreds of hours in development and design.",
+ "seeMoreUrl": "https://www.wrappixel.com/templates/category/vuejs-templates/?ref=320",
+ "products": [
+ {
+ "name": "Spike Free VueJs Admin Template",
+ "price": 0,
+ "description": "Free & Open Source VueJs Admin Template",
+ "url": "https://www.wrappixel.com/templates/spike-free-vuejs-admin-template/?ref=320",
+ "image": "https://www.wrappixel.com/wp-content/uploads/edd/2023/10/spike-free-vuetify-vuejs-admin-template-wp.jpg"
+ },
+ {
+ "name": "Spike Vue3 Admin Dashboard",
+ "price": 49,
+ "description": "Powerful Vue3 Dashboard Theme",
+ "url": "https://www.wrappixel.com/templates/spike-vuejs-admin-dashboard/?ref=320",
+ "image": "https://www.wrappixel.com/wp-content/uploads/edd/2023/09/spike-vuejs-admin-dashboard-prev-img.jpg"
+ },
+ {
+ "name": "MaterialPro Vue3 Admin Dashboard",
+ "price": 49,
+ "description": "Vue 3 + Vuetify 3 + Vite + Typescript",
+ "url": "https://www.wrappixel.com/templates/materialpro-vuetify-admin/?ref=320",
+ "image": "https://www.wrappixel.com/wp-content/uploads/edd/2020/05/materialpro-vuejs-dashboard-template-20.jpg"
+ },
+ {
+ "name": "Free MaterialPro Vuetify Admin",
+ "price": 0,
+ "description": "Free Vuetify Dashboard Template",
+ "url": "https://www.wrappixel.com/templates/materialpro-vuetify-admin-lite/?ref=320",
+ "image": "https://www.wrappixel.com/wp-content/uploads/edd/2020/05/materialpro-vuejs-lite-admin-wp-20.jpg"
+ },
+ {
+ "name": "Free AdminPro VueJs Lite",
+ "price": 0,
+ "description": "Free & Open Source VueJs Admin Template",
+ "url": "https://www.wrappixel.com/templates/adminpro-vuetify-admin-lite/?ref=320",
+ "image": "https://www.wrappixel.com/wp-content/uploads/edd/2020/11/feature_image.jpg"
+ },
+ {
+ "name": "AdminPro Vue3 + Vuetify Dashboard",
+ "price": 49,
+ "description": "Vue3 + Vite + Vuetify + Typescript",
+ "url": "https://www.wrappixel.com/templates/adminpro-vuetify-dashboard/?ref=320",
+ "image": "https://www.wrappixel.com/wp-content/uploads/edd/2020/10/adminpro-vuetify-dasboard-template-y.jpg"
+ }
+ ]
+ },
+ {
+ "name": "CodedThemes",
+ "description": "Explore Vue.js admin dashboard templates crafted with developers in mind by our partners at [CodedThemes](https://codedthemes.com). Download now to expedite the development of your real-time web applications, saving you countless hours in design and development.",
+ "seeMoreUrl": "https://codedthemes.com/item/category/templates/vue-template/",
+ "products": [
+ {
+ "name": "Free Berry Vuetify VueJs Admin Template",
+ "price": 0,
+ "description": "Free & Open Source VueJs Admin Template with well known desing of Berry",
+ "url": "https://codedthemes.com/item/berry-free-vuetify-vuejs-admin-template/?ref=evan.vuejs",
+ "image": "https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Berry-free-vue.png"
+ },
+ {
+ "name": "Berry Vue3 Admin Dashboard",
+ "price": 49,
+ "description": "Discover our visually captivating Vue 3 Dashboard Theme!",
+ "url": "https://codedthemes.com/item/berry-vue-admin-dashboard/?ref=evan.vuejs",
+ "image": "https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Berry-pro-vue.png"
+ },
+ {
+ "name": "Mantis Vue3 Admin Dashboard",
+ "price": 49,
+ "description": "Simple yet rebust to start any development with latest VueJs and Vuetify",
+ "url": "https://codedthemes.com/item/mantis-vue-admin-template/?ref=evan.vuejs",
+ "image": "https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Mantis-pro-vue.png"
+ },
+ {
+ "name": "Free Mantis Vuetify VueJs Admin Template",
+ "price": 0,
+ "description": "Free Vuetify Dashboard Template with simplest design and code",
+ "url": "https://codedthemes.com/item/mantis-free-vuetify-vuejs-admin-template/?ref=evan.vuejs",
+ "image": "https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Mantis-free-vue.png"
+ },
+ {
+ "name": "Free Able Pro VueJs",
+ "price": 0,
+ "description": "Free & Open Source Able pro VueJs Admin Template",
+ "url": "https://codedthemes.com/item/able-pro-free-vuejs-admin-dashboard/?ref=evan.vuejs",
+ "image": "https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Able+pro-free-vue.png"
+ },
+ {
+ "name": "Able Pro Vue3 + Vuetify Dashboard",
+ "price": 11,
+ "description": "Vue3 + Vite + Vuetify + Typescript",
+ "url": "https://codedthemes.com/item/able-pro-vuejs-admin-dashboard/?ref=evan.vuejs",
+ "image": "https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Able+pro-pro-vue.png"
+ }
+ ]
+ },
+ {
+ "name": "ThemeSelection",
+ "description": "Check out the admin [dashboard templates](https://themeselection.com/item/category/admin-templates/?ref=14) built by our partners from ThemeSelection.\n\nThey provide production-ready and highly customizable Free & Premium [Vue Admin Template](https://themeselection.com/item/category/vuejs-admin-templates/?ref=14), Vue + Laravel & NuxtJS Admin Templates to build modern web applications in no time!",
+ "seeMoreUrl": "https://themeselection.com/item/category/vuejs-admin-templates/?ref=14",
+ "products": [
+ {
+ "name": "Materio - Vue Admin Template",
+ "price": 0,
+ "description": "Free & Open Source VueJS Admin inspired by Material Design",
+ "url": "https://themeselection.com/item/materio-free-vuetify-vuejs-admin-template/?ref=14",
+ "image": "https://cdn.themeselection.com/ts-assets/materio/materio-vuetify-vuejs-admin-template-free/banner/banner.png"
+ },
+ {
+ "name": "Materio - Vue Admin Template",
+ "price": 69,
+ "description": "Most Powerful & Comprehensive VueJS Admin built for developers",
+ "url": "https://themeselection.com/item/materio-vuetify-vuejs-admin-template/?ref=14",
+ "image": "https://cdn.themeselection.com/ts-assets/materio/materio-vuetify-vuejs-admin-template/banner/banner.png"
+ },
+ {
+ "name": "Sneat - Vue Laravel Admin",
+ "price": 0,
+ "description": "Free & Open Source VueJS Laravel Admin using Sneat Design System",
+ "url": "https://themeselection.com/item/sneat-free-vuetify-vuejs-laravel-admin-template/ref=14",
+ "image": "https://cdn.themeselection.com/ts-assets/sneat/sneat-vuetify-vuejs-laravel-admin-template-free/banner/banner.png"
+ },
+ {
+ "name": "Sneat - Vue Laravel Admin",
+ "price": 79,
+ "description": "Production Ready, Carefully Crafted VueJS Laravel Dashboard",
+ "url": "https://themeselection.com/item/sneat-vuetify-vuejs-laravel-admin-template/?ref=14",
+ "image": "https://cdn.themeselection.com/ts-assets/sneat/sneat-vuetify-vuejs-laravel-admin-template/banner/banner.png"
+ },
+ {
+ "name": "Materio - NuxtJS Dashboard",
+ "price": 0,
+ "description": "Free & Open Source NuxtJS Admin inspired by Material Design",
+ "url": "https://themeselection.com/item/materio-free-vuetify-nuxtjs-admin-template/?ref=14",
+ "image": "https://cdn.themeselection.com/ts-assets/materio/materio-vuetify-nuxtjs-admin-template-free/banner/banner.png"
+ },
+ {
+ "name": "Materio - NuxtJS Dashboard",
+ "price": 79,
+ "description": "Incredibly versatile, flexible and powerful NuxtJS Admin Template",
+ "url": "https://themeselection.com/item/materio-vuetify-nuxtjs-admin-template/?ref=14",
+ "image": "https://cdn.themeselection.com/ts-assets/materio/materio-vuetify-nuxtjs-admin-template/banner/banner.png"
+ }
+ ]
+ },
+ {
+ "name": "AdminMart",
+ "description": "Check out top [Vue dashboard templates](https://adminmart.com/templates/vuejs-admin/?ref=34) built by our partners from [AdminMart](https://adminmart.com/?ref=34). Download them to speed up your web development process and build top class web applications.",
+ "seeMoreUrl": "https://adminmart.com/templates/vuejs-admin/?ref=34",
+ "products": [
+ {
+ "name": "Matdash Free Vuejs Admin Dashboard",
+ "price": 0,
+ "description": "Free & Open Source VueJs Admin Template",
+ "url": "https://adminmart.com/product/matdash-free-vuejs-admin-dashboard/?ref=34",
+ "image": "https://adminmart.com/wp-content/uploads/2024/05/matdash-vuetifi-vuejs-2.png"
+ },
+ {
+ "name": "Matdash Vuejs Admin Dashboard",
+ "price": 49,
+ "description": "Empowering Developers with Unmatched Flexibility and Power",
+ "url": "https://adminmart.com/product/matdash-vuejs-admin-dashboard/?ref=34",
+ "image": "https://adminmart.com/wp-content/uploads/2024/05/matdash-vuetify-vuejs-admin-dashboard.png"
+ },
+ {
+ "name": "Modernize Vuetify 3 & Vue 3 Admin Dashboard",
+ "price": 49,
+ "description": "Developer Friendly & Most Powerful Vue Admin Dashboard Template",
+ "url": "https://adminmart.com/product/modernize-vuetify-vue-admin-dashboard/?ref=34",
+ "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-vuetify-admin-dashboard-min.png"
+ },
+ {
+ "name": "Modernize Free Vuetify + Vue js Admin Dashboard",
+ "price": 0,
+ "description": "Free & Open Source VueJs Admin Template",
+ "url": "https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=34",
+ "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-free-vuetify-admin-dashboard-am-min1.png"
+ },
+ {
+ "name": "Modernize Free NuxtJs Admin Dashboard Template",
+ "price": 0,
+ "description": "Free NuxtJs Dashboard Template",
+ "url": "https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=34",
+ "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-free-nuxt-admin-dashboard-am-min.png"
+ },
+ {
+ "name": "Modernize Nuxt Js Admin Dashboard",
+ "price": 49,
+ "description": "Rapidly Build Powerful Dashboards with NuxtJs - Vuetify: A Developer's Dream",
+ "url": "https://adminmart.com/product/modernize-nuxt-js-admin-dashboard/?ref=34",
+ "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-nuxt-js-admin-dashboard.png"
+ }
+ ]
}
]
diff --git a/src/error-reference/ErrorsTable.vue b/src/error-reference/ErrorsTable.vue
new file mode 100644
index 0000000000..b278c1a9fe
--- /dev/null
+++ b/src/error-reference/ErrorsTable.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
Code
+
Message
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/error-reference/errors.data.ts b/src/error-reference/errors.data.ts
new file mode 100644
index 0000000000..d8044adf01
--- /dev/null
+++ b/src/error-reference/errors.data.ts
@@ -0,0 +1,17 @@
+import { defineLoader } from 'vitepress'
+import { errorMessages } from 'vue/compiler-sfc'
+// @ts-expect-error internal api
+import { ErrorTypeStrings } from 'vue'
+
+function filterEmptyMsg(data: Record) {
+ return Object.fromEntries(Object.entries(data).filter(([_, msg]) => msg))
+}
+
+export default defineLoader({
+ load() {
+ return {
+ compiler: filterEmptyMsg(errorMessages),
+ runtime: filterEmptyMsg(ErrorTypeStrings)
+ }
+ }
+})
diff --git a/src/error-reference/index.md b/src/error-reference/index.md
new file mode 100644
index 0000000000..9bae893d18
--- /dev/null
+++ b/src/error-reference/index.md
@@ -0,0 +1,30 @@
+
+
+# Production Error Code Reference {#error-reference}
+
+## Runtime Errors {#runtime-errors}
+
+In production builds, the 3rd argument passed to the following error handler APIs will be a short code instead of the full information string:
+
+- [`app.config.errorHandler`](/api/application#app-config-errorhandler)
+- [`onErrorCaptured`](/api/composition-api-lifecycle#onerrorcaptured) (Composition API)
+- [`errorCaptured`](/api/options-lifecycle#errorcaptured) (Options API)
+
+The following table maps the codes to their original full information strings.
+
+
+
+## Compiler Errors {#compiler-errors}
+
+The following table provides a mapping of the production compiler error codes to their original messages.
+
+
diff --git a/src/examples/ExampleRepl.vue b/src/examples/ExampleRepl.vue
index 7b531579e4..4247fb4b39 100644
--- a/src/examples/ExampleRepl.vue
+++ b/src/examples/ExampleRepl.vue
@@ -1,18 +1,34 @@
-
+
+
+
-
```
-To keep your users fully safe from click jacking, we recommend only allowing full control over CSS inside a sandboxed iframe. Alternatively, when providing user control through a style binding, we recommend using its [object syntax](/guide/essentials/class-and-style.html#binding-to-objects-1) and only allowing users to provide values for specific properties it's safe for them to control, like this:
+To keep your users fully safe from clickjacking, we recommend only allowing full control over CSS inside a sandboxed iframe. Alternatively, when providing user control through a style binding, we recommend using its [object syntax](/guide/essentials/class-and-style#binding-to-objects-1) and only allowing users to provide values for specific properties it's safe for them to control, like this:
```vue-html
```
-### Injecting JavaScript
+### JavaScript Injection {#javascript-injection}
We strongly discourage ever rendering a `
-- [Playwright](https://playwright.dev/) is also a great E2E testing solution with a wider range of browser support (mainly WebKit). See [Why Playwright](https://playwright.dev/docs/why-playwright) for more details.
+### Other Options {#other-options-2}
-- [Nightwatch v2](https://v2.nightwatchjs.org/) is an E2E testing solution based on [Selenium WebDriver](https://www.npmjs.com/package/selenium-webdriver). This gives it the widest browser support range.
+- [Nightwatch](https://nightwatchjs.org/) is an E2E testing solution based on [Selenium WebDriver](https://www.npmjs.com/package/selenium-webdriver). This gives it the widest browser support range, including native mobile testing. Selenium-based solutions will be slower than Playwright or Cypress.
-## Recipes
+- [WebdriverIO](https://webdriver.io/) is a test automation framework for web and mobile testing based on the WebDriver protocol.
-### Adding Vitest to a Project
+## Recipes {#recipes}
+
+### Adding Vitest to a Project {#adding-vitest-to-a-project}
In a Vite-based Vue project, run:
@@ -310,20 +337,21 @@ export default defineConfig({
```
:::tip
-If you are using TypeScript, add `vitest/globals` to the `types` field in your `tsconfig.json`.
+If you use TypeScript, add `vitest/globals` to the `types` field in your `tsconfig.json`.
```json
// tsconfig.json
{
- "compileroptions": {
+ "compilerOptions": {
"types": ["vitest/globals"]
}
}
```
+
:::
-Then create a file ending in `*.test.js` in your project. You can place all test files in a test directory in project root, or in test directories next to your source files. Vitest will automatically search for them using the naming convention.
+Then, create a file ending in `*.test.js` in your project. You can place all test files in a test directory in the project root or in test directories next to your source files. Vitest will automatically search for them using the naming convention.
```js
// MyComponent.test.js
@@ -357,9 +385,9 @@ Finally, update `package.json` to add the test script and run it:
> npm test
```
-### Testing Composables
+### Testing Composables {#testing-composables}
-> This section assumes you have read the [Composables](/guide/reusability/composables.html) section.
+> This section assumes you have read the [Composables](/guide/reusability/composables) section.
When it comes to testing composables, we can divide them into two categories: composables that do not rely on a host component instance, and composables that do.
@@ -368,7 +396,7 @@ A composable depends on a host component instance when it uses the following API
- Lifecycle hooks
- Provide / Inject
-If a composable only uses Reactivity APIs, then it can be tested by directly invoking it and asserting its returned state / methods:
+If a composable only uses Reactivity APIs, then it can be tested by directly invoking it and asserting its returned state/methods:
```js
// counter.js
@@ -415,10 +443,11 @@ export function withSetup(composable) {
})
app.mount(document.createElement('div'))
// return the result and the app instance
- // for testing provide / unmount
+ // for testing provide/unmount
return [result, app]
}
```
+
```js
import { withSetup } from './test-utils'
import { useFoo } from './foo'
diff --git a/src/guide/scaling-up/tooling.md b/src/guide/scaling-up/tooling.md
index 8be9c5c155..e9405fd3af 100644
--- a/src/guide/scaling-up/tooling.md
+++ b/src/guide/scaling-up/tooling.md
@@ -1,10 +1,14 @@
-# Tooling
+
-## Try It Online
+# Tooling {#tooling}
+
+## Try It Online {#try-it-online}
You don't need to install anything on your machine to try out Vue SFCs - there are online playgrounds that allow you to do so right in the browser:
-- [Vue SFC Playground](https://sfc.vuejs.org)
+- [Vue SFC Playground](https://play.vuejs.org)
- Always deployed from latest commit
- Designed for inspecting component compilation results
- [Vue + Vite on StackBlitz](https://vite.new/vue)
@@ -13,24 +17,57 @@ You don't need to install anything on your machine to try out Vue SFCs - there a
It is also recommended to use these online playgrounds to provide reproductions when reporting bugs.
-## Project Scaffolding
+## Project Scaffolding {#project-scaffolding}
-### Vite
+### Vite {#vite}
[Vite](https://vitejs.dev/) is a lightweight and fast build tool with first-class Vue SFC support. It is created by Evan You, who is also the author of Vue!
To get started with Vite + Vue, simply run:
-
$npm init vue@latest
+
+
+
+ ```sh
+ $ npm create vue@latest
+ ```
+
+
+
+
+ ```sh
+ $ pnpm create vue@latest
+ ```
+
+
+
+
+ ```sh
+ # For Yarn Modern (v2+)
+ $ yarn create vue@latest
+
+ # For Yarn ^v4.11
+ $ yarn dlx create-vue@latest
+ ```
+
+
+
+
+ ```sh
+ $ bun create vue@latest
+ ```
+
+
+
This command will install and execute [create-vue](https://github.com/vuejs/create-vue), the official Vue project scaffolding tool.
- To learn more about Vite, check out the [Vite docs](https://vitejs.dev).
-- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme).
+- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme).
Both online playgrounds mentioned above also support downloading files as a Vite project.
-### Vue CLI
+### Vue CLI {#vue-cli}
[Vue CLI](https://cli.vuejs.org/) is the official webpack-based toolchain for Vue. It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. Vite will provide superior developer experience in most cases.
@@ -39,7 +76,7 @@ For information on migrating from Vue CLI to Vite:
- [Vue CLI -> Vite Migration Guide from VueSchool.io](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/)
- [Tools / Plugins that help with auto migration](https://github.com/vitejs/awesome-vite#vue-cli)
-### Note on In-Browser Template Compilation
+### Note on In-Browser Template Compilation {#note-on-in-browser-template-compilation}
When using Vue without a build step, component templates are written either directly in the page's HTML or as inlined JavaScript strings. In such cases, Vue needs to ship the template compiler to the browser in order to perform on-the-fly template compilation. On the other hand, the compiler would be unnecessary if we pre-compile the templates with a build step. To reduce client bundle size, Vue provides [different "builds"](https://unpkg.com/browse/vue@3/dist/) optimized for different use cases.
@@ -51,12 +88,12 @@ Our default tooling setups use the runtime-only build since all templates in SFC
If you are looking for a lighter-weight alternative for no-build-step usage, check out [petite-vue](https://github.com/vuejs/petite-vue).
-## IDE Support
+## IDE Support {#ide-support}
-- The recommended IDE setup is [VSCode](https://code.visualstudio.com/) + the [Volar](https://github.com/johnsoncodehk/volar) extension. Volar provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props.
+- The recommended IDE setup is [VS Code](https://code.visualstudio.com/) + the [Vue - Official extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar). The extension provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props.
:::tip
- Volar replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
+ Vue - Official replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VS Code extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
:::
- [WebStorm](https://www.jetbrains.com/webstorm/) also provides great built-in support for Vue SFCs.
@@ -69,28 +106,26 @@ If you are looking for a lighter-weight alternative for no-build-step usage, che
- emacs support via [lsp-mode](https://emacs-lsp.github.io/lsp-mode/page/lsp-volar/)
-## Browser Devtools
-
-
+## Browser Devtools {#browser-devtools}
The Vue browser devtools extension allows you to explore a Vue app's component tree, inspect the state of individual components, track state management events, and profile performance.
-
+
- [Documentation](https://devtools.vuejs.org/)
-- [Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-- [Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-- [Standalone Electron app](https://devtools.vuejs.org/guide/installation.html#standalone)
+- [Chrome Extension](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+- [Vite Plugin](https://devtools.vuejs.org/guide/vite-plugin)
+- [Standalone Electron app](https://devtools.vuejs.org/guide/standalone)
-## TypeScript
+## TypeScript {#typescript}
Main article: [Using Vue with TypeScript](/guide/typescript/overview).
-- [Volar](https://github.com/johnsoncodehk/volar) provides type checking for SFCs using `
```
-#### Syntax Limitations
+This also works if `Props` is imported from an external source. This feature requires TypeScript to be a peer dependency of Vue.
-In order to generate the correct runtime code, the generic argument for `defineProps()` must be one of the following:
+```vue
+
+```
- ```ts
- defineProps<{ /*... */ }>()
- ```
+#### Syntax Limitations {#syntax-limitations}
-- A reference to an interface or object literal type **in the same file**:
+In version 3.2 and below, the generic type parameter for `defineProps()` were limited to a type literal or a reference to a local interface.
- ```ts
- interface Props {/* ... */}
+This limitation has been resolved in 3.3. The latest version of Vue supports referencing imported and a limited set of complex types in the type parameter position. However, because the type to runtime conversion is still AST-based, some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.
- defineProps()
- ```
+### Props Default Values {#props-default-values}
-The interface or object literal type can contain references to types imported from other files, however, the generic argument itself passed to `defineProps` **cannot** be an imported type:
+When using type-based declaration, we lose the ability to declare default values for the props. This can be resolved by using [Reactive Props Destructure](/guide/components/props#reactive-props-destructure) :
```ts
-import { Props } from './other-file'
+interface Props {
+ msg?: string
+ labels?: string[]
+}
-// NOT supported
-defineProps()
+const { msg = 'hello', labels = ['one', 'two'] } = defineProps()
```
-This is because Vue components are compiled in isolation and the compiler currently does not crawl imported files in order to analyze the source type. This limitation could be removed in a future release.
-
-### Props Default Values
+In 3.4 and below, Reactive Props Destructure is not enabled by default. An alternative is to use the `withDefaults` compiler macro:
-When using type-based declaration, we lose the ability to declare default values for the props. This can be resolved by the currently experimental [Reactivity Transform](/guide/extras/reactivity-transform.html):
-
-```vue
-
+const props = withDefaults(defineProps(), {
+ msg: 'hello',
+ labels: () => ['one', 'two']
+})
```
-This behavior currently requires [explicit opt-in](/guide/extras/reactivity-transform.html#explicit-opt-in).
+This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared.
-### Without `
+```
+
+For runtime declaration, we can use the `PropType` utility type:
+
+```ts
+import type { PropType } from 'vue'
+
+const props = defineProps({
+ book: Object as PropType
+})
+```
+
+This works in much the same way if we're specifying the `props` option directly:
+
+```ts
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+export default defineComponent({
+ props: {
+ book: Object as PropType
+ }
+})
+```
+
+The `props` option is more commonly used with the Options API, so you'll find more detailed examples in the guide to [TypeScript with Options API](/guide/typescript/options-api#typing-component-props). The techniques shown in those examples also apply to runtime declarations using `defineProps()`.
+
+## Typing Component Emits {#typing-component-emits}
In `
```
-The type argument should be a type literal with [Call Signatures](https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures). The type literal will be used as the type of the returned `emit` function. As we can see, the type declaration gives us much finer-grained control over the type constraints of emitted events.
+The type argument can be one of the following:
+
+1. A callable function type, but written as a type literal with [Call Signatures](https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures). It will be used as the type of the returned `emit` function.
+2. A type literal where the keys are the event names, and values are array / tuple types representing the additional accepted parameters for the event. The example above is using named tuples so each argument can have an explicit name.
+
+As we can see, the type declaration gives us much finer-grained control over the type constraints of emitted events.
When not using `
+
+
+
+
+```
+
+In cases where the exact type of the component isn't available or isn't important, `ComponentPublicInstance` can be used instead. This will only include properties that are shared by all components, such as `$el`:
+
+```ts
+import { useTemplateRef } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+const child = useTemplateRef('child')
+```
+
+In cases where the component referenced is a [generic component](/guide/typescript/overview.html#generic-components), for instance `MyGenericModal`:
+
+```vue
+
+
```
-In order to get the instance type of `MyModal`, we need to first get its type via `typeof`, then use TypeScript's built-in `InstanceType` utility to extract its instance type:
+It needs to be referenced using `ComponentExposed` from the [`vue-component-type-helpers`](https://www.npmjs.com/package/vue-component-type-helpers) library as `InstanceType` won't work.
-```vue{5}
+```vue
```
-Note if you want to use this technique in TypeScript files instead of Vue SFCs, you need to enable Volar's [Takeover Mode](./overview.html#takeover-mode).
+Note that with `@vue/language-tools` 2.1+, static template refs' types can be automatically inferred and the above is only needed in edge cases.
diff --git a/src/guide/typescript/images/takeover-mode.png b/src/guide/typescript/images/takeover-mode.png
deleted file mode 100644
index bf3be082b1..0000000000
Binary files a/src/guide/typescript/images/takeover-mode.png and /dev/null differ
diff --git a/src/guide/typescript/options-api.md b/src/guide/typescript/options-api.md
index ad957ae444..0532d3a39a 100644
--- a/src/guide/typescript/options-api.md
+++ b/src/guide/typescript/options-api.md
@@ -1,4 +1,4 @@
-# TypeScript with Options API
+# TypeScript with Options API {#typescript-with-options-api}
> This page assumes you've already read the overview on [Using Vue with TypeScript](./overview).
@@ -6,7 +6,7 @@
While Vue does support TypeScript usage with Options API, it is recommended to use Vue with TypeScript via Composition API as it offers simpler, more efficient and more robust type inference.
:::
-## Typing Component Props
+## Typing Component Props {#typing-component-props}
Type inference for props in Options API requires wrapping the component with `defineComponent()`. With it, Vue is able to infer the types for the props based on the `props` option, taking additional options such as `required: true` and `default` into account:
@@ -65,9 +65,9 @@ export default defineComponent({
})
```
-### Caveats
+### Caveats {#caveats}
-Because of a [design limitation](https://github.com/microsoft/TypeScript/issues/38845) in TypeScript, you have to be careful when using function values for `validator` and `default` prop options - make sure to use arrow functions:
+If your TypeScript version is less than `4.7`, you have to be careful when using function values for `validator` and `default` prop options - make sure to use arrow functions:
```ts
import { defineComponent } from 'vue'
@@ -82,7 +82,7 @@ export default defineComponent({
props: {
bookA: {
type: Object as PropType,
- // Make sure to use arrow functions
+ // Make sure to use arrow functions if your TypeScript version is less than 4.7
default: () => ({
title: 'Arrow Function Expression'
}),
@@ -92,9 +92,9 @@ export default defineComponent({
})
```
-This prevents TypeScript from having to infer the type of `this` inside these functions, which, unfortunately, can cause the type inference to fail.
+This prevents TypeScript from having to infer the type of `this` inside these functions, which, unfortunately, can cause the type inference to fail. It was a previous [design limitation](https://github.com/microsoft/TypeScript/issues/38845), and now has been improved in [TypeScript 4.7](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#improved-function-inference-in-objects-and-methods).
-## Typing Component Emits
+## Typing Component Emits {#typing-component-emits}
We can declare the expected payload type for an emitted event using the object syntax of the `emits` option. Also, all non-declared emitted events will throw a type error when called:
@@ -120,7 +120,7 @@ export default defineComponent({
})
```
-## Typing Computed Properties
+## Typing Computed Properties {#typing-computed-properties}
A computed property infers its type based on its return value:
@@ -176,7 +176,7 @@ export default defineComponent({
Explicit annotations may also be required in some edge cases where TypeScript fails to infer the type of a computed property due to circular inference loops.
-## Typing Event Handlers
+## Typing Event Handlers {#typing-event-handlers}
When dealing with native DOM events, it might be useful to type the argument we pass to the handler correctly. Let's take a look at this example:
@@ -199,7 +199,7 @@ export default defineComponent({
```
-Without type annotation, the `event` argument will implicitly have a type of `any`. This will also result in a TS error if `"strict": true` or `"noImplicitAny": true` are used in `tsconfig.json`. It is therefore recommended to explicitly annotate the argument of event handlers. In addition, you may need to explicitly cast properties on `event`:
+Without type annotation, the `event` argument will implicitly have a type of `any`. This will also result in a TS error if `"strict": true` or `"noImplicitAny": true` are used in `tsconfig.json`. It is therefore recommended to explicitly annotate the argument of event handlers. In addition, you may need to use type assertions when accessing the properties of `event`:
```ts
import { defineComponent } from 'vue'
@@ -213,9 +213,9 @@ export default defineComponent({
})
```
-## Augmenting Global Properties
+## Augmenting Global Properties {#augmenting-global-properties}
-Some plugins install globally available properties to all component instances via [`app.config.globalProperties`](/api/application.html#app-config-globalproperties). For example, we may install `this.$http` for data-fetching or `this.$translate` for internationalization. To make this play well with TypeScript, Vue exposes a `ComponentCustomProperties` interface designed to be augmented via [TypeScript module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):
+Some plugins install globally available properties to all component instances via [`app.config.globalProperties`](/api/application#app-config-globalproperties). For example, we may install `this.$http` for data-fetching or `this.$translate` for internationalization. To make this play well with TypeScript, Vue exposes a `ComponentCustomProperties` interface designed to be augmented via [TypeScript module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):
```ts
import axios from 'axios'
@@ -230,9 +230,9 @@ declare module 'vue' {
See also:
-- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/test-dts/componentTypeExtensions.test-d.tsx)
+- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/packages-private/dts-test/componentTypeExtensions.test-d.tsx)
-### Type Augmentation Placement
+### Type Augmentation Placement {#type-augmentation-placement}
We can put this type augmentation in a `.ts` file, or in a project-wide `*.d.ts` file. Either way, make sure it is included in `tsconfig.json`. For library / plugin authors, this file should be specified in the `types` property in `package.json`.
@@ -258,7 +258,7 @@ declare module 'vue' {
}
```
-## Augmenting Custom Options
+## Augmenting Custom Options {#augmenting-custom-options}
Some plugins, for example `vue-router`, provide support for custom component options such as `beforeRouteEnter`:
@@ -286,8 +286,8 @@ declare module 'vue' {
Now the `beforeRouteEnter` option will be properly typed. Note this is just an example - well-typed libraries like `vue-router` should automatically perform these augmentations in their own type definitions.
-The placement of this augmentation is subject the [same restrictions](#type-augmentation-placement) as global property augmentations.
+The placement of this augmentation is subject to the [same restrictions](#type-augmentation-placement) as global property augmentations.
See also:
-- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/test-dts/componentTypeExtensions.test-d.tsx)
+- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/packages-private/dts-test/componentTypeExtensions.test-d.tsx)
diff --git a/src/guide/typescript/overview.md b/src/guide/typescript/overview.md
index 22a7f9c9a7..51c1ac5ce3 100644
--- a/src/guide/typescript/overview.md
+++ b/src/guide/typescript/overview.md
@@ -2,76 +2,58 @@
outline: deep
---
-# Using Vue with TypeScript
+# Using Vue with TypeScript {#using-vue-with-typescript}
A type system like TypeScript can detect many common errors via static analysis at build time. This reduces the chance of runtime errors in production, and also allows us to more confidently refactor code in large-scale applications. TypeScript also improves developer ergonomics via type-based auto-completion in IDEs.
Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box.
-## Project Setup
+## Project Setup {#project-setup}
[`create-vue`](https://github.com/vuejs/create-vue), the official project scaffolding tool, offers the options to scaffold a [Vite](https://vitejs.dev/)-powered, TypeScript-ready Vue project.
-### Overview
+### Overview {#overview}
With a Vite-based setup, the dev server and the bundler are transpilation-only and do not perform any type-checking. This ensures the Vite dev server stays blazing fast even when using TypeScript.
- During development, we recommend relying on a good [IDE setup](#ide-support) for instant feedback on type errors.
-- If using SFCs, use the [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) utility for command line type checking and type declaration generation. `vue-tsc` is a wrapper around `tsc`, TypeScript's own command line interface. It works largely the same as `tsc` except that it supports Vue SFCs in addition to TypeScript files. You can run `vue-tsc` in watch mode in parallel to the Vite dev server.
+- If using SFCs, use the [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) utility for command line type checking and type declaration generation. `vue-tsc` is a wrapper around `tsc`, TypeScript's own command line interface. It works largely the same as `tsc` except that it supports Vue SFCs in addition to TypeScript files. You can run `vue-tsc` in watch mode in parallel to the Vite dev server, or use a Vite plugin like [vite-plugin-checker](https://vite-plugin-checker.netlify.app/) which runs the checks in a separate worker thread.
- Vue CLI also provides TypeScript support, but is no longer recommended. See [notes below](#note-on-vue-cli-and-ts-loader).
-### IDE Support
+### IDE Support {#ide-support}
-- [Visual Studio Code](https://code.visualstudio.com/) (VSCode) is strongly recommended for its great out-of-the-box support for TypeScript.
+- [Visual Studio Code](https://code.visualstudio.com/) (VS Code) is strongly recommended for its great out-of-the-box support for TypeScript.
- - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) is the official VSCode extension that provides TypeScript support inside Vue SFCs, along with many other great features.
+ - [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) is the official VS Code extension that provides TypeScript support inside Vue SFCs, along with many other great features.
:::tip
- Volar replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
+ Vue - Official extension replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VS Code extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
:::
- - [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) is also needed to get type support for `*.vue` imports in TS files.
+- [WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue. Other JetBrains IDEs support them too, either out of the box or via [a free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js). As of version 2023.2, WebStorm and the Vue Plugin come with built-in support for the Vue Language Server. You can set the Vue service to use Volar integration on all TypeScript versions, under Settings > Languages & Frameworks > TypeScript > Vue. By default, Volar will be used for TypeScript versions 5.0 and higher.
-- [WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue. Other JetBrains IDEs support them too, either out of the box or via [a free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js).
+### Configuring `tsconfig.json` {#configuring-tsconfig-json}
-### Configuring `tsconfig.json`
-
-Projects scaffolded via `create-vue` include pre-configured `tsconfig.json`. The base config is abstracted in the [`@vue/tsconfig`](https://github.com/vuejs/tsconfig) package. Inside the project, we use [Project References](https://www.typescriptlang.org/docs/handbook/project-references.html) to ensure correct types for code running in different environments (e.g. app vs. test).
+Projects scaffolded via `create-vue` include pre-configured `tsconfig.json`. The base config is abstracted in the [`@vue/tsconfig`](https://github.com/vuejs/tsconfig) package. Inside the project, we use [Project References](https://www.typescriptlang.org/docs/handbook/project-references.html) to ensure correct types for code running in different environments (e.g. app code and test code should have different global variables).
When configuring `tsconfig.json` manually, some notable options include:
-- [`compilerOptions.isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) is set to `true` because Vite uses [esbuild](https://esbuild.github.io/) for transpiling TypeScript and is subject to single-file transpile limitations.
+- [`compilerOptions.isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) is set to `true` because Vite uses [esbuild](https://esbuild.github.io/) for transpiling TypeScript and is subject to single-file transpile limitations. [`compilerOptions.verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) is [a superset of `isolatedModules`](https://github.com/microsoft/TypeScript/issues/53601) and is a good choice, too - it's what [`@vue/tsconfig`](https://github.com/vuejs/tsconfig) uses.
- If you're using Options API, you need to set [`compilerOptions.strict`](https://www.typescriptlang.org/tsconfig#strict) to `true` (or at least enable [`compilerOptions.noImplicitThis`](https://www.typescriptlang.org/tsconfig#noImplicitThis), which is a part of the `strict` flag) to leverage type checking of `this` in component options. Otherwise `this` will be treated as `any`.
- If you have configured resolver aliases in your build tool, for example the `@/*` alias configured by default in a `create-vue` project, you need to also configure it for TypeScript via [`compilerOptions.paths`](https://www.typescriptlang.org/tsconfig#paths).
+- If you intend to use TSX with Vue, set [`compilerOptions.jsx`](https://www.typescriptlang.org/tsconfig#jsx) to `"preserve"`, and set [`compilerOptions.jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource) to `"vue"`.
+
See also:
- [Official TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html)
- [esbuild TypeScript compilation caveats](https://esbuild.github.io/content-types/#typescript-caveats)
-### Takeover Mode
-
-> This section only applies for VSCode + Volar.
-
-To get Vue SFCs and TypeScript working together, Volar creates a separate TS language service instance patched with Vue-specific support, and uses it in Vue SFCs. At the same time, plain TS files are still handled by VSCode's built-in TS language service, which is why we need [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to support Vue SFC imports in TS files. This default setup works, but for each project we are running two TS language service instances: one from Volar, one from VSCode's built-in service. This is a bit inefficient and can lead to performance issues in large projects.
-
-Volar provides a feature called "Takeover Mode" to improve performance. In takeover mode, Volar provides support for both Vue and TS files using a single TS language service instance.
-
-To enable Takeover Mode, you need to disable VSCode's built-in TS language service in **your project's workspace only** by following these steps:
-
-1. In your project workspace, bring up the command palette with `Ctrl + Shift + P` (macOS: `Cmd + Shift + P`).
-2. Type `built` and select "Extensions: Show Built-in Extensions".
-3. Type `typescript` in the extension search box (do not remove `@builtin` prefix).
-4. Click the little gear icon of "TypeScript and JavaScript Language Features", and select "Disable (Workspace)".
-5. Reload the workspace. Takeover mode will be enabled when you open a Vue or TS file.
-
-
-
-### Note on Vue CLI and `ts-loader`
+### Note on Vue CLI and `ts-loader` {#note-on-vue-cli-and-ts-loader}
In webpack-based setups such as Vue CLI, it is common to perform type checking as part of the module transform pipeline, for example with `ts-loader`. This, however, isn't a clean solution because the type system needs knowledge of the entire module graph to perform type checks. Individual module's transform step simply is not the right place for the task. It leads to the following problems:
@@ -83,11 +65,11 @@ In webpack-based setups such as Vue CLI, it is common to perform type checking a
If you are currently using Vue 3 + TypeScript via Vue CLI, we strongly recommend migrating over to Vite. We are also working on CLI options to enable transpile-only TS support, so that you can switch to `vue-tsc` for type checking.
-## General Usage Notes
+## General Usage Notes {#general-usage-notes}
-### `defineComponent()`
+### `defineComponent()` {#definecomponent}
-To let TypeScript properly infer types inside component options, we need to define components with [`defineComponent()`](/api/general.html#definecomponent):
+To let TypeScript properly infer types inside component options, we need to define components with [`defineComponent()`](/api/general#definecomponent):
```ts
import { defineComponent } from 'vue'
@@ -129,14 +111,14 @@ export default defineComponent({
See also:
-- [Note on webpack Treeshaking](/api/general.html#note-on-webpack-treeshaking)
-- [type tests for `defineComponent`](https://github.com/vuejs/core/blob/main/test-dts/defineComponent.test-d.tsx)
+- [Note on webpack Treeshaking](/api/general#note-on-webpack-treeshaking)
+- [type tests for `defineComponent`](https://github.com/vuejs/core/blob/main/packages-private/dts-test/defineComponent.test-d.tsx)
:::tip
`defineComponent()` also enables type inference for components defined in plain JavaScript.
:::
-### Usage in Single-File Components
+### Usage in Single-File Components {#usage-in-single-file-components}
To use TypeScript in SFCs, add the `lang="ts"` attribute to `
diff --git a/src/partners/64robots.md b/src/partners/[partnerId].md
similarity index 50%
rename from src/partners/64robots.md
rename to src/partners/[partnerId].md
index 9df539102b..83745e5c7d 100644
--- a/src/partners/64robots.md
+++ b/src/partners/[partnerId].md
@@ -4,7 +4,10 @@ footer: false
---
-
+
diff --git a/src/partners/[partnerId].paths.ts b/src/partners/[partnerId].paths.ts
new file mode 100644
index 0000000000..070d87a6cb
--- /dev/null
+++ b/src/partners/[partnerId].paths.ts
@@ -0,0 +1,12 @@
+import partners from './partners.json'
+import { normalizeName } from './components/utils'
+
+export default {
+ paths: partners.map((p) => {
+ return {
+ params: {
+ partnerId: normalizeName(p.name)
+ }
+ }
+ })
+}
diff --git a/src/partners/components/PartnerAll.vue b/src/partners/components/PartnerAll.vue
index f5d5fb22e2..2421df5655 100644
--- a/src/partners/components/PartnerAll.vue
+++ b/src/partners/components/PartnerAll.vue
@@ -1,15 +1,17 @@
@@ -20,13 +29,15 @@ const { name, intro, region, logo, proficiencies, flipLogo } = data
:href="'/partners/' + normalizeName(name) + '.html'"
>
- Vue Partners are Vue-team endorsed angencies that provide first-class
- Vue consulting and development services. If your company is
- interested in being listed as a partner, please
- register your interest here.
-
-
+
+ {{ title || 'Vue Partners' }}
+
+
+ Vue Partners are Vue-team endorsed agencies that provide first-class
+ Vue consulting and development services. If your company is
+ interested in being listed as a partner, please
+ register your interest here.
+
diff --git a/src/partners/components/type.ts b/src/partners/components/type.ts
index 298b9f8d30..1b57932b91 100644
--- a/src/partners/components/type.ts
+++ b/src/partners/components/type.ts
@@ -1,6 +1,7 @@
export interface Partner {
name: string
logo: string
+ hero?: string
flipLogo?: boolean
intro: string
description: string[]
@@ -11,7 +12,8 @@ export interface Partner {
text: string
url: string
}
- contact: string
+ contact?: string
+ contactPage?: string;
hiring?: string
platinum?: boolean
}
diff --git a/src/partners/components/utils.ts b/src/partners/components/utils.ts
index 7a257a1f51..fe08b2e20a 100644
--- a/src/partners/components/utils.ts
+++ b/src/partners/components/utils.ts
@@ -1,9 +1,13 @@
+export function track() {
+ fathom.trackGoal('TTDUIE6G', 0)
+}
+
export function normalizeName(name: string) {
return name.toLowerCase().replace(/\s+/g, '')
}
-export function getHero(name: string) {
- return `/images/partners/${normalizeName(name)}-hero.jpg`
+export function getHero(img: string | undefined, name: string) {
+ return `/images/partners/${img || `${normalizeName(name)}-hero.jpg`}`
}
export function getLogo(img: string, flip = false) {
diff --git a/src/partners/curotec.md b/src/partners/curotec.md
deleted file mode 100644
index 696ce3e32e..0000000000
--- a/src/partners/curotec.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-page: true
-footer: false
----
-
-
-
-
diff --git a/src/partners/devsquad.md b/src/partners/devsquad.md
deleted file mode 100644
index dd5034b1d4..0000000000
--- a/src/partners/devsquad.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-page: true
-footer: false
----
-
-
-
-
diff --git a/src/partners/index.md b/src/partners/index.md
index a04adc5f64..9747c3523e 100644
--- a/src/partners/index.md
+++ b/src/partners/index.md
@@ -1,6 +1,7 @@
---
page: true
footer: false
+title: Vue Partners
---
-
-
diff --git a/src/partners/partners.json b/src/partners/partners.json
index a32b69132e..59bd61e103 100644
--- a/src/partners/partners.json
+++ b/src/partners/partners.json
@@ -25,7 +25,7 @@
"url": "https://www.vehikl.com/?utm_source=vue_partners_page"
},
"contact": "go+vuepartner@vehikl.com",
- "hiring": "www.vehikl.com/jobs/developer",
+ "hiring": "https://vehikl.com/jobs/developer/",
"platinum": true
},
{
@@ -53,6 +53,8 @@
{
"name": "Monterail",
"logo": "monterail.png",
+ "hero": "monterail-hero.png",
+ "flipLogo": true,
"intro": "Monterail is a full-service software development company from Poland. Since 2010, we have been building innovative software for start-ups, SMBs, and enterprises from various industries globally. Our Vue experts, using battle-tested technologies and frameworks, have delivered more than 30 Vue-based projects.",
"description": [
"At a full-service consultancy like Monterail, you get every competence under one roof. From concept, to design, and product release. Depending on the product lifecycle stage, we guide clients through building applications from scratch or scaling them quickly.",
@@ -76,7 +78,7 @@
"region": ["Europe"],
"website": {
"text": "www.monterail.com",
- "url": "https://www.monterail.com/?utm_source=vuejs.org&utm_medium=referral&utm_campaign=partners"
+ "url": "https://www.monterail.com/services/vue-js-development?utm_source=partnership&utm_medium=logo&utm_campaign=Vue"
},
"contact": "hello@monterail.com",
"hiring": "https://www.monterail.com/careers?utm_source=vuejs.org&utm_medium=referral&utm_campaign=partner-hiring-link",
@@ -85,13 +87,25 @@
{
"name": "Curotec",
"logo": "curotec.png",
- "intro": "Our clients leverage our deep Vue.js & Nuxt.js expertise to develop better digital products and quickly expand their product development team velocity.",
+ "intro": "Work with a team that understands Vue.js inside and out. SaaS and enterprise teams leverage Curotec for best-in-class project execution and staff augmentation services focused on Vue.js.",
"description": [
- "Curotec approaches software development and IT support differently – address the business problems that our clients tell us they need to have solved with technology and with the right resources at the right time. That starts with understanding your challenges and pairing it with solutions and talent to get the outcome you’re driving for.",
- "The result? Products that are responsive to your needs and primed for your growth, while ensuring your applications have a clean and straightforward end-user experience. And with well-developed and elegantly written code, it’s seamless for us to support and maintain as your needs evolve."
+ "Whether you need a firm to build your idea, support an existing codebase, or augment your front-end dev team, we’ve got you covered. SaaS and enterprise product teams turn to Curotec for a firm that can get the job done right.",
+ "We've got an all-shores model with team members in the US, LATAM, and South Asia. We'll create a flexible engagement for your needs aligned with your budget, timezone, and project goals. We also cover three main focus areas which include:",
+ "- Enterprise software development",
+ "- SaaS product development",
+ "- Headless / Jamstack website development",
+ "If you're looking for a Vue.js-focused front-end development team that writes great quality code and gets stuff done, click the contact button below and get in touch!"
],
"region": ["North America", "Latin America"],
- "proficiencies": ["Vue", "Nuxt", "Laravel", "Jamstack"],
+ "proficiencies": [
+ "Vue.js",
+ "Nuxt",
+ "Laravel",
+ "Headless",
+ "Node.js",
+ "Python",
+ "WordPress"
+ ],
"website": {
"text": "www.curotec.com",
"url": "https://www.curotec.com/services/technologies/vuejs/"
@@ -100,62 +114,6 @@
"hiring": "https://www.curotec.com/careers?source=vuejs-partner",
"platinum": true
},
- {
- "name": "64 Robots",
- "logo": "64robots.svg",
- "intro": "We're a team of Vue / Nuxt experts creating beautifully designed, cutting edge modern applications. Whether building something new, refactoring an existing project or moving to Vue/Nuxt 3, we'll give you a personal and thoughtful approach to development.",
- "description": [
- "We specialize in building Laravel APIs, Vue.js 2/3 SPAs, Nuxt.js 2/3 SSR applications, and Flutter mobile applications.",
- "We love working with companies of all sizes. We've guided early-stage, funded startups to a successful launch and helped large international companies refactor and rebuild existing products to scale into the future. Whatever your needs, we'll help you make the right technology decisions and build a polished product that will put you on the path to success.",
- "We set ourselves apart by our level of involvement in your product. Think of us as an extension of your team. Whether augmenting an existing team or stepping in as de facto CTO to make the technical decisions, we're there for you. We're selective in the products that we take on, as we truly want to believe in our work and do everything we can to make them successful. Your success is our success."
- ],
- "region": ["North America", "Europe", "Africa"],
- "proficiencies": ["Vue", "Nuxt", "Laravel", "Flutter", "Node.js"],
- "website": {
- "text": "64robots.com",
- "url": "https://64robots.com/"
- },
- "contact": "rob@64robots.com",
- "platinum": true
- },
- {
- "name": "DevSquad",
- "logo": "devsquad.png",
- "intro": "You can think of DevSquad as the Navy SEALs of software development. Our team members have unique and diverse skills, and this cross-functionality lets us successfully complete any mission.",
- "description": [
- "All of our clients get their own dedicated Squad. Even if you need 30 developers, everyone working on your project is split into small agile teams of 2-6 people. A battle-tested small team can move quicker and with more precision than larger teams, just like the Navy SEALs.",
- "Instead of the bug-filled code, you may have received in the past, we write robust software and test the hell out of it. But instead of just testing manually, we write additional code to test your code. This ensures bugs are spotted quickly and automatically before your employees or customers ever touch the software. And it prevents bigger problems down the road when you try to scale usage or add new features.",
- "DevSquad gives you the proven proves and all the experience you need to build your software better, faster, and right the first time."
- ],
- "region": ["North America"],
- "proficiencies": ["Vue.js", "Laravel", "Node.js"],
- "website": {
- "text": "devsquad.com",
- "url": "https://devsquad.com/vuejs-developers/"
- },
- "contact": "phil@devsquad.com",
- "platinum": true
- },
- {
- "name": "Tighten",
- "logo": "tighten.svg",
- "flipLogo": true,
- "intro": "Treat people well, solve the right problems, build spectacular software—that's how we roll. We're ultra-focused and deeply experienced in the technology powering modern business, including Vue.js. Via our signature method, our meticulously assembled team delivers unparalleled service, helping you do more with your software, and do right by your business.",
- "description": [
- "Empathetically opinionated, expertly executed development. That's what we deliver.",
- "At Tighten, we sweat the hell out of the details to give your app the fit-and-finish today's users expect, while giving you the clarity and confidence to charge ahead.",
- "Whether you’re looking to simply enhance a user interface or build a sophisticated JavaScript-based application, we’ve got you covered. Vue.js is a flexible and robust framework, capable of powering a complex single-page application. We typically combine it with a Laravel-based API.",
- "If you're building a development team, you know it takes time and diligence, and it could be the make-or-break factor for your business. Companies turn to Tighten at key turning points, to propel their technology forward while they assemble the right team for their business."
- ],
- "region": ["North America", "Europe", "Latin America"],
- "proficiencies": ["Vue", "Nuxt", "Laravel", "Inertia", "Tailwind"],
- "website": {
- "text": "tighten.com",
- "url": "https://tighten.com/vue"
- },
- "contact": "keith.damiani@tighten.co",
- "platinum": true
- },
{
"name": "Redberry",
"logo": "redberry.png",
@@ -186,7 +144,7 @@
"logo": "webreinvent.png",
"intro": "WebReinvent is a software development company that provides a range of end-to-end software products, real-time apps, multi-tenant SaaS applications, low latency API & mobile app development services. We have delivered MVP to enterprise-level software globally from startup to MNC. Email us, and let's build your software product.",
"description": [
- "WebReinvent is a process-oriented software development company that provides a range of end-to-end software products, real-time apps, multi-tenant SaaS applications, low latency API & mobile apps development services. Our team is well versed with VueJs and its ecosystem. We have delivered MVP to enterprise-level software from startup to MNC. Not only client projects we have developed multiple open-source products which are based on VueJs. We are proud to mention that we are one of the few official Laravel & NuxtJS partners too.",
+ "WebReinvent is a process-oriented software development company that provides a range of end-to-end software products, real-time apps, multi-tenant SaaS applications, low latency API & mobile apps development services. Our team is well versed with VueJs and its ecosystem. We have delivered MVP to enterprise-level software from startup to MNC. Not only client projects we have developed multiple open-source products which are based on VueJs. We are proud to mention that we are one of the few official Laravel & Nuxt partners too.",
"Our team loves to follow the industry standards, some of which are managing git repo, code review, release deployments via CI/CD (DevOps), automated software testing, maintaining detailed technical documentation, application performance monitoring, etc.",
"Email us, and let's build your software product."
],
@@ -198,5 +156,62 @@
},
"contact": "we@webreinvent.com",
"hiring": "https://webreinvent.com/career?utm_source=vuejs.org&utm_medium=website&utm_campaign=partner-hiring-link"
+ },
+ {
+ "name": "HeroDevs",
+ "logo": "herodevs.png",
+ "flipLogo": true,
+ "hero": "herodevs-hero.png",
+ "intro": "End-of-life of open source software versions creates massive challenges for companies. HeroDevs offers two solutions: (1) We provide never-ending support for sunsetted open source software, and (2) we provide consulting and engineering to help companies migrate to in-support open source software.",
+ "description": [
+ "When open source software is reaching end-of-life, you’re faced with a difficult decision: do you spend months or years of dev time migrating your code, or do you risk being non-compliant with industry regulations and your company’s SLAs?",
+ "At HeroDevs we pride ourselves in being the experts that help you navigate end-of-life events in your technology stack. Companies offering enterprise support for open source libraries stop at the end of life. That’s where our value prop begins with our Never-Ending Support (NES) products. Our team has not only provided over 450 organizations with supported, secured versions of open source software beyond their end of life, but has also helped dozens of companies migrate their codebase to a modern, supported open source stack.",
+ "With all NES Products we offer: continuous source code scanning for vulnerabilities, 5-minute installation without leaving your network, scanning for possible IP infringement in your code, and checks for platform, browser and 3rd-party library compatibility.",
+ "Need to migrate? HeroDevs can help with that too. Hire our team of experts to help you navigate the challenges that come with migrating your code.",
+ "Want to learn more? Find us at herodevs.com or send us a note at hello@herodevs.com."
+ ],
+ "proficiencies": ["Vue", "Angular", "Migration", "EOL Support"],
+ "region": ["North America"],
+ "website": {
+ "text": "herodevs.com",
+ "url": "https://www.herodevs.com/support/vue"
+ },
+ "platinum": true,
+ "contact": "hello@herodevs.com",
+ "hiring": "https://www.herodevs.com/job-board"
+ },
+ {
+ "name": "Proxify",
+ "logo": "proxify.svg",
+ "flipLogo": true,
+ "intro": "With Proxify, you can hire expert Vue.js developers, at a fair price and with zero risk, in just a few days. The quality and commitment of an in-house team, with the flexibility of contractors. Augment your existing team or build a new one, without the risks and admin of permanent employment.",
+ "description": [
+ "Proxify is an end-to-end partner that connects businesses with thoroughly vetted developers, matching you with perfect-fit developers in just two days.",
+ "Our network includes over 4,000 developers with expertise in 500+ tech skills. We accept only 2% of applicants to ensure the highest quality standards. Thousands of businesses worldwide trust our rigorous selection process.",
+ "- Time-to-hire: Ideal candidates are presented within just two days.",
+ "- A core team member, not just a freelancer: Proxify developers deliver quality on business-critical code and fit seamlessly with your team’s culture. No different to your in-house staff.",
+ "- Fair pricing: Our model of working with top-tier talent remotely across the world is both cost-effective for our clients, and lucrative for our developers. Everybody wins.",
+ "- Risk-free and adaptable: Enjoy a team that can quickly adjust as your priorities shift, without the risks and limitations of permanent employment."
+ ],
+ "proficiencies": [
+ "Vue",
+ "Ruby on Rails",
+ "Node.js",
+ "React Native",
+ "Flutter"
+ ],
+ "region": [
+ "Europe"
+ ],
+ "location": [
+ "Europe"
+ ],
+ "website": {
+ "text": "proxify.io",
+ "url": "https://proxify.io/?utm_source=partnership&utm_medium=vuejs&utm_campaign=partners-proxify.html"
+ },
+ "contactPage": "https://proxify.io/hire-vuejs?utm_source=partnership&utm_medium=vuejs&utm_campaign=partners-proxify.html",
+ "hiring": "https://career.proxify.io/apply?utm_source=partnership&utm_medium=vuejs&utm_campaign=partners-proxify.html",
+ "platinum": true
}
]
diff --git a/src/partners/passionatepeople.md b/src/partners/passionatepeople.md
deleted file mode 100644
index ec818c85ce..0000000000
--- a/src/partners/passionatepeople.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-page: true
-footer: false
----
-
-
-
-
diff --git a/src/partners/redberry.md b/src/partners/redberry.md
deleted file mode 100644
index 3bf59532e0..0000000000
--- a/src/partners/redberry.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-page: true
-footer: false
----
-
-
-
-
diff --git a/src/partners/tighten.md b/src/partners/tighten.md
deleted file mode 100644
index 0e577d3f39..0000000000
--- a/src/partners/tighten.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-page: true
-footer: false
----
-
-
-
-
diff --git a/src/partners/vehikl.md b/src/partners/vehikl.md
deleted file mode 100644
index 6c3d4d71b6..0000000000
--- a/src/partners/vehikl.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-page: true
-footer: false
----
-
-
-
-
diff --git a/src/partners/webreinvent.md b/src/partners/webreinvent.md
deleted file mode 100644
index 55faa3ddee..0000000000
--- a/src/partners/webreinvent.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-page: true
-footer: false
----
-
-
-
-
diff --git a/src/public/_headers b/src/public/_headers
index d56075af67..bc0cf8ceaf 100644
--- a/src/public/_headers
+++ b/src/public/_headers
@@ -1,5 +1,6 @@
/*
- X-Frame-Options: DENY
+ X-Frame-Options: ALLOW-FROM https://staging.certification.vuejs.org https://certification.vuejs.org https://certificates.dev https://staging.certificates.dev https://alemira.com https://*.alemira.com
+ Content-Security-Policy: frame-ancestors https://staging.certification.vuejs.org https://certification.vuejs.org https://certificates.dev https://staging.certificates.dev https://alemira.com https://*.alemira.com
/assets/*
cache-control: max-age=31536000
diff --git a/src/public/_redirects b/src/public/_redirects
index ff37459c21..039432c696 100644
--- a/src/public/_redirects
+++ b/src/public/_redirects
@@ -3,6 +3,19 @@
/ecosystem/partners.html /partners/
/resources/* /ecosystem/:splat
+# From Vue v2 runtime warnings
+
+/guide/computed.html https://v2.vuejs.org/v2/guide/computed.html
+/guide/custom-directive.html https://v2.vuejs.org/v2/guide/custom-directive.html
+/guide/deployment.html https://v2.vuejs.org/v2/guide/deployment.html
+/guide/list.html https://v2.vuejs.org/v2/guide/list.html
+# https://vuejs.org/v2/api/#data
+# /v2/api/ https://v2.vuejs.org/v2/api/
+# https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties
+# /v2/guide/reactivity.html https://v2.vuejs.org/v2/guide/reactivity.html
+# https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
+# /v2/guide/components.html https://v2.vuejs.org/v2/guide/components.html
+
/v2/guide/team.html /about/team.html
/v2/guide/join.html /about/community-guide.html
/v2/examples/ https://vuejs.org/examples/#markdown
@@ -48,3 +61,8 @@
/v2/guide/reactivity.html /guide/extras/reactivity-in-depth.html
/v2/* https://v2.vuejs.org/v2/:splat?redirect=true 302
+
+/*.txt /:splat.md 301
+/llms.md /llms.txt 301
+/llms.txt /llms.txt 200!
+/llms-full.txt /llms-full.txt 200!
diff --git a/src/public/funding.json b/src/public/funding.json
new file mode 100644
index 0000000000..c436bcfa0e
--- /dev/null
+++ b/src/public/funding.json
@@ -0,0 +1,120 @@
+{
+ "version": "v1.0.0",
+
+ "entity": {
+ "type": "organisation",
+ "role": "owner",
+ "name": "Vue Technology LLC",
+ "email": "evan@vuejs.org",
+ "phone": "",
+ "description": "Vue Technology LLC is the legal entity representing Vue's business operations and fund distribution to team members",
+ "webpageUrl": {
+ "url": "https://vuejs.org/",
+ "wellKnown": ""
+ }
+ },
+
+ "projects": [
+ {
+ "guid": "vuejs",
+ "name": "Vue.js",
+ "description": "Vue.js is one of the most widely adopted frontend frameworks, with over 5.5 million weekly downloads and 2 million weekly active users. It is also the technology powering Zerodha's frontend.",
+ "webpageUrl": {
+ "url": "https://vuejs.org/",
+ "wellKnown": ""
+ },
+ "repositoryUrl": {
+ "url": "https://github.com/vuejs/core",
+ "wellKnown": "https://github.com/vuejs/core/blob/main/.well-known/funding-manifest-urls"
+ },
+ "licenses": ["spdx:MIT"],
+ "tags": ["frontend", "javascript", "web-development", "ui"]
+ }
+ ],
+
+ "funding": {
+ "channels": [
+ {
+ "guid": "github-sponsors",
+ "type": "other",
+ "address": "https://github.com/sponsors/yyx990803",
+ "description": "GitHub supports payment via credit card or invoice-based billing."
+ },
+ {
+ "guid": "open-collective",
+ "type": "other",
+ "address": "https://opencollective.com/vuejs",
+ "description": "OpenCollective supports payment via credit card, Google Pay, or US bank ACH transfer."
+ },
+ {
+ "guid": "bank-of-america",
+ "type": "bank",
+ "address": "",
+ "description": "For donations via bank transfers, please get in touch for bank details."
+ }
+ ],
+
+ "plans": [
+ {
+ "guid": "special",
+ "status": "active",
+ "name": "Global Special Sponsor",
+ "description": "Exclusive above-the-fold logo placement on vuejs.org home page / Most prominent logo placement in on the right sidebar of every content page on vuejs.org (3M+ page views per month / 500k+ unique MAU) / Most prominent logo placement in the README and BACKERS files of the vuejs/core repo.",
+ "amount": 5000,
+ "currency": "USD",
+ "frequency": "monthly",
+ "channels": [
+ "github-sponsors",
+ "open-collective",
+ "bank-of-america"
+ ]
+ },
+ {
+ "guid": "platinum",
+ "status": "active",
+ "name": "Platinum Sponsor",
+ "description": "Logo on the right sidebar of every content page on vuejs.org (3M+ page views per month / 500k+ unique MAU) / Large logo placement on vuejs.org front page + sponsors page + in the README and BACKERS files of the vuejs/core repo.",
+ "amount": 2000,
+ "currency": "USD",
+ "frequency": "monthly",
+ "channels": [
+ "github-sponsors",
+ "open-collective",
+ "bank-of-america"
+ ]
+ },
+ {
+ "guid": "gold",
+ "status": "active",
+ "name": "Gold Sponsor",
+ "description": "Medium logo placement on vuejs.org front page + sponsors page + in the README and BACKERS files of the vuejs/core repo.",
+ "amount": 500,
+ "currency": "USD",
+ "frequency": "monthly",
+ "channels": ["github-sponsors", "open-collective"]
+ },
+ {
+ "guid": "silver",
+ "status": "active",
+ "name": "Silver Sponsor",
+ "description": "Small logo placement on vuejs.org sponsors page + in the README and BACKERS files of the vuejs/core repo.",
+ "amount": 250,
+ "currency": "USD",
+ "frequency": "monthly",
+ "channels": ["github-sponsors", "open-collective"]
+ },
+ {
+ "guid": "bronze",
+ "status": "active",
+ "name": "Bronze Sponsor",
+ "description": "Small logo placement in the README and BACKERS files of the vuejs/core repo.",
+ "amount": 100,
+ "currency": "USD",
+ "frequency": "monthly",
+ "channels": ["github-sponsors", "open-collective"]
+ }
+ ],
+
+ "history": []
+ }
+}
diff --git a/src/public/images/developers/1020-profile.svg b/src/public/images/developers/1020-profile.svg
new file mode 100644
index 0000000000..b6048806f1
--- /dev/null
+++ b/src/public/images/developers/1020-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/1020-score.svg b/src/public/images/developers/1020-score.svg
new file mode 100644
index 0000000000..ca8e77294b
--- /dev/null
+++ b/src/public/images/developers/1020-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/1346-profile.svg b/src/public/images/developers/1346-profile.svg
new file mode 100644
index 0000000000..cdc03f3e2e
--- /dev/null
+++ b/src/public/images/developers/1346-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/1346-score.svg b/src/public/images/developers/1346-score.svg
new file mode 100644
index 0000000000..a1dc07057e
--- /dev/null
+++ b/src/public/images/developers/1346-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/2030-profile.svg b/src/public/images/developers/2030-profile.svg
new file mode 100644
index 0000000000..fdf9a575dc
--- /dev/null
+++ b/src/public/images/developers/2030-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/2030-score.svg b/src/public/images/developers/2030-score.svg
new file mode 100644
index 0000000000..e4cc47d2d9
--- /dev/null
+++ b/src/public/images/developers/2030-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/2535-profile.svg b/src/public/images/developers/2535-profile.svg
new file mode 100644
index 0000000000..b98aa66a5e
--- /dev/null
+++ b/src/public/images/developers/2535-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/2535-score.svg b/src/public/images/developers/2535-score.svg
new file mode 100644
index 0000000000..6f75a00c4e
--- /dev/null
+++ b/src/public/images/developers/2535-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/3021-profile.svg b/src/public/images/developers/3021-profile.svg
new file mode 100644
index 0000000000..092d5139e9
--- /dev/null
+++ b/src/public/images/developers/3021-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/3021-score.svg b/src/public/images/developers/3021-score.svg
new file mode 100644
index 0000000000..a4929e2b2a
--- /dev/null
+++ b/src/public/images/developers/3021-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/3709-profile.svg b/src/public/images/developers/3709-profile.svg
new file mode 100644
index 0000000000..dbfdf82a7e
--- /dev/null
+++ b/src/public/images/developers/3709-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/3709-score.svg b/src/public/images/developers/3709-score.svg
new file mode 100644
index 0000000000..ca8e77294b
--- /dev/null
+++ b/src/public/images/developers/3709-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/4290-profile.svg b/src/public/images/developers/4290-profile.svg
new file mode 100644
index 0000000000..04a4f91f9f
--- /dev/null
+++ b/src/public/images/developers/4290-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/4290-score.svg b/src/public/images/developers/4290-score.svg
new file mode 100644
index 0000000000..6bbebf4031
--- /dev/null
+++ b/src/public/images/developers/4290-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/5022-profile.svg b/src/public/images/developers/5022-profile.svg
new file mode 100644
index 0000000000..dc07709a3b
--- /dev/null
+++ b/src/public/images/developers/5022-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/5022-score.svg b/src/public/images/developers/5022-score.svg
new file mode 100644
index 0000000000..c05589284d
--- /dev/null
+++ b/src/public/images/developers/5022-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/5328-profile.svg b/src/public/images/developers/5328-profile.svg
new file mode 100644
index 0000000000..fb442dcdf4
--- /dev/null
+++ b/src/public/images/developers/5328-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/5328-score.svg b/src/public/images/developers/5328-score.svg
new file mode 100644
index 0000000000..67ff885a8a
--- /dev/null
+++ b/src/public/images/developers/5328-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/developers/5697-profile.svg b/src/public/images/developers/5697-profile.svg
new file mode 100644
index 0000000000..4614ebf63a
--- /dev/null
+++ b/src/public/images/developers/5697-profile.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/public/images/developers/5697-score.svg b/src/public/images/developers/5697-score.svg
new file mode 100644
index 0000000000..5e246889bb
--- /dev/null
+++ b/src/public/images/developers/5697-score.svg
@@ -0,0 +1,63 @@
+
diff --git a/src/public/images/lambdatest.svg b/src/public/images/lambdatest.svg
new file mode 100644
index 0000000000..f4875ee1ec
--- /dev/null
+++ b/src/public/images/lambdatest.svg
@@ -0,0 +1,18 @@
+
+
diff --git a/src/public/images/partners/curotec-hero.jpg b/src/public/images/partners/curotec-hero.jpg
index 1948fcc054..06d5644dc2 100644
Binary files a/src/public/images/partners/curotec-hero.jpg and b/src/public/images/partners/curotec-hero.jpg differ
diff --git a/src/public/images/partners/curotec.png b/src/public/images/partners/curotec.png
index 416eba4eeb..3e1e112fbc 100644
Binary files a/src/public/images/partners/curotec.png and b/src/public/images/partners/curotec.png differ
diff --git a/src/public/images/partners/devsquad-hero.jpg b/src/public/images/partners/devsquad-hero.jpg
deleted file mode 100644
index 52837bc503..0000000000
Binary files a/src/public/images/partners/devsquad-hero.jpg and /dev/null differ
diff --git a/src/public/images/partners/devsquad.png b/src/public/images/partners/devsquad.png
deleted file mode 100644
index a6f579f1e3..0000000000
Binary files a/src/public/images/partners/devsquad.png and /dev/null differ
diff --git a/src/public/images/partners/epicmax.png b/src/public/images/partners/epicmax.png
new file mode 100644
index 0000000000..f427678e7c
Binary files /dev/null and b/src/public/images/partners/epicmax.png differ
diff --git a/src/public/images/partners/epicmax.svg b/src/public/images/partners/epicmax.svg
new file mode 100644
index 0000000000..a724925cb8
--- /dev/null
+++ b/src/public/images/partners/epicmax.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/public/images/partners/herodevs-dark.png b/src/public/images/partners/herodevs-dark.png
new file mode 100644
index 0000000000..c007439855
Binary files /dev/null and b/src/public/images/partners/herodevs-dark.png differ
diff --git a/src/public/images/partners/herodevs-hero.png b/src/public/images/partners/herodevs-hero.png
new file mode 100644
index 0000000000..84e0a6f2d3
Binary files /dev/null and b/src/public/images/partners/herodevs-hero.png differ
diff --git a/src/public/images/partners/herodevs.png b/src/public/images/partners/herodevs.png
new file mode 100644
index 0000000000..e0daedf18b
Binary files /dev/null and b/src/public/images/partners/herodevs.png differ
diff --git a/src/public/images/partners/jump24-dark.svg b/src/public/images/partners/jump24-dark.svg
new file mode 100644
index 0000000000..8ce1236634
--- /dev/null
+++ b/src/public/images/partners/jump24-dark.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/public/images/partners/jump24-hero.jpg b/src/public/images/partners/jump24-hero.jpg
new file mode 100644
index 0000000000..735e039c10
Binary files /dev/null and b/src/public/images/partners/jump24-hero.jpg differ
diff --git a/src/public/images/partners/jump24.svg b/src/public/images/partners/jump24.svg
new file mode 100644
index 0000000000..1764f478b5
--- /dev/null
+++ b/src/public/images/partners/jump24.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/public/images/partners/monterail-dark.png b/src/public/images/partners/monterail-dark.png
new file mode 100644
index 0000000000..a063dbb90c
Binary files /dev/null and b/src/public/images/partners/monterail-dark.png differ
diff --git a/src/public/images/partners/monterail-hero.jpg b/src/public/images/partners/monterail-hero.jpg
deleted file mode 100644
index 48fc7d4823..0000000000
Binary files a/src/public/images/partners/monterail-hero.jpg and /dev/null differ
diff --git a/src/public/images/partners/monterail-hero.png b/src/public/images/partners/monterail-hero.png
new file mode 100644
index 0000000000..7f869a555b
Binary files /dev/null and b/src/public/images/partners/monterail-hero.png differ
diff --git a/src/public/images/partners/proxify-dark.svg b/src/public/images/partners/proxify-dark.svg
new file mode 100644
index 0000000000..7675783288
--- /dev/null
+++ b/src/public/images/partners/proxify-dark.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/public/images/partners/proxify-hero.jpg b/src/public/images/partners/proxify-hero.jpg
new file mode 100644
index 0000000000..f08a9e9941
Binary files /dev/null and b/src/public/images/partners/proxify-hero.jpg differ
diff --git a/src/public/images/partners/proxify.svg b/src/public/images/partners/proxify.svg
new file mode 100644
index 0000000000..79f62e805e
--- /dev/null
+++ b/src/public/images/partners/proxify.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/public/images/sponsors/.gitkeep b/src/public/images/sponsors/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/public/images/sponsors/hbuilder.avif b/src/public/images/sponsors/hbuilder.avif
deleted file mode 100644
index 91ccd515dc..0000000000
Binary files a/src/public/images/sponsors/hbuilder.avif and /dev/null differ
diff --git a/src/public/images/sponsors/hbuilder.png b/src/public/images/sponsors/hbuilder.png
deleted file mode 100644
index d39aadeb9a..0000000000
Binary files a/src/public/images/sponsors/hbuilder.png and /dev/null differ
diff --git a/src/public/images/vueschool/vs-close.svg b/src/public/images/vueschool/vs-close.svg
deleted file mode 100644
index 0e2f31fcd4..0000000000
--- a/src/public/images/vueschool/vs-close.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/images/vueschool/vs-fw-bg-small.svg b/src/public/images/vueschool/vs-fw-bg-small.svg
deleted file mode 100644
index a914f40050..0000000000
--- a/src/public/images/vueschool/vs-fw-bg-small.svg
+++ /dev/null
@@ -1,183 +0,0 @@
-
diff --git a/src/public/images/vueschool/vs-fw-bg.svg b/src/public/images/vueschool/vs-fw-bg.svg
deleted file mode 100644
index 8c52220629..0000000000
--- a/src/public/images/vueschool/vs-fw-bg.svg
+++ /dev/null
@@ -1,219 +0,0 @@
-
diff --git a/src/public/images/vueschool/vs-iso.svg b/src/public/images/vueschool/vs-iso.svg
deleted file mode 100644
index a95d926079..0000000000
--- a/src/public/images/vueschool/vs-iso.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/src/public/images/vueschool/vs-logo.svg b/src/public/images/vueschool/vs-logo.svg
deleted file mode 100644
index b44c004583..0000000000
--- a/src/public/images/vueschool/vs-logo.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/src/public/logo-uwu.png b/src/public/logo-uwu.png
new file mode 100644
index 0000000000..2dc0f8c280
Binary files /dev/null and b/src/public/logo-uwu.png differ
diff --git a/src/public/rom3.min.js b/src/public/rom3.min.js
new file mode 100644
index 0000000000..fa8b81b14a
--- /dev/null
+++ b/src/public/rom3.min.js
@@ -0,0 +1 @@
+"use strict";function _slicedToArray(n,e){return _arrayWithHoles(n)||_iterableToArrayLimit(n,e)||_unsupportedIterableToArray(n,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(n,e){if(n){if("string"==typeof n)return _arrayLikeToArray(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(n,e):void 0}}function _arrayLikeToArray(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=new Array(e);tDate.now())return l.resolve(n.data);for(var o=[],e=0;eDate.now()?(n.config&&E(n.config),l.resolve(n.data)):S(t,{headers:{"X-Partner-Id":y||"perfops","X-Partner-Hostname":window.location.hostname||"unknown"}}).then(function(n){return JSON.parse(n.response)}).then(function(n){if(!n||!n.data)throw new Error("Empty response.data");return window.localStorage.setItem(e,JSON.stringify({data:n.data,config:n.config,expiry:Date.now()+r})),n.config&&E(n.config),n.data}).catch(function(){return[{id:17,cdnUrl:"https://edgecast-perfops.azureedge.net/500b-bench.jpg",p:0},{id:18,cdnUrl:"https://azure-perfops.azureedge.net/500b-bench.jpg",p:0},{id:89,cdnUrl:"https://25748s.ha.azioncdn.net/500b-az-bench.jpg",p:0},{id:93,cdnUrl:"https://staticperfops.cdn.hoy.sh/500b-bench.jpg",p:0},{id:96,cdnUrl:"https://cdn23602612.ahacdn.me/500b-bench.jpg",p:0},{id:100,cdnUrl:"https://pfps17ssl.cdnvideo.ru/500b-bench.jpg",p:0},{id:55,cdnUrl:"https://perfops.s.llnwi.net/500b-bench.jpg",p:1},{id:66,cdnUrl:"https://vodstreaming01.video.globo.com/500b-bench.jpg",p:0},{id:99,cdnUrl:"https://test-perfops.ecn.zenlayer.net/500b-bench.jpg",p:0},{id:85,cdnUrl:"https://proxy.canary.scrubbingcenter.com/test_image.png",p:0},{id:84,cdnUrl:"https://ultrawaf.canary.scrubbingcenter.com/test_image.png",p:0},{id:74,cdnUrl:"https://test-perfops.haproxy.com/500b-bench.jpg",p:0},{id:58,cdnUrl:"https://perfops-cds.s.llnwi.net/500b-bench.jpg",p:0},{id:72,cdnUrl:"https://rum.perfops.mdb.cdn.orange.com/500b-bench.jpg",p:0},{id:87,cdnUrl:"https://test-perfops.ldgslb.com/500b-bench.jpg",p:1},{id:20,cdnUrl:"https://cdnperf.cachefly.net/500b-bench.jpg",p:1},{id:9,cdnUrl:"https://1596384882.rsc.cdn77.org/500b-bench.jpg",p:1},{id:3,cdnUrl:"https://perfops.cloudflareperf.com/500b-cf-bench.jpg",p:1},{id:7,cdnUrl:"https://cpt96125.shopvoxpopulus.com/pics/500b-bench.jpg",p:1},{id:65,cdnUrl:"https://perfops.glbcdn.net/500b-bench.jpg",p:0},{id:40,cdnUrl:"https://perfops.swiftycdn.net/500b-sw-bench.jpg",p:0},{id:11,cdnUrl:"https://perfops1.b-cdn.net/500b-bunny-bench.jpg",p:1},{id:75,cdnUrl:"https://cdnperf-rum.quantil.com/500b-bench.jpg",p:0},{id:67,cdnUrl:"https://media-edge.1e100cdn.net/pics/500b-bench.jpg",p:0},{id:92,cdnUrl:"https://perfops.byte-test.com/500b-bench.jpg",p:1},{id:98,cdnUrl:"https://perfops2.byte-test.com/500b-bench.jpg",p:0},{id:77,cdnUrl:"https://cdnperf.qwilt.com/500b-bench.jpg",p:0},{id:97,cdnUrl:"https://medianova-cdnvperf.mncdn.com/500b-bench.jpg",p:0},{id:5,cdnUrl:"https://d3888oxgux3fey.cloudfront.net/500b-bench.jpg",p:1},{id:10,cdnUrl:"https://akamai-cdn.perfops.io/500b-bench.jpg",p:1},{id:12,cdnUrl:"https://cdn.jsdelivr.net/gh/jimaek/js-test@1.1/500b-bench.jpg",p:1},{id:83,cdnUrl:"https://medianova-cdnperf.mncdn.com/500b-bench.jpg",p:1},{id:2,cdnUrl:"https://ovh-cdn.perfops.io/500b-bench.jpg",p:1},{id:4,cdnUrl:"https://perfops-static.freetls.fastly.net/500b-bench.jpg",p:1},{id:8,cdnUrl:"https://perfops.gcorelabs.com/500b-bench.jpg",p:1},{id:76,cdnUrl:"https://img.perfops.net/500b-bench.jpg",p:0},{id:94,cdnUrl:"https://rum.perfops.cdb.cdn.orange.com/500b-bench.jpg",p:0},{id:35,cdnUrl:"https://cdn81795137.blazingcdn.net/500b-blz-bench.jpg",p:1},{id:15,cdnUrl:"https://cdnperf-rum.cdnetworks.net/500b-bench.jpg",p:1},{id:14,cdnUrl:"https://perfops.r.worldssl.net/500b-bench.jpg",p:1}]})})().then(function(n){var e={ua:navigator.userAgent,hostname:window.location.hostname,client:y,clientdns:c,platform:m,timeElapsed:0,sessionId:"",version:4},t=[];performance.clearResourceTimings();function r(){var n=t.splice(0,t.length);return function(n){var e=0,t=0;return n.forEach(function(n){n.up?2e3
-import SponsorsGroup from '/@theme/components/SponsorsGroup.vue'
+import SponsorsGroup from '@theme/components/SponsorsGroup.vue'
+import { load, data } from '@theme/components/sponsors'
+import { onMounted } from 'vue'
+
+onMounted(load)
-# Become a Vue.js Sponsor
+# Become a Vue.js Sponsor {#become-a-vue-js-sponsor}
Vue.js is an MIT licensed open source project and completely free to use.
The tremendous amount of effort needed to maintain such a large ecosystem and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.
-## How to Sponsor
+## How to Sponsor {#how-to-sponsor}
Sponsorships can be done via [GitHub Sponsors](https://github.com/sponsors/yyx990803) or [OpenCollective](https://opencollective.com/vuejs). Invoices can be obtained via GitHub's payment system. Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in [Sponsorship Tiers](#tier-benefits).
-## Sponsoring Vue as a Business
+If you have questions regarding tiers, payment logistics, or sponsor exposure data, please reach out to [sponsor@vuejs.org](mailto:sponsor@vuejs.org?subject=Vue.js%20sponsorship%20inquiry).
+
+## Sponsoring Vue as a Business {#sponsoring-vue-as-a-business}
-Sponsoring Vue gives you great exposure to over **1.7 million** Vue developers around the world through our website and GitHub project READMEs. In addition, supporting OSS improves the reputation of your brand, which is an important asset for any company that interacts with developers.
+Sponsoring Vue gives you great exposure to over **2 million** Vue developers around the world through our website and GitHub project READMEs. This not only directly generates leads, but also improves your brand recognition as a business that cares about Open Source. This is an intangible but extremely important asset for companies building products for developers, as it improves your conversion rate.
If you are using Vue to build a revenue-generating product, it makes business sense to sponsor Vue's development: **it ensures the project that your product relies on stays healthy and actively maintained.** The exposure and positive brand image in the Vue community also makes it easier to attract and recruit Vue developers.
If you are building a product where your target customers are developers, you will gain high quality traffic through the sponsorship exposure, since all our visitors are developers. The sponsorship also builds brand recognition and improves conversion.
-## Sponsoring Vue as an Individual
+## Sponsoring Vue as an Individual {#sponsoring-vue-as-an-individual}
If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying us coffee once in a while. Many of our team members accept sponsorships and donations via GitHub Sponsors. Look for the "Sponsor" button on each team member's profile on our [team page](/about/team).
You can also try to convince your employer to sponsor Vue as a business. This may not be easy, but business sponsorships typically make a much larger impact on the sustainability of OSS projects than individual donations, so you will help us much more if you succeed.
-## Tier Benefits
+## Tier Benefits {#tier-benefits}
-- **Global Special**:
- - Limited to one sponsor globally (currently filled).
- - Exclusive above the fold logo placement on the front page of [vuejs.org](/).
+- **Global Special Sponsor**:
+ - Limited to **one** sponsor globally. Currently vacant. [Get in touch](mailto:sponsor@vuejs.org?subject=Vue.js%20special%20sponsor%20inquiry)!(Currently filled)
+ - (Exclusive) **Above the fold** logo placement on the front page of [vuejs.org](/).
+ - (Exclusive) Special shoutout and regular retweets of major product launches via [Vue's official X account](https://twitter.com/vuejs) (320k followers).
- Most prominent logo placement in all locations from tiers below.
- **Platinum (USD$2,000/mo)**:
- Prominent logo placement on the front page of [vuejs.org](/).
@@ -45,7 +51,7 @@ You can also try to convince your employer to sponsor Vue as a business. This ma
- Prominent logo placement in the README of [`vuejs/core`](https://github.com/vuejs/core) and [`vuejs/vue`](https://github.com/vuejs/core).
- **Gold (USD$500/mo)**:
- Large logo placement on the front page of [vuejs.org](/).
- - Large Logo placement in the README of `vuejs/core` and `vuejs/vue`.
+ - Large logo placement in the README of `vuejs/core` and `vuejs/vue`.
- **Silver (USD$250/mo)**:
- Medium logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
- **Bronze (USD$100/mo)**:
@@ -55,24 +61,24 @@ You can also try to convince your employer to sponsor Vue as a business. This ma
- **Individual Backer (USD$5/mo)**:
- Name listed in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
-## Current Sponsors
+## Current Sponsors {#current-sponsors}
-### Special Global Sponsor
+### Special Global Sponsor {#special-global-sponsor}
-### Platinum
+### Platinum {#platinum}
-### Platinum (China)
+### Platinum (China) {#platinum-china}
-### Gold
+### Gold {#gold}
-### Silver
+### Silver {#silver}
diff --git a/src/style-guide/index.md b/src/style-guide/index.md
index d0595fba0e..8f7b747f60 100644
--- a/src/style-guide/index.md
+++ b/src/style-guide/index.md
@@ -2,10 +2,10 @@
outline: deep
---
-# Style Guide
+# Style Guide {#style-guide}
-:::warning Status Notice
-The style guide is currently a bit outdated. Most examples are in Options API only, and there are no rules regarding `
+
+
+
+
+```
+
+```vue
+
+
+
+
+ {{ todo.text }}
+
+
+
+```
+
+
diff --git a/src/translations/index.md b/src/translations/index.md
index bf743e2263..e5a84c5298 100644
--- a/src/translations/index.md
+++ b/src/translations/index.md
@@ -2,17 +2,33 @@
aside: false
---
-# Translations
+# Translations {#translations}
-The Vue documentation has recently undergone a major revision, so there are no completed translations in other languages yet.
+## Available Languages {#available-languages}
-Translation efforts are managed in the [vuejs-translations](https://github.com/vuejs-translations/) GitHub organization. There are currently the following translations underway. If you want to contribute, you can open an issue to express your interest.
+- [English](https://vuejs.org/) [[source](https://github.com/vuejs/docs)]
+- [简体中文 / Simplified Chinese](https://cn.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-zh-cn)]
+- [日本語 / Japanese](https://ja.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-ja)]
+- [Українська / Ukrainian](https://ua.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-uk)]
+- [Français / French](https://fr.vuejs.org) [[source](https://github.com/vuejs-translations/docs-fr)]
+- [한국어 / Korean](https://ko.vuejs.org) [[source](https://github.com/vuejs-translations/docs-ko)]
+- [Português / Portuguese](https://pt.vuejs.org) [[source](https://github.com/vuejs-translations/docs-pt)]
+- [বাংলা / Bengali](https://bn.vuejs.org) [[source](https://github.com/vuejs-translations/docs-bn)]
+- [Italiano / Italian](https://it.vuejs.org) [[source](https://github.com/vuejs-translations/docs-it)]
+- [فارسی / Persian](https://fa.vuejs.org) [[source](https://github.com/vuejs-translations/docs-fa)]
+- [Русский / Russian](https://ru.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-ru)]
+- [Čeština / Czech](https://cs.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-cs)]
+- [繁體中文 / Traditional Chinese](https://zh-hk.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-zh-hk)]
+- [Polski / Polish](https://pl.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-pl)]
-- [Simplified Chinese](https://github.com/vuejs-translations/docs-zh-cn)
-- [Japanese](https://github.com/vuejs-translations/docs-ja)
+## Work in Progress Languages {#work-in-progress-languages}
-## Starting a new Translation
+- [العربية / Arabic](https://ar.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-ar)]
+- [Español / Spanish](https://vue3-spanish-docs.netlify.app/) [[source](https://github.com/icarusgk/vuejs-spanish-docs)]
+- [Deutsch / German](https://de.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-de)]
-We are hoping to establish a standard workflow for community translations so that we can more easily coordinate community efforts. Please keep an eye on the [Translation Guidelines repo](https://github.com/vuejs-translations/guidelines/blob/main/README.md) for updates.
+## Starting a new Translation {#starting-a-new-translation}
-In the meanwhile, if you are interested in starting translation for a new language, please open a thread in the [Discussions](https://github.com/vuejs-translations/guidelines/discussions) (and check if there is already one created for your language). This can help you find fellow collaborators and avoid duplicated efforts.
+The Vue documentation has recently undergone a major revision, so translations in other languages are still missing or work-in-progress.
+
+We welcome community efforts to provide more translations. Translation efforts are managed in the [vuejs-translations](https://github.com/vuejs-translations/) GitHub organization. If you are interested in contributing, please check out the [Translation Guidelines](https://github.com/vuejs-translations/guidelines/blob/main/README.md) to get started.
diff --git a/src/tutorial/TutorialRepl.vue b/src/tutorial/TutorialRepl.vue
index e524e625b6..a8ccac7394 100644
--- a/src/tutorial/TutorialRepl.vue
+++ b/src/tutorial/TutorialRepl.vue
@@ -1,14 +1,14 @@
- 
- 
+ 
-
-### Note on Vue CLI and `ts-loader`
+### Note on Vue CLI and `ts-loader` {#note-on-vue-cli-and-ts-loader}
In webpack-based setups such as Vue CLI, it is common to perform type checking as part of the module transform pipeline, for example with `ts-loader`. This, however, isn't a clean solution because the type system needs knowledge of the entire module graph to perform type checks. Individual module's transform step simply is not the right place for the task. It leads to the following problems:
@@ -83,11 +65,11 @@ In webpack-based setups such as Vue CLI, it is common to perform type checking a
If you are currently using Vue 3 + TypeScript via Vue CLI, we strongly recommend migrating over to Vite. We are also working on CLI options to enable transpile-only TS support, so that you can switch to `vue-tsc` for type checking.
-## General Usage Notes
+## General Usage Notes {#general-usage-notes}
-### `defineComponent()`
+### `defineComponent()` {#definecomponent}
-To let TypeScript properly infer types inside component options, we need to define components with [`defineComponent()`](/api/general.html#definecomponent):
+To let TypeScript properly infer types inside component options, we need to define components with [`defineComponent()`](/api/general#definecomponent):
```ts
import { defineComponent } from 'vue'
@@ -129,14 +111,14 @@ export default defineComponent({
See also:
-- [Note on webpack Treeshaking](/api/general.html#note-on-webpack-treeshaking)
-- [type tests for `defineComponent`](https://github.com/vuejs/core/blob/main/test-dts/defineComponent.test-d.tsx)
+- [Note on webpack Treeshaking](/api/general#note-on-webpack-treeshaking)
+- [type tests for `defineComponent`](https://github.com/vuejs/core/blob/main/packages-private/dts-test/defineComponent.test-d.tsx)
:::tip
`defineComponent()` also enables type inference for components defined in plain JavaScript.
:::
-### Usage in Single-File Components
+### Usage in Single-File Components {#usage-in-single-file-components}
To use TypeScript in SFCs, add the `lang="ts"` attribute to `