Premium
JAVASCRIPT Snippets.

Vue 3 Custom Directive for Click Outside

Implement a reusable Vue 3 custom directive to detect clicks occurring outside of a specific element, ideal for auto-closing dropdowns, modals, or menus.

Access Child Methods in Vue 3 with `ref` and `defineExpose`

Learn how to call methods of a child component directly from its parent in Vue 3 by using template refs and explicitly exposing methods with `defineExpose`.

Add Basic API Rate Limiting to Express.js

Implement a basic rate limiting middleware for Express.js applications to protect against brute-force attacks and API abuse by restricting the number of requests per client.

Configure Secure CORS for Express.js APIs

Learn to securely configure Cross-Origin Resource Sharing (CORS) in your Express.js API, controlling which domains can access your resources and preventing unauthorized cross-origin requests.

Implement a Custom Autofocus Directive in Vue 3

Create a reusable Vue 3 custom directive (v-autofocus) to automatically focus on an input or element when its component is mounted, enhancing user experience for forms.

Manage Shared State with Vue 3 Provide/Inject

Learn to efficiently share and manage state across deeply nested components in Vue 3 using the `provide` and `inject` API, effectively avoiding prop drilling.

Optimize List Rendering with Vue 3's `v-memo` Directive

Boost performance of large, complex lists in Vue 3 by using the `v-memo` directive to prevent unnecessary re-renders of static or unchanging content blocks within `v-for` loops.

Implement Programmatic Navigation with Vue Router 4

Guide users through your Vue 3 application programmatically using `router.push()` for redirection and `beforeEach` navigation guards for authentication or data pre-fetching.

Create a Reusable Vue 3 Composable for Window Size

Develop a custom Vue 3 composable (`useWindowSize`) to efficiently track and react to real-time changes in the browser window's dimensions across your application, aiding responsive design.

Add Essential HTTP Security Headers to Express.js

Enhance your Express.js application's security by adding critical HTTP headers like HSTS, X-Frame-Options, and X-Content-Type-Options to mitigate common web vulnerabilities.

Mitigate CSRF with SameSite Cookies in Express.js

Protect your Express.js application from Cross-Site Request Forgery (CSRF) attacks by setting the `SameSite` attribute on your session and authentication cookies.

Simple Global Store Composable for Vue 3

Create a reactive global state management system in Vue 3 using the Composition API, offering a lightweight alternative to Vuex or Pinia for smaller applications.