Nostalgic Pickled Mango


    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 
    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


    • alexchopin
    • atinux
    • pi0