Skip to content

feat: add unplugin-vuetify package #347

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
wants to merge 4 commits into from
Closed

Conversation

userquin
Copy link
Member

@userquin userquin commented Apr 11, 2025

This PR on draft, we need to add readme.md files, add another playground and prepare docs at Vuetify:

  • includes changes in this Vuetify PR: feat(package): add unimport presets and unplugin-vue-components resolvers vuetify#21129
  • changed the vuetify styles plugin options: now it also allows to register SASS/SCSS api
  • package is ESM-only
  • webpack support droped: consumers still using webpack will need to use older packages (unimport presets and unplugin-vue-component resolvers can still be used registering the Vite/Webpack plugin disabling auto-import, I've only tested this using Vite)

This package is a modern refactor for existing codebase, doesn't replace/deprecate existing ones.

As summary (to prepare Vuetify docs later and the readme file here):

  • don't use Vite plugin directly to auto-import Vuetify components (three-shaking), will use instead the unimport presets or the unplugin-vue-components resolvers
  • exports unimport presets to allow (unimport-presets subpackage export):
    • use Vue Lazy Hydration with Nuxt: LazyVBtn for example when visible
    • using custom prefix for Vuetify components (VuetifyXXX instead VXXX), directives (v-vuetify-xxx instead v-xxxx) and composables (useVXXX or custom prefix) to avoid collisions (disabled by default)
    • exports utilities to change Vuetify transformAssetUrls when enabling custom Vuetify components prefix (check details below)
    • with the directives preset VSCode will suggest Vuetify directives: right now only JetBrains IDE suggesting directives via webtypes (I'm talking with Jan-Niklas at JetBrains (WebStorm) to drop support and use Volar instead, now directives names can use vuetify prefix => maybe we can also add the entries with the prefix)
  • exports unplugin-vue-component resolvers to allow (unplugin-vue-component-resolvers subpackage export, we need to change the name, missing s in the component) for:
    • Vuetify components with prefix support similar to previous described at unimport presets
    • Vuetify directives with prefix support similar to previous described at unimport presets: won't work since unplugin-vue-components doesn't augment the vue module properly (iirc there is a PR to fix it)

Here some GH repos using Vuetify (dev) PR:

We need to replace keys in the existing transformAssetUrls entries

image
current transformAssetUrls map, won't work when using Vuetify component prefix

@userquin userquin requested a review from Copilot April 11, 2025 01:12
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 7 out of 10 changed files in this pull request and generated 1 comment.

Files not reviewed (3)
  • package.json: Language not supported
  • packages/unplugin-vuetify/package.json: Language not supported
  • packages/unplugin-vuetify/tsconfig.json: Language not supported
Comments suppressed due to low confidence (1)

packages/unplugin-vuetify/src/utils.ts:46

  • Pushing new kebab-case attributes directly into the 'attrs' array while iterating over it may cause duplicate entries or an infinite loop; consider iterating over a shallow copy of the array or collecting new values before merging.
attrs.push(toKebabCase(attr))

@userquin userquin requested a review from Copilot April 11, 2025 01:19
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 7 out of 10 changed files in this pull request and generated 2 comments.

Files not reviewed (3)
  • package.json: Language not supported
  • packages/unplugin-vuetify/package.json: Language not supported
  • packages/unplugin-vuetify/tsconfig.json: Language not supported

Comment on lines +17 to +19
.replace(/[^a-z]/gi, '-')
.replace(/\B([A-Z])/g, '-$1')
.toLowerCase()
Copy link
Preview

Copilot AI Apr 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The toKebabCase function directly replaces all non-alphabetic characters with '-', which may result in multiple consecutive dashes. Consider adding an additional replacement to collapse repeated dashes (e.g., using .replace(/-+/g, '-')).

Suggested change
.replace(/[^a-z]/gi, '-')
.replace(/\B([A-Z])/g, '-$1')
.toLowerCase()
.replace(/[^a-z]/gi, '-') // Replace non-alphabetic characters with dashes
.replace(/-+/g, '-') // Collapse consecutive dashes into a single dash
.replace(/\B([A-Z])/g, '-$1') // Add dashes before uppercase letters
.toLowerCase() // Convert the string to lowercase

Copilot uses AI. Check for mistakes.

@userquin userquin marked this pull request as draft April 13, 2025 00:26
@userquin
Copy link
Member Author

New @unvuetify/monorepo repository created and initial packages versions published, we'll have some more Vite/Nuxt utilities in this new repository

@userquin userquin closed this Apr 17, 2025
@userquin userquin deleted the feat-add-unimport-package branch April 17, 2025 21:03
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant