Security News
PyPI’s New Archival Feature Closes a Major Security Gap
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
By Sarah Gooding - Jan 30, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@holaluz/margarita
Advanced tools
@holaluz/margarita
[](https://img.shields.io/npm/v/@holaluz/margarita.svg) [](https://github.com/holaluz/margarita/workflows/Bu
Margarita
Margarita is the UI Library from Holaluz.
Check out component examples.
WARNING: While Margarita is open source, its purpose is to improve code quality, consistency, and cross-team collaboration at Holaluz. Thus, it’s likely that we will introduce breaking API changes more often than usual.
About Margarita
- Built on top of Vite and Vue.
- Uses Storybook to develop, showcase, and test each component.
- Unit testing based on Vitest and Vue Testing Library.
Docs
You can find the docs here
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensionsfrom VSCode's command palette - Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Windowfrom the command palette.
Installing Margarita in another project
The NPM package is available here.
You can install Margarita as a dependency by running the following command in your Vue project:
$ npm install @holaluz/margarita
And then, use it as a plugin:
import Vue from 'vue'
import Margarita from '@holaluz/margarita'
Vue.use(Margarita)
For performance reasons, it's recommended (but not required) to preconnect to assets.holaluz.com. To do so, add this code in the <head> of your HTML:
<link rel="preconnect" href="https://assets.holaluz.com" />
Installing in Nuxt
First, create a plugin for Margarita:
// plugins/margarita.js
import Vue from 'vue'
import Margarita from '@holaluz/margarita'
import '@holaluz/margarita/dist/margarita.css'
Vue.use(Margarita)
Finally, register it on the Nuxt config file, as any other Nuxt plugin:
// nuxt.config.js
export default {
plugins: ['./plugins/margarita.js']
}
For performance reasons, it's recommended (but not required) to preconnect to assets.holaluz.com. To do so, add this code in head.link of your nuxt.config:
head: {
link: [
{
rel: 'preconnect',
href: 'https://assets.holaluz.com'
}
]
}
Installing Margarita locally
Clone the repo and install node dependencies:
$ npm install
Then you can run several commands such as
# run storybook locally
$ npm start
# run unit tests
$ npm test
# run unit tests with watch mode enabled
$ npm run test:watch
Deployment and versioning
Margarita uses Semantic Release to handle the release pipeline.
Triggering a new release will create the associated Git tag, the GitHub release entry, and publish a new version on npm.
In order to trigger a new version, make sure you add the appropriate prefix and message to the squashed commit. It is based on the Angular Commit Message Conventions. In short:
# Creates a patch release (v1.0.0 -> v1.0.1)
> fix: commit message
# Creates a feature release (v1.0.0 -> v1.1.0)
> feat: commit message
# Creates a breaking release (v1.0.0 -> v2.0.0)
> fix: commit message
>
> BREAKING CHANGE: explain the breaking change # "BREAKING CHANGE:" is what triggers the breaking release
There's no need to overcomplicate things here. Keep it simple: fix, feat, and chore (plus BREAKING CHANGE) should be enough for now.
FAQ
How can I use Margarita as a dependency in a local project?
More often than not we'd want to work on a consumer while tweaking Magarita.
The best way to do so is by installing Margarita as a local dependency. Check out the instructions in Local Installation.
How can I contribute to documentation?
Follow the edition guidelines here
FAQs
[](https://img.shields.io/npm/v/@holaluz/margarita.svg) [](https://github.com/holaluz/margarita/workflows/Bu
The npm package @holaluz/margarita receives a total of 180 weekly downloads. As such, @holaluz/margarita popularity was classified as not popular.
We found that @holaluz/margarita demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 10 May 2024
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.
Related posts
Research
Security News
North Korean APT Lazarus Targets Developers with Malicious npm Package
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
By Kirill Boychenko, Peter van der Zee - Jan 29, 2025
Security News
CISA Brings KEV Data to GitHub
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
By Sarah Gooding - Jan 29, 2025