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

nuxt-helpers

0.10.0 • Public • Published

Nuxt Helpers

npm XO code style

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

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

Keywords

none

install

npm i nuxt-helpers

Downloadsweekly downloads

56

version

0.10.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
Report a vulnerability