Premium
JAVASCRIPT Snippets.

Custom Global Directives in Vue 3

Extend Vue's functionality with custom global directives. This snippet shows how to create and register a directive for common DOM interactions like auto-focusing elements.

Vue 3 Component Transitions with CSS

Enhance user interfaces with smooth entry/exit transitions for elements or components in Vue 3 using the built-in `<Transition>` component and CSS.

Vue 3 Template Refs for Direct DOM Access

Learn how to access DOM elements or component instances directly in Vue 3 using template refs, essential for integrating third-party libraries.

Implement Secure Password Hashing with Node.js and Bcrypt

Securely hash and verify user passwords in Node.js applications with the bcrypt library. Protect sensitive user credentials against brute-force and other common attacks.

Configure Essential HTTP Security Headers with Node.js Helmet

Configure essential HTTP security headers (HSTS, X-Frame-Options, CSP) in Node.js Express with Helmet middleware. Enhance browser-side security for your web applications.

Creating a Reusable Toggle State with a Vue 3 Composable

Learn to build a custom Vue 3 composable (`useToggle`) for managing boolean states, enhancing code reusability and keeping components clean.

Implementing a Modal Component with Vue 3 Teleport

Learn to create a robust modal or overlay component in Vue 3 using the `Teleport` feature, ensuring proper DOM structure independent of component hierarchy.

Creating Custom Two-Way Bindings with `v-model` on Vue 3 Components

Implement custom `v-model` directives on your Vue 3 components to enable powerful two-way data binding, simplifying state management for reusable UI elements.

Lazy Loading Components with Vue 3 `defineAsyncComponent`

Optimize Vue 3 application performance by using `defineAsyncComponent` to lazy load components, reducing initial bundle size and improving load times.

Toggle a CSS Class for Interactive Elements

Learn how to easily add or remove a CSS class from an HTML element using JavaScript's classList API, perfect for interactive UI states.

Update Text Content of Multiple Elements

Efficiently update the text content of all HTML elements that share a common CSS class using document.querySelectorAll and a simple loop.

Get and Set Form Input Field Values

Learn how to programmatically retrieve and set the value of HTML input, textarea, and select elements, essential for form manipulation.