A Better Way to Structure Large Nuxt Projects

Oraz Chollaev — Fri, 13 Mar 2026 20:49:53 +0000

I built a small Nuxt 4 template that demonstrates a feature-based project structure for scalable applications.

Repository
https://github.com/orazchollaev/nuxt4-feature-based-template

Why?

Many Nuxt projects start with the traditional structure:

components/
composables/
stores/
pages/
utils/

This works well at first, but as the project grows:

related files become scattered
features are harder to maintain
navigating the codebase becomes slower

A feature-based architecture organizes code by feature instead of technical type.

Example Structure

app/
└── features/
    └── todo/
        ├── components/
        ├── composables/
        ├── stores/
        ├── pages/
        ├── types/
        └── locales/

Everything related to a feature lives in one place.

What This Template Includes

feature-based folder architecture
component auto-import with feature prefixes
feature-scoped composables and stores
modular routing
modular i18n support

Full implementation and details are available in the repository.

Quick Start

pnpm install
pnpm dev

If you're building a large Nuxt application, this structure can make your codebase easier to scale and maintain.

I Built a Zero-Config Keyboard Shortcut Manager for Vue 3

Oraz Chollaev — Sun, 08 Mar 2026 21:28:19 +0000

Keyboard shortcuts are a small feature, but they can make a big difference in web applications.

Think about apps like dashboards, editors, or productivity tools. Users expect shortcuts like:

ctrl + k → open search
ctrl + s → save
ctrl + z → undo

However, managing keyboard shortcuts in Vue apps can quickly become messy.

Most projects end up using global keydown listeners scattered across different components. This leads to problems like duplicated logic, missing cleanup when components unmount, and no clear overview of which shortcuts exist in the app.

To solve this, I created a small library called vue-shortcut-manager.

It is a simple keyboard shortcut manager for Vue 3 with zero configuration.

There is no plugin setup and no main.ts configuration. You just import and use it.

Installation

pnpm add vue-shortcut-manager

npm install vue-shortcut-manager

Basic usage

<script setup lang="ts">
import { useShortcut } from "vue-shortcut-manager"

useShortcut("ctrl+k", () => openSearch(), {
  description: "Open search"
})
</script>

The shortcut is automatically registered when the component mounts and cleaned up when it unmounts.

Multiple shortcuts

You can also register multiple shortcuts at once.

useShortcuts([
  { key: "ctrl+s", handler: save, description: "Save" },
  { key: "ctrl+z", handler: undo, description: "Undo" },
  { key: "ctrl+shift+z", handler: redo, description: "Redo" }
])

Scoped shortcuts

Sometimes shortcuts should only work in specific parts of the application.

For example, editor shortcuts should not run outside the editor.

useShortcutScope("editor")

useShortcut("ctrl+b", toggleBold, {
  scope: "editor",
  description: "Bold"
})

Sequence shortcuts

You can also create sequence shortcuts similar to GitHub navigation.

Example:

g h → go home
g i → go inbox

useShortcut("g h", () => router.push("/"))
useShortcut("g i", () => router.push("/inbox"))

Built-in shortcut cheatsheet

The library also includes a simple cheatsheet modal.

Just add:

<ShortcutCheatsheet />

Press shift + ? and it will display all registered shortcuts in your app.

GitHub and NPM

GitHub
https://github.com/orazchollaev/vue-shortcut-manager

NPM
https://www.npmjs.com/package/vue-shortcut-manager

Feedback

This is an early project and feedback is welcome. If you have ideas or suggestions, feel free to open an issue.

Forem: Oraz Chollaev