NuxtJS Snippets for VS Code

A comprehensive collection of NuxtJS snippets for Visual Studio Code.

⚠️ Disclaimer ⚠️

This extension is not an official Nuxt.js product. It is a third-party extension created to enhance the Nuxt.js development experience in VS Code.

Credits

• Nuxt.js - The official Nuxt.js framework
• Visual Studio Code - Microsoft's code editor

Features

• Snippets for Nuxt.js pages, layouts, and components
• API route snippets with error handling
• Middleware and plugin snippets
• Composables and state management snippets
• Server-side rendering snippets
• SEO and meta tag snippets
• Data fetching snippets
• Dynamic route snippets
• Store module snippets

Snippets

TypeScript Snippets

• npage-ts - Create a new Nuxt page with TypeScript
• nlayout-ts - Create a new Nuxt layout with TypeScript
• ncomp-ts - Create a new Nuxt component with TypeScript
• napi-ts - Create a new API route with TypeScript
• nserver-ts - Create a new server route with TypeScript
• nmiddleware-ts - Create a new middleware with TypeScript
• nplugin-ts - Create a new plugin with TypeScript
• ncomposable-ts - Create a new composable with TypeScript
• nstate-ts - Create a new state with TypeScript
• nerror-ts - Create an error page with TypeScript
• nseo-ts - Add SEO meta tags with TypeScript
• nfetch-ts - Use Nuxt's useFetch composable with TypeScript
• nasync-ts - Use Nuxt's useAsyncData composable with TypeScript
• ndynamic-ts - Create a dynamic route with TypeScript
• nstore-ts - Create a store module with TypeScript

JavaScript Snippets

• npage-js - Create a new Nuxt page with JavaScript
• nlayout-js - Create a new Nuxt layout with JavaScript
• ncomp-js - Create a new Nuxt component with JavaScript
• napi-js - Create a new API route with JavaScript
• nserver-js - Create a new server route with JavaScript
• nmiddleware-js - Create a new middleware with JavaScript
• nplugin-js - Create a new plugin with JavaScript
• ncomposable-js - Create a new composable with JavaScript
• nstate-js - Create a new state with JavaScript
• nerror-js - Create an error page with JavaScript
• nseo-js - Add SEO meta tags with JavaScript
• nfetch-js - Use Nuxt's useFetch composable with JavaScript
• nasync-js - Use Nuxt's useAsyncData composable with JavaScript
• ndynamic-js - Create a dynamic route with JavaScript
• nstore-js - Create a store module with JavaScript

Usage

1. Install the extension
2. Open a Vue, TypeScript, or JavaScript file
3. Type the snippet prefix (e.g., npage-ts for TypeScript or npage-js for JavaScript)
4. Press Tab to expand the snippet
5. Fill in the placeholders

Requirements

• Visual Studio Code 1.60.0 or higher
• Nuxt.js project

Extension Settings

This extension contributes the following settings:

• nuxtjs-snippets.enable: Enable/disable the extension

Known Issues

None at the moment.

Release Notes

See CHANGELOG.md for release notes.

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Release Notes

See CHANGELOG.md for release notes.

Support

If you find any issues or have suggestions, please contact the extension author.