Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »


0.10.0 • Public • Published

Nuxt Helpers

npm XO code style

Collection of useful and SSR compatible vue plugins for using with nuxt.js


  • Fully SSR compatible.
  • Tested and well designed for using with Nuxt.js.
  • Plugins can be used individually so bundle size remains small.
  • Easy nuxt installation

Getting started

1- Install nuxt-helpers package:

yarn add nuxt-helpers
# NPM 
npm install nuxt-helpers

2- Change your nuxt.config.js:

const NuxtHelpers = require('nuxt-helpers');
module.exports = NuxtHelpers([
    // 'manifest',
], {
    // Your nuxt config

3- Add .nuxt-helpers to your .gitignore file

Available modules


This plugin is a wrapper around axios. It tries to resolve and make easier lot's of ajax tasks specially with SSR. So you can use $get('profile') instead of (await Axios.get('http://server/api/profile')).data.

  • Uses optionally custom URL when executing requests in server-side.
  • Handles all HTTP exceptions and prevents server side unhandled promise exceptions.
  • Injects $get,$post,... into vue context instances so requests can be done out-of-the-box.
  • Exposes setToken function so we can easily and globally set authentication tokens.
  • Returns empty object if request fails.
  • Throws nuxt-friendly exceptions if needed.

💡 Usage

  • Add axios to project package.json
  • Add axios helper
import {$get} from '~/nuxt-helpers/axios';
async data() {
    let {profile} = await $get('profile');
    return {profile}

Or In any other function: (This does not needs importing axios plugin)

mounted() {
    let {profile} = await this.$get('profile');
    return {profile}


Customization can be done using shared environment variables.

Environment variable Default Description
API_URL http://localhost:3000 Base url for ajax requests in server-side
API_URL_BROWSER [API_URL] Base url for ajax requests in client-side
API_PREFIX /api Adds this prefix before all relative urls


With bootstrap-vue you can easily use standard bootstrap 4 components with your app. (you need to add bootstrap package in your package.json too)

💡 Usage

  • Add bootstrap-vue to package.json
  • Add bootstrap-vue helper
    <b-alert show>
        Hello Bootstrap!


Easy toasts for your app using mini-toastr.

💡 Usage

  • Add mini-toastr to package.json
  • Add toast helper

Then you can define notification in your routes or components:

export default {
     async login() {
         try {
             await this.$post('auth/login');
             this.$success('Welcome :)');
         } catch(e){
             this.$error('Error while authenticating');

Auth Store

💡 Usage

  • Add cookie & js-cookie to package.json
  • Add auth helper
// store/auth.js
import AuthStore from '~/.nuxt-helpers/auth';
const authStore = new AuthStore({ /*opts*/ });
// Your customizations
export default authStore;


  • default_user : Default fields for state.auth.user. (overrides using Object.assign when logged-in).
  • token_cookie : Token cookie opts. (see js-cookie docs for more info)

Font Awesome

Leverage Font Awesome the iconic font and CSS toolkit.

💡 Usage

  • Add font-awesome to package.json
  • Add font-awesome helper


This helper is not stable yet.

  • Normalizes names to app and vendor and sets assets public path to /assets.
  • Adds cssnano to postcss.
  • (TODO) Modernize SSR bundle with less transforms.

💡 Usage

  • Add cssnano to package.json
  • Add optimize helper


This helper is not stable yet.

This helper only works in non dev mode

  • Registers service worker
  • Scopes cacheName to allow having multi apps in same domain.

💡 Usage

  • Add offline helper


This helper is not stable yet.

Adds Web App Manifest with no pain.

  • Creates static/manifest.json
  • Adds <link rel=manifest> to pages if not exits.
  • Adds <link rel=favicon> to pages if not exits.
  • Adds <meta name=description> to pages if not exits.
  • Adds <meta name=theme-color> to pages if not exits.
  • Adds title to pages if not exits.

💡 Usage

  • Add manifest helper
  • Add static/icon.png for your app icon.
  • Add additional options to nuxt.manifest to override defaults:
    name:'My Awesome App',


This awesome little helpers creates junction symlinks from nodule_modules into static/vendor so you can directly serve node modules inside web. Useful for runtime dependencies.

💡 Usage

  • Add vendor helper
  • Add /static/vendor to .gitignore
  • Define your dependencies in nuxt.config.json inside vendor section:
    vendor: ['ckeditor']

Migration guide

If you are migrating from <= 0.7.0 version:

  • Plugins are now copied to project root to prevent babel problems.
  • Add .nuxt-helpers to .gitignore.
  • See new axios and auth usage description.
  • bootstrap plugin is renamed to bootstrap-vue.
  • notifications plugin is renamed to toast and usage simplified.


Any contribution,bug report or component is highly welcomed :)



MIT License - Fandogh 2017




npm i nuxt-helpers

Downloadsweekly downloads









last publish


  • avatar
  • avatar
  • avatar
Report a vulnerability