nuxt-purgecss

Drop superfluous CSS! A neat PurgeCSS wrapper for Nuxt.js (by Developmint)

Nuxt-purgecss Alternatives

Similar projects and alternatives to nuxt-purgecss based on common topics and language

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a better nuxt-purgecss alternative or higher similarity.

nuxt-purgecss reviews and mentions

Posts with mentions or reviews of nuxt-purgecss. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-12-29.
  • How to start optimized Vuetify 3 Nuxt 3 project
    2 projects | dev.to | 29 Dec 2022
    What about themes. When we analyze the created html bundle .output/public/index.html we imidiately see an large section in the html head. Read more about it in official documentation here. It contains whole configuration for v-theme--light, v-theme--dark and lots of generated selectors for each color configuration.

    We did not specify any theme to use but Vuetify internally by default applies theme light to everything within the v-app block. Therfore in generated index.html we can see that many elements use classes v-theme--light. But what if we disable themes in Vuetify totally? Will this section with unnecessary unused theme selectors and variables disapear? Lets try..

    We can try with disabling themes as described here in plugins/vuetify.ts:

    export default createVuetify({
      /* ADD */ theme: false, 
      ...
    })
    
    Enter fullscreen mode Exit fullscreen mode

    After re-generating no theme selectors are applied anymore on any html elements, good, disabling of themes worked as expected. But... the </code> section with unused selectors still remains as before in the head of generated index.html file. 👎</p> <p>Consider this a bug? Why does Vuetify add thise code if it is marked that themes are not desired and not used? Is there some way to remove all this redundand code, or only enable <code>light</code> theme and not <code>dark</code> to reduce amout of added code?</p> <p><em>To be updated when I know, but feel free to comment this in comments!</em></p> <h5> <a name="clean-out-unused-css" href="#clean-out-unused-css"> </a> <a href="#purgecss">Clean out unused CSS</a> </h5> <p>After some digging <strong>nuxt-purgecss</strong> seems like a good option to try to remove unnecessary css from final bundle. It must be mentioned that removal of unused css is generally a major issue in many projects and a topic of discussions. There does not exist any perfect tool for it at the writing moment. In order not to remove too much of the code we must have knowledge of how purgecss works and of the code whe want to minify. We need to configure purgecss in a way so thatt when/if new persons on the team do introduce new code, to ensure that it will not by accident remove related css in the final build. By my opinion it is better to optimaze to little and left a bit of unused code than risk that some part of page, some unusal state we seldom visit, or test, will stop working.</p> <p><em>I reccomend to read this good article mentioning issues with automatic css removal - <a href="https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/">How Do You Remove Unused CSS From a Site?</a>.</em></p> <p>Purge css is a dummy tool, it scans html, vue and js files on locations that we provide to it, and create a list of selectors of all classes is finds. In some file x.html with <code><p class="bg-red"></code> it finds bg-red. In a vue file with <code><v-btn class="elevation-6"></code> it finds elevation-6 and so on. Then it analyzes the code that css files that are created by our project and removes all selectors from it not in this list. So customization of such a till to look for code in all locations the code is used from is essential for this to work. This is when it gets tricky with third party plugin like vuetify.</p> <p>Vuetify 3 generates its components with styles based on props and with help of render function. It is very tricky to find files in node_modules/vuetify where whe components are created and defining all classes and used selectors. </p> <p>I like using Vuetify with Nuxt and it is for the <strong>following little trick</strong>.</p> <p><strong>First build a static site</strong> as nuxt provides this possibility in very easy way. Then ALL html will be generated WITH all classes selectors in dist folder.</p> <p><strong>Afterward provide the dist folder</strong> to purgecss as a content location and do your build. Then purge have all class names and selector it need to keep from removing in the final css bundle.</p> <p>Here is how I did:</p> <p>Install the <strong>nuxt-purgecss</strong> plugin<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm i <span class="nt">-D</span> nuxt-purgecss </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Add purgecss module and import our custom purgecss settings in <code>nuxt.config.ts</code>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="cm">/* ADD */</span> <span class="k">import</span> <span class="nx">purgeConfig</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./modules/purgecss/config</span><span class="dl">'</span><span class="p">;</span> <span class="p">...</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> <span class="na">modules</span><span class="p">:</span> <span class="p">[</span> <span class="p">...</span> <span class="cm">/* ADD */</span> <span class="p">[</span><span class="dl">'</span><span class="s1">nuxt-purgecss</span><span class="dl">'</span><span class="p">,</span> <span class="nx">purgeConfig</span><span class="p">],</span> <span class="p">],</span> <span class="p">...</span> <span class="p">});</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Add file and following settings in <code>modules/pergecss/config.js</code>:<br> <em>Note! There is lot of disabled code and I left it there for educational purpose. It can be used for option when we can not use static-generated-html method/trick. Then uncomment the comments, analyze the code and get your head dirty trying to expend the lists as your project grows.</em><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Default safelist: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts</span> <span class="kd">const</span> <span class="nx">defaultSafelist</span> <span class="o">=</span> <span class="p">[</span> <span class="c1">// 'body',</span> <span class="c1">// 'html',</span> <span class="c1">// 'nuxt-progress',</span> <span class="c1">// '__nuxt',</span> <span class="c1">// /-(leave|enter|appear)(|-(to|from|active))$/, // Normal transitions</span> <span class="c1">// /^nuxt-link(|-exact)-active$/, // Nuxt link classes</span> <span class="c1">// /^(?!cursor-move).+-move$/, // Move transitions</span> <span class="c1">// /.*data-v-.*/, // Keep scoped styles</span> <span class="c1">// // New Vue3 selectors</span> <span class="c1">// /:slotted/,</span> <span class="c1">// /:deep/,</span> <span class="c1">// /:global/,</span> <span class="p">];</span> <span class="c1">// Default content: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts</span> <span class="kd">const</span> <span class="nx">defaultContent</span> <span class="o">=</span> <span class="p">[</span> <span class="c1">// 'components/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'layouts/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'pages/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'composables/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'App.{vue,jsx?,tsx?}',</span> <span class="c1">// 'app.{vue,jsx?,tsx?}',</span> <span class="c1">// 'plugins/**/*.{js,ts}',</span> <span class="c1">// 'nuxt.config.{js,ts}',</span> <span class="p">];</span> <span class="cm">/* Vuetify: Additional locations to scan */</span> <span class="kd">const</span> <span class="nx">additionalLocations</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">modules/purgecss/static-generated-html/**/*.html</span><span class="dl">'</span><span class="p">];</span> <span class="cm">/* Vuetify: Selectors (runtime generated) better never not to remove */</span> <span class="kd">const</span> <span class="nx">vuetifySafelist</span> <span class="o">=</span> <span class="p">[</span> <span class="c1">// /v-application/, // generated by vApp</span> <span class="c1">// /v-layout/, // generated by vApp</span> <span class="c1">// /v-toolbar/, // generated by vAppBar</span> <span class="c1">// /v-locale/, // generated runtime by i.e vBtn if locale enabled</span> <span class="c1">// /v-icon/, // generated by vBtn</span> <span class="c1">// /flex-grow-1/, // generated by v-spacer</span> <span class="c1">// /v-responsive/, // generated eager</span> <span class="p">];</span> <span class="cm">/* Vuetify: Components and directives used in this project */</span> <span class="kd">const</span> <span class="nx">usedComponents</span> <span class="o">=</span> <span class="p">[</span> <span class="sr">/v-ripple/</span><span class="p">,</span> <span class="c1">// when enabled, generated at runtime by vBtn</span> <span class="c1">// /v-app/,</span> <span class="c1">// /v-app-bar/,</span> <span class="c1">// /v-app-bar-nav-icon/,</span> <span class="c1">// /v-navigation-drawer/,</span> <span class="c1">// /v-toolbar-title/,</span> <span class="c1">// /v-container/,</span> <span class="c1">// /v-sheet/,</span> <span class="c1">// /v-main/,</span> <span class="c1">// /v-card/,</span> <span class="c1">// /v-btn/,</span> <span class="c1">// /v-col/,</span> <span class="c1">// /v-row/,</span> <span class="p">];</span> <span class="k">export</span> <span class="k">default</span> <span class="p">{</span> <span class="na">content</span><span class="p">:</span> <span class="p">[...</span><span class="nx">defaultContent</span><span class="p">,</span> <span class="p">...</span><span class="nx">additionalLocations</span><span class="p">],</span> <span class="na">safelist</span><span class="p">:</span> <span class="p">{</span> <span class="na">greedy</span><span class="p">:</span> <span class="p">[...</span><span class="nx">vuetifySafelist</span><span class="p">,</span> <span class="p">...</span><span class="nx">usedComponents</span><span class="p">],</span> <span class="na">standard</span><span class="p">:</span> <span class="p">[...</span><span class="nx">defaultSafelist</span><span class="p">],</span> <span class="p">},</span> <span class="p">};</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>All this can be exchanged with onliner in <code>nuxt.config.ts</code> but I wanted to show how uch configuration is needed for this small about of code for purgecss to let the code it should not remove be. That is when we do not use our little trick with build twice with generated content as input.</p> <p>After all those modifications run now <code>npm run generate</code> followed by <code>npm run preview</code> and it will generate static files in <code>.output/public/</code> folder. </p> <p>🩻<strong>Analazing generated file:</strong><br> <code>.output/public/index.html</code> 14kB (3kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.js</code> 184kB (67kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.css</code> 14kB (3.4kB gzipped)</p> <p>The css is much much smaller than from beggining.😀👍 <br> We started with 370kB and ended up with 14kB (unzipped). It an awsome reduction.</p> <h3> <a name="conclusion" href="#conclusion"> </a> <a href="#conclusion"><strong>CONCLUSION</strong></a> </h3> <p>We created a nice and educational starter template project using Vuetify 3 on top of Nuxt 3. We did did som small optimization to keep the bundle small in production.</p> <p>BEFORE OPTIMIZATION<br> <code>.output/public/index.html</code> 14kB (3kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.js</code> 408kB (125kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.css</code> 371kB (51kB gzipped)</p> <p>AFTER OPTIMIZATION<br> <code>.output/public/index.html</code> 14kB (3kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.js</code> 184kB (67kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.css</code> 14kB (3.4kB gzipped)</p> <p>We reduced in total from 795kB to 212kB (zipped from 179kB to <strong>73kB</strong>)<br> Reduction: 75% unzipped and 60% unzipped.</p> <p>I know there index.html contains lots of unused themes. At writing moment I have no solution for that but will update here asap I know.</p> <p>Do you have any comment what more can be done to minimize bundle for this starter even more?</p> <p>Hope you did learn something usefull through this article.</p> <p>✌️</p>

Stats

Basic nuxt-purgecss repo stats
2
465
3.6
10 days ago

Developmint/nuxt-purgecss is an open source project licensed under MIT License which is an OSI approved license.

The primary programming language of nuxt-purgecss is TypeScript.

The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com