milnode v0.6.15
MilNode package project
MilNode is a vue.js plugin based on vue-router, vuex, vuetify. MilNode provides a ready-to-use template for your vue.js applications, with the following features:
- Localization/Globalization
- Light/Dark theme selection
- User authentication
- API data retrievement
- Privacy and Cookies management (RGPD)
- HTML meta management (pages title) for SEO
- Lots of ready-to-use vue-js components, such as complete dialogs, table buttons, items lists...
MilNode works well with an ASP.NET Core API application, using MilNet packages. See MilNet documentation to know how to use MilNet template, with the following main features:
- APIs for About, Contact, Feedback, Help pages
- Error handling
- Open API documentation
- User authentication
Contribute
If you want to propose a feature or to report a bug, please create a new issue. If you want to propose code source changes, please follow the steps below.
Installation process From your local computer, clone the repository.
npm install
to install all dependenciesnpm build-bundle
to build MilNode as a bundle
GitFlow Please follow the GitHub Flow:
- Create a branch from
master
- Commit your code changes
- Create a Pull Request to merge into the master
branch
- Create a branch from
Conditions to complete Pull Request To ensure minimal quality, branch policies have been set up for pull requests to the master branch:
- A new build must be validated before each pull request
- A project administrator must validate the code changes
Installation and Usage
- Import MilNode with
npm install milnode
- Use MilNode library by using following snippet into your
main.js
:import MilNode from 'milnode' Vue.use(MilNode)
Import MilNode styles (provided as
.stylus
file) into yourmain.js
file:import 'roboto-fontface/css/roboto/roboto-fontface.css' import 'material-design-icons-iconfont/dist/material-design-icons.css' import 'milnode/src/stylus/app.styl'
Or, from your main
.stylus
project file:@import '~roboto-fontface/css/roboto/roboto-fontface.css' @import '~material-design-icons-iconfont/dist/material-design-icons.css' @import '~milnode/src/stylus/app.styl'
Note that you can use other icon fonts, by defining
layout.iconfont
setting, and importing the correct style. See here for more details.Add proper compilation settings into your
vue.config.js
file:const webpack = require('webpack') module.exports = { transpileDependencies: [ 'milnode', 'vuex-persist' ], productionSourceMap: false, configureWebpack: { plugins: [ new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|fr/) ] }, chainWebpack: config => { config.plugins.delete('prefetch') } }
Documentation
Settings
The simplest way to install MilNode is by using int with the following snippet:
import MilNode from 'milnode'
Vue.use(MilNode)
You can provide more information to MilNode, to adapt the default template to your needs:
import MilNode from 'milnode'
Vue.use(MilNode, {
// Your settings here
})
The following settings are available.
Key | Default value | Description |
---|---|---|
application | {} | Main application information |
application.name | 'APP_NAME' | Application name displayed on top toolbar and in Privacy page |
application.contact | 'CONTACT_NAME' | Contact name used on Contact and Privacy pages |
layout | {} | Layout information |
layout.navigationDrawerItems | [] | Items to add in navigation drawer; these will be added before template items (Help, Your feedback, Privacy, About) |
layout.accountItems | [] | Items to add in account toolbar; these will be added before template items (Logout) |
layout.applicationItems | [] | Items to add in applications toolbar; let this array empty or undefined to disable the applications toolbar |
layout.languagesItems | [] | Languages to propose on settings toolbar |
layout.enableTheme | false | Enable dark theme support on settings toolbar |
layout.iconfont | md | Icon font to use BETA |
services | {} | Services (API) information |
services.disabled | false | Disable services support, and disabled Help, Feedback and About pages |
services.baseUrl | 'http://mysite.com/api' | Base URL for your API |
router | {} | Router information |
router.mode | 'history' | Vue-router mode: default is history , a common setting is to set up router mode to hash |
router.routes | [] | Routes to add; these will be added to template routes |
router.rootComponent | () => import('@/pages/Root.vue') | Address to import your custom Root page as a vue.js component |
router.homeComponent | () => import('@/pages/home/Home.vue') | Address to import your custom home page as a vue.js component |
store | {} | Store information |
store.modules | [] | Vuex modules to add; these will be added to template modules |
i18n | {} | Internationalization information |
i18n.messages | {} | Vue-i18n messages to add; these will be added to template messages |
authentication | {} | Users authentication information |
authentication.disabled | false | Disable user authentication |
authentication.userManagerSettings | {} | Oidc-client user manager settings |
With all the settings defined, here is a complete example:
import MilNode from 'milnode'
Vue.use(MilNode, {
application: {
name: 'APP_NAME',
contact: 'CONTACT_NAME'
},
layout: {
navigationDrawerItems: [],
accountItems: [],
applicationItems: [],
languagesItems: [],
enableTheme: false,
iconfont: 'md'
},
services: {
disabled: false,
baseUrl: 'http://mysite.com/api'
},
router: {
mode: 'history',
routes: [],
rootComponent: () => import('@/pages/Root.vue'),
homeComponent: () => import('@/pages/home/Home.vue')
},
store: {
modules: []
},
i18n: {
messages: {}
},
authentication: {
disabled: false,
userManagerSettings: {}
}
})
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago