
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
nuxt-ui-vue
Advanced tools
Add Nuxt-UI-Vue
to your project by running one of the following commands:
# pnpm
pnpm add nuxt-ui-vue
# yarn
yarn add nuxt-ui-vue
# npm
npm install nuxt-ui-vue
And also add @tailwindcss/forms
plugin by running the following command:
# pnpm
pnpm add -D @tailwindcss/forms
# yarn
yarn add --dev @tailwindcss/forms
# npm
npm install -D @tailwindcss/forms
@tailwindcss/forms
plugin and add the Nuxt-UI-Vue theme file, the darkMode class and the tailwindCss colors configuration in your tailwind.config.cjs file as shown below:import tailwindColors from './node_modules/tailwindcss/colors'
const colorSafeList = []
const deprecated = ['lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray']
for (const colorName in tailwindColors) {
if (deprecated.includes(colorName))
continue
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
const pallette = tailwindColors[colorName]
if (typeof pallette === 'object') {
shades.forEach((shade) => {
if (shade in pallette) {
colorSafeList.push(`text-${colorName}-${shade}`),
colorSafeList.push(`accent-${colorName}-${shade}`),
colorSafeList.push(`bg-${colorName}-${shade}`),
colorSafeList.push(`hover:bg-${colorName}-${shade}`),
colorSafeList.push(`focus:bg-${colorName}-${shade}`),
colorSafeList.push(`ring-${colorName}-${shade}`),
colorSafeList.push(`focus:ring-${colorName}-${shade}`),
colorSafeList.push(`border-${colorName}-${shade}`)
}
})
}
}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/nuxt-ui-vue/dist/theme/*.{js,jsx,ts,tsx,vue}'],
darkMode: 'class',
safelist: colorSafeList,
theme: {
extend: {
colors: tailwindColors
},
},
plugins: [require('@tailwindcss/forms')],
}
Since TailwindCss doesn't support dynamic class names, you need to configure the tailwind.config.cjs
file as shown above. You can read more about safelisting tailwindcss classes here
With Nuxt-UI-Vue, you have the flexibility to register components precisely as you wish:
To import all the components provided by Nuxt-UI-Vue
, add NuxtLabsUI
in your main entry file as shown below:
import { createApp } from 'vue'
import './style.css'
import nuxtLabsTheme from 'nuxt-ui-vue/dist/theme/nuxtlabsTheme'
import install from 'nuxt-ui-vue'
import App from './App.vue'
const app = createApp(App)
app.use(install, nuxtLabsTheme)
app.mount('#app')
By doing this, you are importing all the components that are provided by Nuxt-UI-Vue and in your final bundle all the components including the ones you didn't use will be bundled. Use this method of component registration if you are confident that you will use all the components.
Probably you might not want to globally register all the components but instead only import the components that you need. You can achieve this by doing the following:
createUI
option as well as the components you need as shown below:import { createApp } from 'vue'
import './style.css'
import nuxtLabsTheme from 'nuxt-ui-vue/dist/theme/nuxtlabsTheme'
import { UButton, UDropdown, createUI } from 'nuxt-ui-vue'
import App from './App.vue'
const app = createApp(App)
const UI = createUI({
prefix: 'T',
components: [UDropdown, UButton],
})
app.use(UI, nuxtLabsTheme)
app.mount('#app')
<script setup lang="ts">
const items = [
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}],
[{
label: 'Edit',
icon: 'heroicons:pencil-square-20-solid',
shortcuts: ['E'],
click: () => {
// eslint-disable-next-line no-console
console.log('Edit')
}
}, {
label: 'Duplicate',
icon: 'heroicons:document-duplicate-20-solid',
shortcuts: ['D'],
disabled: true
}], [{
label: 'Archive',
icon: 'heroicons:archive-box-20-solid'
}, {
label: 'Move',
icon: 'heroicons:arrow-right-circle-20-solid'
}], [{
label: 'Delete',
icon: 'heroicons:trash-20-solid',
shortcuts: ['⌘', 'D']
}]
]
</script>
<template>
<div class="grid place-items-center w-full min-h-screen">
<div>
<TDropdown :items="items" :popper="{ placement: 'bottom-start' }">
<TButton color="white" label="Options" trailing-icon="heroicons:chevron-down-20-solid" />
</TDropdown>
</div>
</div>
</template>
The prefix
option is only available for individual component imports.
Nuxt-UI-Vue comes with an intelligent resolver that automatically imports only used components.
This is made possible by leveraging a tool known as unplugin-vue-components which lets you auto import components on demand thus omitting import statements and still get the benefits of tree shaking.
To achieve this you need to do the following:
unplugin-vue-components
package by running one of the following commands:
#pnpm
pnpm add -D unplugin-vue-components
#yarn
yarn add -D unplugin-vue-components
#npm
npm i -D unplugin-vue-components
main.ts
or main.js
file and set registerComponents
to false
as shown below:import { createApp } from 'vue'
import './style.css'
import nuxtLabsTheme from 'nuxt-ui-vue/dist/theme/nuxtlabsTheme'
import { createUI } from 'nuxt-ui-vue'
import App from './App.vue'
const app = createApp(App)
const UI = createUI({
registerComponents: false,
})
app.use(UI, nuxtLabsTheme)
app.mount('#app')
vite.config.ts
or vite.config.js
file and add the following:// other imports
import { NuxtUIVueComponentResolver } from 'nuxt-ui-vue'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
// other plugins
Components({
resolvers: [
NuxtUIVueComponentResolver()
]
})
],
})
<script setup lang='ts'>
const items = [
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}], [{
label: 'Edit',
icon: 'heroicons:pencil-square-20-solid',
shortcuts: ['E'],
click: () => {
// eslint-disable-next-line no-console
console.log('Edit')
}
}, {
label: 'Duplicate',
icon: 'heroicons:document-duplicate-20-solid',
shortcuts: ['D'],
disabled: true
}], [{
label: 'Archive',
icon: 'heroicons:archive-box-20-solid'
}, {
label: 'Move',
icon: 'heroicons:arrow-right-circle-20-solid'
}], [{
label: 'Delete',
icon: 'heroicons:trash-20-solid',
shortcuts: ['⌘', 'D']
}]
]
</script>
<template>
<div class="grid place-items-center w-full min-h-screen">
<div>
<UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
<UButton color="white" label="Options" trailing-icon="heroicons:chevron-down-20-solid" />
</UDropdown>
</div>
</div>
</template>
If you're encountering the TypeScript error: Cannot find module 'nuxt-ui-vue/dist/theme/nuxtlabsTheme' or its corresponding type declarations, you can follow these steps to resolve it:
nuxt-ui-vue.d.ts
declaration file in your src
directory and inside it paste the following code:declare module 'nuxt-ui-vue/dist/theme/nuxtlabsTheme'
The error should now be resolved.
This issue is set to be fixed in the next release.
In regards to customization, NuxtLabs UI Vue offers two ways of customizing your components. The first way is through the variants
property and the second way is by creating your own theme file
.
Here is an example of customizing a UButton
component through the variants
property:
<template>
<div>
<UButton
:variants="{
'my-variant': {
rounded: 'rounded-full',
},
}" :variant="['my-variant']" color="red" label="Button"
/>
</div>
</template>
By default, the default roundedness
of the UButton
component is rounded-md
. However, we have customized its appearance by using the variants property to change its roundedness
and then we used the variant prop to pass our variant which is my-variant
( you can name it whatever you want) to the variant
array and now the UButton
component will be rendered with a fully rounded appearance (rounded-full).
You can customize each component this way using the component's preset which can be found here
For any component that uses the variant
prop such as the UButton
, UBadge
, UInput
, UTextarea
, USelect
, etc, use the intent
prop instead as shown below:
<template>
<div>
<UButton intent="soft" color="red" label="Button" />
</div>
</template>
<template>
<div>
<UBadge color="red" intent="solid" label="Badge" />
</div>
</template>
🥳 Well done, you can now go ahead and build your web application with ease.
Contributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository.
Developers interested in contributing should read the Code of Conduct and the Contributing Guide.
MIT License © 2023 Selemondev
FAQs
Nuxt-UI-Vue
We found that nuxt-ui-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.