Nuxt Helpers

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

Features

• 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([
    //'auth',
    //'axios',
    //'bootstrap',
    //'dev',
    //'meta',
    //'toast',
    //'optimize',
    //'font-awesome',
    //'moment',
    //'offline',
    // 'manifest',
    //'vendor',
], {
 
    // Your nuxt config
 
})

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

Available modules

• axios
• bootstrap
• toast
• auth
• font-awesome
• meta
• dev
• optimize
• offline
• manifest
• vendor

Axios

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

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

Bootstrap

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

<template>
    <b-alert show>
        Hello Bootstrap!
    </b-alert>
</template>

Toast

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 {
   methods:{
     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;

Options

• 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

Optimize

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

Offline

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

Manifest

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:

manifest:{
    name:'My Awesome App',
    dir:'rtl'
}

Vendor

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.

Contributions

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

Contributors

• Pooya Parsa
• Isi Robayna

License

MIT License - Fandogh 2017