Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
queryselector test 123
(version: 0)
Comparing performance of:
Node.children vs querySelector
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div class="parent"> <section class="v-container v-container--fluid v-locale--is-ltr pa-4 pa-sm-6 pa-md-8" style="max-width: 960px;"> <div> <section id="get-started-with-vuetify-3"> <h1 class="v-heading mb-2 text-h3 text-sm-h3"><a aria-current="page" href="/en/getting-started/installation/#get-started-with-vuetify-3" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Get started with Vuetify 3</h1> <p>Get started with Vuetify, the world’s most popular Vue.js framework for building feature rich, blazing fast applications.</p> <div class="mb-5"><a class="d-block text-decoration-none" href="https://github.com/sponsors/johnleider?utm_source=vuetifyads&utm_medium=promoted" rel="noopener" target="_blank" style="max-width: 640px;"> <div class="v-lazy d-flex" style="min-height: 56px;"> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded v-vuetify--promoted v-app-ad d-inline-flex flex-child-1 grow-shrink-0" outlined="" style="max-width: 640px; min-height: 56px; width: 100%;"> <div class="v-responsive v-img flex-1-1-auto rounded" style="max-height: 56px;"> <div class="v-responsive__sizer" style="padding-bottom: 8.75%;"></div><img class="v-img__img v-img__img--cover" src="https://cdn.cosmicjs.com/3acc08a0-b0fc-11ec-97bc-19d12908cbbe-github-banner.png" style=""> <!----> <!----> <!----> <!----> <div class="v-responsive__content"> <div class="d-flex align-center fill-height pe-3"> <div class="v-responsive v-img mx-1 mx-md-2" aria-label="Link to Vuetify - GitHub Sponsors" role="img" contain="" style="height: 56px; max-width: 56px;"> <div class="v-responsive__sizer" style="padding-bottom: 100%;"></div><img class="v-img__img v-img__img--contain" src="https://cdn.cosmicjs.com/a7e3d3f0-d746-11ea-8d04-338192d0d6f9-github.png" alt="Link to Vuetify - GitHub Sponsors" style=""> <!----> <!----> <!----> <!----> <!----> </div> <div class="v-markdown text-subtitle-2 text-sm-h6 font-weight-light text-white"> <p>Support Vuetify by <strong>sponsoring on GitHub</strong></p> </div> </div> </div> </div> </div> </div> </a></div><br> <section id="installation"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#installation" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Installation</h2> <p>To get started with Vuetify 3, simply paste the following code into your terminal:</p> <div class="v-slide-group v-tabs v-tabs--horizontal v-tabs--align-tabs-start v-tabs--density-default" tabindex="-1" role="tablist"> <!----> <div class="v-slide-group__container"> <div class="v-slide-group__content" style="transform: translateX(0px);"><button type="button" class="v-btn v-slide-group-item--active v-tab--selected v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-plain v-tab text-none" tabindex="0" role="tab" aria-selected="true" value="yarn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator="">yarn<div class="v-tab__slider"></div></span> <!----> <!----></button><button type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-plain v-tab text-none" tabindex="-1" role="tab" aria-selected="false" value="npm"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator="">npm<div class="v-tab__slider"></div></span> <!----> <!----></button><button type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-plain v-tab text-none" tabindex="-1" role="tab" aria-selected="false" value="pnpm"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator="">pnpm<div class="v-tab__slider"></div></span> <!----> <!----></button></div> </div> <!----> </div> <div class="v-window v-theme--light"> <div class="v-window__container"> <div class="v-window-item v-window-item--active" disabled="false" style=""> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-396" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-bash"><code class="language-bash"><span class="token function">yarn</span> create vuetify </code></pre> </div> </div> </div> <div class="v-window-item" disabled="false" style="display: none;"> <!----> </div> <div class="v-window-item" disabled="false" style="display: none;"> <!----> </div> <!----> </div> <!----> </div> <p>This command prompts you with a few options before generating your scaffolded Vue / Vuetify 3 project.</p> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-377" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-bash"><code class="language-bash">success Installed <span class="token string">"create-vuetify@x.x.x"</span> with binaries: - create-vuetify ? Project name: ❯ vuetify-project // the folder to generate your application ? Use TypeScript?: ❯ No / Yes ? Would you like to <span class="token function">install</span> dependencies with yarn, npm, or pnpm?: ❯ <span class="token function">yarn</span> <span class="token function">npm</span> <span class="token function">pnpm</span> none </code></pre> </div> </div> <p>After making your selections, <a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://github.com/vuetifyjs/create-vuetify" target="_blank" rel="noopener"> <!--v-if-->create-vuetify<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a> will generate the structure for your new application.</p> <p>Once the scaffold is complete, start the vite development server by running the following commands:</p> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-379" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">cd</span> vuetify-project <span class="token function">yarn</span> dev </code></pre> </div> </div> <p>For more information regarding supported package managers, please visit their official websites:</p> <ul> <li><a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://yarnpkg.com/" target="_blank" rel="noopener"> <!--v-if-->yarn<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a></li> <li><a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://npmjs.org/" target="_blank" rel="noopener"> <!--v-if-->npm<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a></li> <li><a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://pnpm.io/" target="_blank" rel="noopener"> <!--v-if-->pnpm<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a></li> </ul> <section id="ssr"> <h3 class="v-heading mb-2 text-h5"><a aria-current="page" href="/en/getting-started/installation/#ssr" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>SSR</h3> <p>Vue 3 has no way to automatically detect if SSR is used — so nuxt, gridsome, and other SSR frameworks must manually set the <code class="v-code">ssr</code> option to <code class="v-code">true</code> in order to properly render the application.</p> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr px-1"> <!----> <div class="v-toolbar__content" style="height: 44px;"> <!----> <!----> <div class="v-sheet v-theme--light bg-transparent rounded-tl text-body-2 px-3 pt-3 text-medium-emphasis" style="height: 44px;"><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z"></path> </svg></i> src/plugins/vuetify.js</div> <!----> </div> <!----> </header><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-381" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-js"><code data-resource="src/plugins/vuetify.js" class="language-js"><span class="token keyword">import</span> <span class="token string">'@mdi/font/css/materialdesignicons.css'</span> <span class="token keyword">import</span> <span class="token string">'vuetify/styles'</span> <span class="token keyword">const</span> vuetify <span class="token operator">=</span> <span class="token function">createVuetify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">ssr</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre> </div> </div> </section> </section> <section id="vue-cli"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#vue-cli" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Vue CLI</h2> <p>Vue CLI is currently in maintenance mode and no longer the default tooling used to build Vue applications. Vuetify projects are now generated using <a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://vitejs.dev/" target="_blank" rel="noopener"> <!--v-if-->vite<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a>. We plan on enabling the Vue CLI installation path in an official guide in the future.</p> </section> <section id="manual-steps"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#manual-steps" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Manual steps</h2> <p>Follow these steps if for example you are adding Vuetify to an existing project, or simply do not want to use a scaffolding tool.</p> <p><code class="v-code">yarn add vuetify@^3.3.7</code></p> <p>In the file where you create the Vue application, add the following code</p> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-383" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span> <span class="token comment">// Vuetify</span> <span class="token keyword">import</span> <span class="token string">'vuetify/styles'</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> createVuetify <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuetify'</span> <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> components <span class="token keyword">from</span> <span class="token string">'vuetify/components'</span> <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> directives <span class="token keyword">from</span> <span class="token string">'vuetify/directives'</span> <span class="token keyword">const</span> vuetify <span class="token operator">=</span> <span class="token function">createVuetify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> components<span class="token punctuation">,</span> directives<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vuetify<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span> </code></pre> </div> </div> <p>This will include all components and directives regardless of whether or not you are using them. If you instead only want to include used components, have a look at the <a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://npmjs.com/package/vite-plugin-vuetify" target="_blank" rel="noopener"> <!--v-if-->Vite<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a> or <a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://npmjs.com/package/webpack-plugin-vuetify" target="_blank" rel="noopener"> <!--v-if-->Webpack<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a> plugins, depending on your setup. The plugins also makes it possible to customize SCSS variables.</p> <p>Lastly, do not forget to install <a href="/en/features/icon-fonts/" class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center"> <!--v-if-->icons<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M20,3H5A2,2 0 0,0 3,5V11H7V9L11,12L7,15V13H3V19A2,2 0 0,0 5,21H20A2,2 0 0,0 22,19V5A2,2 0 0,0 20,3M17,17H13V15H17V17M20,13H13V11H20V13M20,9H13V7H20V9M3,13H0V11H3V13Z"></path> </svg></i></a>.</p> </section> <section id="cdn"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#cdn" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>CDN</h2> <p>We recommend using the latest version of Vuetify 3 from <a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://www.jsdelivr.com/" target="_blank" rel="noopener"> <!--v-if-->jsdelivr<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a>. All components and styles are included.</p> <p class="text-truncate"><code class="v-code">https://cdn.jsdelivr.net/npm/vuetify@3.3.7/dist/vuetify.min.css</code></p> <p class="text-truncate"><code class="v-code">https://cdn.jsdelivr.net/npm/vuetify@3.3.7/dist/vuetify.min.js</code></p> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-385" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token operator">=</span> Vue <span class="token keyword">const</span> <span class="token punctuation">{</span> createVuetify <span class="token punctuation">}</span> <span class="token operator">=</span> Vuetify <span class="token keyword">const</span> vuetify <span class="token operator">=</span> <span class="token function">createVuetify</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vuetify<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span> </code></pre> </div> </div> </section> <section id="using-laravel-mix"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#using-laravel-mix" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Using Laravel Mix</h2> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-387" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span> <span class="token comment">// Vuetify</span> <span class="token keyword">import</span> <span class="token string">'@mdi/font/css/materialdesignicons.css'</span> <span class="token keyword">import</span> <span class="token string">'vuetify/styles'</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> createVuetify <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuetify'</span> <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> components <span class="token keyword">from</span> <span class="token string">'vuetify/components'</span> <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> directives <span class="token keyword">from</span> <span class="token string">'vuetify/directives'</span> <span class="token keyword">const</span> vuetify <span class="token operator">=</span> <span class="token function">createVuetify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> components<span class="token punctuation">,</span> directives <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vuetify<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span> </code></pre> </div> </div> <p>To import the fonts you need to add to webpack.mix.js:</p> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-389" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-js"><code class="language-js">mix<span class="token punctuation">.</span><span class="token function">copy</span><span class="token punctuation">(</span><span class="token string">'node_modules/@mdi/font/fonts/'</span><span class="token punctuation">,</span> <span class="token string">'dist/fonts/'</span><span class="token punctuation">)</span> </code></pre> </div> </div> </section> <section id="exposed-exports"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#exposed-exports" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Exposed exports</h2> <section id="js"> <h3 class="v-heading mb-2 text-h5"><a aria-current="page" href="/en/getting-started/installation/#js" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>JS</h3> <div class="v-sheet v-theme--light v-sheet--border v-sheet--rounded overflow-hidden mb-4 app-table"> <div class="v-table v-theme--light v-table--density-default"> <!----> <div class="v-table__wrapper"> <table> <thead> <tr> <th>Name</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class="v-code">vuetify</code></td> <td>Main entry point. Contains <code class="v-code">createVuetify()</code> and public composables.</td> </tr> <tr> <td><code class="v-code">vuetify/styles</code></td> <td>Precompiled global CSS (reset, utilities, etc.), no component styles. Will be redirected to SASS if <code class="v-code">styles.configFile</code> is set in vite or webpack.</td> </tr> <tr> <td><code class="v-code">vuetify/components</code></td> <td>All components. Not recommended as it will include all components during development, slowing down your build.</td> </tr> <tr> <td><code class="v-code">vuetify/components/<name></code></td> <td>Individual components. Grouped by top-level name, for example VListItem, VListGroup, and VListItemTitle are all in <code class="v-code">vuetify/components/VList</code>.</td> </tr> <tr> <td><code class="v-code">vuetify/directives</code></td> <td>All directives.</td> </tr> <tr> <td><code class="v-code">vuetify/directives/<name></code></td> <td>Individual directives.</td> </tr> <tr> <td><code class="v-code">vuetify/blueprints/<name></code></td> <td>Preset collections of prop defaults.</td> </tr> <tr> <td><code class="v-code">vuetify/locale</code></td> <td>Translations for strings in vuetify components. Each language is a named export.</td> </tr> <tr> <td><code class="v-code">vuetify/locale/adapters/<name></code></td> <td>Adapters to retrieve translations from other libraries such as vue-i18n.</td> </tr> <tr> <td><code class="v-code">vuetify/iconsets/<name></code></td> <td>Icon presets, see <a href="/en/features/icon-fonts/" class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center"> <!--v-if-->Icon Fonts<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M20,3H5A2,2 0 0,0 3,5V11H7V9L11,12L7,15V13H3V19A2,2 0 0,0 5,21H20A2,2 0 0,0 22,19V5A2,2 0 0,0 20,3M17,17H13V15H17V17M20,13H13V11H20V13M20,9H13V7H20V9M3,13H0V11H3V13Z"></path> </svg></i></a></td> </tr> </tbody> </table> </div> <!----> </div> </div> </section> <section id="sass"> <h3 class="v-heading mb-2 text-h5"><a aria-current="page" href="/en/getting-started/installation/#sass" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>SASS</h3> <p>See <a href="/en/features/sass-variables/" class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center"> <!--v-if-->SASS Variables<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M20,3H5A2,2 0 0,0 3,5V11H7V9L11,12L7,15V13H3V19A2,2 0 0,0 5,21H20A2,2 0 0,0 22,19V5A2,2 0 0,0 20,3M17,17H13V15H17V17M20,13H13V11H20V13M20,9H13V7H20V9M3,13H0V11H3V13Z"></path> </svg></i></a> for more information.</p> <div class="v-sheet v-theme--light v-sheet--border v-sheet--rounded overflow-hidden mb-4 app-table"> <div class="v-table v-theme--light v-table--density-default"> <!----> <div class="v-table__wrapper"> <table> <thead> <tr> <th>Name</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class="v-code">vuetify</code></td> <td>Global CSS (reset, utilities, etc.), no component styles. Equivalent to <code class="v-code">vuetify/styles</code> in JS.</td> </tr> <tr> <td><code class="v-code">vuetify/settings</code></td> <td>All SASS variables, including component variables.</td> </tr> <tr> <td><code class="v-code">vuetify/tools</code></td> <td>Mixins and functions.</td> </tr> </tbody> </table> </div> <!----> </div> </div> </section> </section> <section id="nightly-builds"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#nightly-builds" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Nightly Builds</h2> <p>The three development branches (<code class="v-code">master</code>, <code class="v-code">dev</code>, and <code class="v-code">next</code>) are automatically published to NPM at 1200 UTC under the <a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://www.npmjs.com/package/@vuetify/nightly?activeTab=versions" target="_blank" rel="noopener"> <!--v-if--><code class="v-code">@vuetify/nightly</code><i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a> namespace. They may be outdated or buggy and are therefore not officially supported and are only supplied for testing purposes. These builds can be installed with a <a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://docs.npmjs.com/cli/v8/commands/npm-install#:~:text=Install%20a%20package%20under%20a%20custom%20alias" target="_blank" rel="noopener"> <!--v-if-->package alias<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a>.</p> <div class="v-sheet v-theme--light v-sheet--border v-sheet--rounded overflow-hidden mb-4 app-table"> <div class="v-table v-theme--light v-table--density-default"> <!----> <div class="v-table__wrapper"> <table> <thead> <tr> <th>Branch name</th> <th>Purpose</th> <th>package.json entry</th> <th>Changelog</th> </tr> </thead> <tbody> <tr> <td><code class="v-code">master</code></td> <td>Bug fixes</td> <td><code class="v-code">"vuetify": "npm:@vuetify/nightly@latest"</code></td> <td><a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://unpkg.com/@vuetify/nightly@latest/CHANGELOG.md" target="_blank" rel="noopener"> <!--v-if-->Changelog<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a></td> </tr> <tr> <td><code class="v-code">dev</code></td> <td>New features</td> <td><code class="v-code">"vuetify": "npm:@vuetify/nightly@dev"</code></td> <td><a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://unpkg.com/@vuetify/nightly@dev/CHANGELOG.md" target="_blank" rel="noopener"> <!--v-if-->Changelog<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a></td> </tr> <tr> <td><code class="v-code">next</code></td> <td>Breaking changes</td> <td><code class="v-code">"vuetify": "npm:@vuetify/nightly@next"</code></td> <td><a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://unpkg.com/@vuetify/nightly@next/CHANGELOG.md" target="_blank" rel="noopener"> <!--v-if-->Changelog<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a></td> </tr> </tbody> </table> </div> <!----> </div> </div> <div class="v-sheet v-theme--light bg-grey-lighten-4 v-sheet--rounded app-markup overflow-hidden mb-4" dir="ltr"> <!--v-if--><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-text text-disabled me-3 mt-1 app-markup-btn" aria-describedby="v-tooltip-391" style="position: absolute; right: 0px; top: 0px;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""><i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M19,3H14.82C14.25,1.44 12.53,0.64 11,1.2C10.14,1.5 9.5,2.16 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M17,11H7V9H17V11M15,15H7V13H15V15Z"></path> </svg></i></span> <!----> <!----></button> <div class="pa-4 pe-12"> <pre class="language-diff"><code class="language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">"devDependencies": { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> "vuetify": "^3.3.0" </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> "vuetify": "npm:@vuetify/nightly@3.3.0-master.2023-05-21" </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">} </span></span></code></pre> </div> </div> </section> <section id="questions"> <h2 class="v-heading mb-2 text-h4 text-sm-h4"><a aria-current="page" href="/en/getting-started/installation/#questions" class="router-link-active router-link-exact-active text-decoration-none text-end text-md-start" aria-hidden="true" style="user-select: none;"><span class="text-primary">#</span></a>Questions</h2> </section> </section> </div> <section id="ready-for-more" class="mt-16"> <div class="mb-3"> <h2 class="v-heading mb-2 text-h4 text-sm-h4 mb-2"> <!--v-if-->Ready for more?</h2><!-- https://vue-i18n.intlify.dev/guide/advanced/component.html#scope-resolving --> <div>Continue your learning with related content selected by the <a href="/en/introduction/meet-the-team/" class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center"> <!--v-if-->Team<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M20,3H5A2,2 0 0,0 3,5V11H7V9L11,12L7,15V13H3V19A2,2 0 0,0 5,21H20A2,2 0 0,0 22,19V5A2,2 0 0,0 20,3M17,17H13V15H17V17M20,13H13V11H20V13M20,9H13V7H20V9M3,13H0V11H3V13Z"></path> </svg></i></a> or move between pages by using the navigation links below.</div> </div> <div class="v-row v-row--dense"> <div class="v-col-sm-4 v-col-12" xs="6"><a class="v-list-item v-list-item--link v-theme--light v-list-item--border v-list-item--density-default v-list-item--two-line v-list-item--rounded v-list-item--variant-text" href="/en/getting-started/contributing/" tabindex="0"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span> <div class="v-list-item__prepend"> <div class="v-avatar v-theme--light v-avatar--density-default v-avatar--size-default v-avatar--variant-flat"><i class="v-icon notranslate v-theme--light v-icon--size-default text-teal" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L14.68,14.35C14.18,15.33 13.17,16 12,16M12,3C13.81,3 15.5,3.5 16.97,4.32L14.87,5.53C14,5.19 13,5 12,5A8,8 0 0,0 4,13C4,15.21 4.89,17.21 6.34,18.65H6.35C6.74,19.04 6.74,19.67 6.35,20.06C5.96,20.45 5.32,20.45 4.93,20.07V20.07C3.12,18.26 2,15.76 2,13A10,10 0 0,1 12,3M22,13C22,15.76 20.88,18.26 19.07,20.07V20.07C18.68,20.45 18.05,20.45 17.66,20.06C17.27,19.67 17.27,19.04 17.66,18.65V18.65C19.11,17.2 20,15.21 20,13C20,12 19.81,11 19.46,10.1L20.67,8C21.5,9.5 22,11.18 22,13Z"></path> </svg></i> <!----><span class="v-avatar__underlay"></span></div> </div> <div class="v-list-item__content" data-no-activator=""> <div class="v-list-item-title">Contributing</div> <div class="v-list-item-subtitle">Getting started</div> <!----> </div> <!----> </a></div> <div class="v-col-sm-4 v-col-12" xs="6"><a class="v-list-item v-list-item--link v-theme--light v-list-item--border v-list-item--density-default v-list-item--two-line v-list-item--rounded v-list-item--variant-text" href="/en/introduction/roadmap/" tabindex="0"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span> <div class="v-list-item__prepend"> <div class="v-avatar v-theme--light v-avatar--density-default v-avatar--size-default v-avatar--variant-flat"><i class="v-icon notranslate v-theme--light v-icon--size-default text-green" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M15,20A1,1 0 0,0 16,19V4H8A1,1 0 0,0 7,5V16H5V5A3,3 0 0,1 8,2H19A3,3 0 0,1 22,5V6H20V5A1,1 0 0,0 19,4A1,1 0 0,0 18,5V9L18,19A3,3 0 0,1 15,22H5A3,3 0 0,1 2,19V18H13A2,2 0 0,0 15,20M9,6H14V8H9V6M9,10H14V12H9V10M9,14H14V16H9V14Z"></path> </svg></i> <!----><span class="v-avatar__underlay"></span></div> </div> <div class="v-list-item__content" data-no-activator=""> <div class="v-list-item-title">Roadmap</div> <div class="v-list-item-subtitle">Introduction</div> <!----> </div> <!----> </a></div> <div class="v-col-sm-4 v-col-12" xs="6"><a class="v-list-item v-list-item--link v-theme--light v-list-item--border v-list-item--density-default v-list-item--two-line v-list-item--rounded v-list-item--variant-text" href="/en/getting-started/release-notes/" tabindex="0"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span> <div class="v-list-item__prepend"> <div class="v-avatar v-theme--light v-avatar--density-default v-avatar--size-default v-avatar--variant-flat"><i class="v-icon notranslate v-theme--light v-icon--size-default text-teal" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L14.68,14.35C14.18,15.33 13.17,16 12,16M12,3C13.81,3 15.5,3.5 16.97,4.32L14.87,5.53C14,5.19 13,5 12,5A8,8 0 0,0 4,13C4,15.21 4.89,17.21 6.34,18.65H6.35C6.74,19.04 6.74,19.67 6.35,20.06C5.96,20.45 5.32,20.45 4.93,20.07V20.07C3.12,18.26 2,15.76 2,13A10,10 0 0,1 12,3M22,13C22,15.76 20.88,18.26 19.07,20.07V20.07C18.68,20.45 18.05,20.45 17.66,20.06C17.27,19.67 17.27,19.04 17.66,18.65V18.65C19.11,17.2 20,15.21 20,13C20,12 19.81,11 19.46,10.1L20.67,8C21.5,9.5 22,11.18 22,13Z"></path> </svg></i> <!----><span class="v-avatar__underlay"></span></div> </div> <div class="v-list-item__content" data-no-activator=""> <div class="v-list-item-title">Release notes</div> <div class="v-list-item-subtitle">Getting started</div> <!----> </div> <!----> </a></div> </div> <hr class="v-divider v-theme--light my-5" aria-orientation="horizontal" role="separator"> <div id="up-next" class="d-flex mb-5"><a href="/en/introduction/enterprise-support/" class="text-decoration-none text-body-1 d-inline-flex align-center"><i class="v-icon notranslate v-theme--light v-icon--size-default text-primary me-1" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path> </svg></i><span class="text-primary">For Enterprise</span></a> <div class="flex-grow-1"></div><a href="/en/getting-started/frequently-asked-questions/" class="text-decoration-none text-body-1 d-inline-flex align-center"><span class="text-primary">Frequently asked questions</span><i class="v-icon notranslate v-theme--light v-icon--size-default text-primary ms-1" aria-hidden="true"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path> </svg></i></a> </div> <div class="mb-5"> <div class="v-lazy d-flex" style="min-height: 74px;"> <!----> </div> </div> <div><span class="font-weight-bold me-1 text-medium-emphasis">Edit this page on</span><a class="app-link text-decoration-none text-primary font-weight-medium d-inline-flex align-center" href="https://github.com/vuetifyjs/vuetify/tree/master/packages/docs/src/pages/en/getting-started/installation.md" target="_blank" rel="noopener"> <!--v-if-->GitHub<i class="v-icon notranslate v-theme--light text-primary ms-1" aria-hidden="true" style="font-size: 0.875rem; height: 0.875rem; width: 0.875rem;"><svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"> <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path> </svg></i></a></div> </section> </section> <div class="target">Test</div> </div>
Tests:
Node.children
const parent = document.querySelector('.parent'); Array.from(parent.children).some(element => element.classList.contains('target'));
querySelector
const parent = document.querySelector('.parent'); !!parent.querySelector('.parent > .target');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Node.children
querySelector
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
It seems like you're trying to analyze some HTML and JavaScript code, but I'll need more context or information about what specific tasks or questions you'd like me to help with. From the provided code snippet, it appears that: 1. The HTML structure is for a documentation page for Vuetify, a popular Vue.js component library. 2. There's a section for "For Enterprise" and another for "Frequently Asked Questions (FAQs)". 3. A "Test" target is defined in the DOM. The individual test cases seem to be related to benchmarking JavaScript code execution performance on different browsers and devices, specifically comparing the execution times of `Array.from(parent.children).some(element => element.classList.contains('target'))` and `!!parent.querySelector('.parent > .target')`. If you'd like me to help with: * Analyzing the HTML structure or DOM manipulation * Understanding the JavaScript test cases or benchmarking results * Providing insights on performance optimization for Vuetify or similar libraries * Something else entirely, please let me know!
Related benchmarks:
querySelector vs querySelectorAll simple 3
querySelector vs querySelectorAll simple 4
queryselector test large dom tree
queryselector test large dom tree inverted
Comments
Confirm delete:
Do you really want to delete benchmark?