@vesp/frontend NPM

Vesp Frontend

This library add default modules, plugins and settings to your Nuxt 3 project to make it easier to start.

Dependencies

Bootstrap Vue Next as a main components library
Nuxt i18n for internalization
Fontawesome Icons famous icons (only solid pack)
Vue Toastification for displaying handy popup messages
Date-Fns modern JavaScript date utility library
Vue Pinia for central data storage
Eslint and Prettier to add rules for your code style

Quick Start

Create a new Nuxt 3 project
Then add the dependency:

yarn add @vesp/frontend

npm i @vesp/frontend --save

Add @vesp/frontend module into your nuxt.config.ts modules

export default defineNuxtConfig({
  css: ['~/assets/scss/index.scss'],
  // ...
  modules: ['@vesp/frontend'],
  vesp: {
    icons: {
      solid: ['faUser', 'faPowerOff', 'faRightToBracket'],
    },
  },
})

Add SCSS and CSS assets into your root style file

// ~/assets/scss/index.scss
@import 'bootstrap-scss/bootstrap';
@import '@vesp/frontend/assets/components';
@import '@vesp/frontend/assets/toast';
@import '@fortawesome/fontawesome-svg-core/styles.css';

Now you can use Vesp components in your Nuxt project

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 useful for submitting a list of social networks for user.