@fashiondata/maestro v1.16.14
Maestro
Installation
Add to project
$ yarn add element-ui maestro
or
$ npm i element-ui maestro
Use in your Vue application
Considering that your already have:
vuex
vue-router
firebase
(Explain analytics + performance associated in config part)
// src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { initializeApp } from "maestro";
import * as firebase from "firebase";
import "./config/firebase"; // Firebase initialization
Vue.config.productionTip = false;
initializeApp(Vue, App, { store, router, firebase });
You now have a running application 🎉
Configuration
You can use config
to modify maestro behavior inside of your project :
initializeApp(Vue, App, { store, router, firebase, config: { ... } });
List of options:
analytics
: Add firebase analytics (must haveappId
) provided wile you configured firebase inside of your projectperformance
: Add firebase performance (must havemeasurementId
) provided wile you configured firebase inside of your project => Expose$perf
into Vue instance.
Typescript
To extends the Vue prototypes types, you must include a *.d.ts file in your
project root. For example, you could add a maestro-env.d.ts
with the following content:
/// <reference types="maestro" />
/// <reference types="maestro/shims-vue" />
It uses the Typescript Triple Slash Directives to
references maestro's types in your own Vue instance. Then, you should add an entry in your tsconfig.json
{
...
"include": [
"maestro-env.d.ts"
]
}
You now have access to the types that maestro adds in your Vue instance (e.g this.$firebase
) when
creating component in your application
Theme
Default
Import sass file into your main.js
that imports maestro default theme.
@import '~maestro/src/styles/theme/index';
If you want to override variables (for colors erc...) you just have to add them before importing ~maestro/src/styles/theme/index
Please refer to this file to see available variables.
Custom
If you want to start from scratch, you don't have to import any scss file, so you can start building your own custom theme.
Use scss variables into .vue files
If you want to use scss variables in your .vue components, you can extend the vue.config.js
like this
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/theme/vars.scss"; // File that import your custom variables
// OR
@import "~maestro/src/styles/theme/common/vars"; // For none overridden default theme
`
}
}
}
};
8 days ago
21 days ago
26 days ago
26 days ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
5 months ago
6 months ago
6 months ago
10 months ago
5 months ago
5 months ago
5 months ago
6 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago