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

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

License

MIT License - Fandogh 2017

Current Tags

0.10.0 ... latest (4 years ago)

Nuxt Helpers

Features

Getting started

Available modules

Axios

???? Usage

Bootstrap

???? Usage

Toast

???? Usage

Auth Store

???? Usage

Font Awesome

???? Usage

Optimize

???? Usage

Offline

???? Usage

Manifest

???? Usage

Vendor

???? Usage

Migration guide

Contributions

License

Current Tags

27 Versions