Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@samk_dev/nuxt-uikit3
Advanced tools
Nuxt compatibility: ^3.0.0
UIkit 3 version 3.16.16
nuxt-uikit3 Nuxt module.
⚠️ the package is still work in progress and will be released soon ⚠️
1.0.0
release todos:Add @samk_dev/nuxt-uikit3
dependency to your project
# Using pnpm
pnpm add -D @samk_dev/nuxt-uikit3
# with typyscript support
pnpm add -D @samk_dev/nuxt-uikit3
# Using yarn
yarn add --dev @samk_dev/nuxt-uikit3
# with typescript
yarn add --dev @samk_dev/nuxt-uikit3
# Using npm
npm install --save-dev @samk_dev/nuxt-uikit3
# with typescript
npm install --save-dev @samk_dev/nuxt-uikit3
Add @samk_dev/nuxt-uikit3
to the modules
section of nuxt.config.ts
export default defineNuxtConfig({
modules: ['@samk_dev/nuxt-uikit3']
});
That's it! You can now use Nuxt Uikit 3 in your Nuxt app ✨
By default Nuxt UIkit 3 Module loads UIkit 3 core css && core theme css, but you can select what css components to import or disable this behaviour && load your own custom css.
export default defineNuxtConfig({
modules: ['@samk_dev/nuxt-uikit3'],
uikit3: {
css: {
/**
* @default true
*/
coreCss: boolean,
/**
* @default true
*/
coreTheme: boolean
},
/**
* @default true
*/
icons: boolean,
/**
* @default true
*/
js: boolean
}
});
You can use any css class from UIkit 3 as you would normally do.
<section class="uk-section uk-section-default">
<div class="uk-container">
<h1 class="uk-heading-medium">Are You Nuxt!</h1>
<button type="button" class="uk-button uk-button-primary">Click me!</button>
</div>
</section>
<span data-uk-icon="heart"></span>
You can use UIkit 3 JS components by adding the data-uk-<component-name>
|| by calling $uikit
inside <script></script>
tag
To work with javascript components from UIkit 3, you have to add data-uk-<component-name>
Please refer to UIkit 3 documentation as they mentioned there
From UIkit 3 Docs
UIkit and reactive JavaScript frameworks. UIkit is listening for DOM manipulations and will automatically initialize, connect and disconnect components as they are inserted or removed from the DOM. That way it can easily be used with JavaScript frameworks like Vue.js and React. You can use UIkit components by adding uk-* or data-uk-* attributes to your HTML elements without writing a single line of JavaScript. This is UIkit's best practice of using its components and should always be considered first.
<!-- ❌ WILL NOT WORK -->
<div uk-sticky="offset: 50;"></div>
<!-- ✅ WILL WORK -->
<div data-uk-sticky="offset: 50;"></div>
Using the data-uk-<component-name>
method:
<template>
<ul data-uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 2</a>
<div class="uk-accordion-content">
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
reprehenderit.
</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 3</a>
<div class="uk-accordion-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
proident.
</p>
</div>
</li>
</ul>
</template>
<script></script>
tag<script setup lang="ts">
// import $uikit from useNuxtApp()
const { $uikit } = useNuxtApp();
// use any component $uikit.<component-name>
function showModal() {
$uikit.modal.confirm('UIkit confirm!').then(
function () {
console.log('Confirmed.');
},
function () {
console.log('Rejected.');
}
);
}
</script>
<template>
<div>
<!-- call showModal method on click -->
<button @click="showModal">show alert</button>
</div>
</template>
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Release new version
npm run release
FAQs
Nuxt Uikit 3 module
The npm package @samk_dev/nuxt-uikit3 receives a total of 0 weekly downloads. As such, @samk_dev/nuxt-uikit3 popularity was classified as not popular.
We found that @samk_dev/nuxt-uikit3 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.