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 = ; moduleexports =
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 projectpackage.json
- Add
axios
helper
; async { let profile = await ; return profile}
Or In any other function: (This does not needs importing axios plugin)
{ let profile = await this; 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
topackage.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:
methods: async { try await this; this; catche this; }
Auth Store
💡 Usage
- Add
cookie
&js-cookie
to package.json - Add
auth
helper
// store/auth.js ; const authStore = /*opts*/ ; // Your customizations ;
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
andvendor
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
insidevendor
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
andauth
usage description. bootstrap
plugin is renamed tobootstrap-vue
.notifications
plugin is renamed totoast
and usage simplified.
Contributions
Any contribution,bug report or component is highly welcomed :)
Contributors
License
MIT License - Fandogh 2017