Vesp Frontend
This library add default modules, plugins and settings to your Nuxt.js project to make it easier to start.
- Bootstrap Vue as a main components library
- Nuxt i18n for internalization
- Nuxt Fontawesome for using famous icons (only solid pack)
- Nuxt Axios for making requests to remote APIs
- Nuxt Style Resources for using common sass variables in components
- Nuxt Toast for displaying handy popup messages
- Nuxt Date-Fns
- Eslint and Prettier to add rules for your code style
- Node SASS and SASS loader to support sass/scss styles in assets and components
Quick Start
-
Create a new Nuxt.js project
-
Then add the dependency:
yarn add @vesp/frontend
or
npm i @vesp/frontend
- Change your nuxt.config.js to this
import {Config} from '@vesp/frontend'
// Enable Vesp module
Config.modules.push('@vesp/frontend')
/*
// You can change the default config here
// Add a star icon to Fontawesome, for example
Config.fontawesome.icons.solid.push('faStar')
*/
export default Config
- Now you can use Vesp components in your Nuxt project
Config
When you connect the Vesp module, you can specify its options:
Config.modules.push(['@vesp/frontend', {
components: true, // load of Vesp Vue components
scss: true, // load SCSS files for components
i18n: true, // enable Russian rules for i18n pluralization
axios: true, // add special interceptors to Axios to display requests errors
utils: true, // usefull utilities, for example $hasScope to check users permissions
filters: true, // usefull Vue filters to format output
}])
By default all options are true.
Components
@TODO add more detailed description of components
Vesp-Table
This component extends BootstrapVue's b-table
component and add a lot of features, including row actions and filters.
Vesp-Modal
This component extends BootstrapVue's b-modal
component and add ability to submit forms.
Vesp-Change-Locale
Simple component to change the current locale of project.
You can use #default
slot to change how it looks.
Vesp-Input-Remote-Links
Component for adding a list of links in JSON object, where key will be the name of service and value is a link to it. Very usefull for submitting a list of social networks for user.
Vesp-Input-Combo-Box
b-form-input
with popup list containing variants from remote API.
Vesp-Input-Date-Picker
vue2-datepicker
with some settings
Examples
See layouts
and pages
directories for examples of using components.
Just remember, that you don't need to import components, because they are already imported by @vesp/frontend
module.
You can use <vesp-table />
and other components freely.