menteora / vuetify-extra

Vuetify common bundle of components

IMPORTANT!

There's a BUG in v1.0.0-beta.0, use previous version:

npm install  @menteora/[email protected]

vuetify-extra

Vue library with common used components based on Vuetify.

Demo here: https://menteora.github.io/vuetify-extra/

2020/12/18 - v1.0.0-beta.0 - reduced library size from 300kb to 9kb (removed any duplicated vuetify code)

2020/11/03 - NEW! Docker Integration

Project setup

Install Library

• Install Vuetify 2 (see documentation)
• Install Vuetify Extra:

npm install @menteora/vuetify-extra

Use Plugin

• Use Vuetify-Extra plugin after Vuetify
• Example of /src/main.js with Vuetify and Vuetify-Extra plugins:

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import './plugins/vuetify-extra'

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

• Example of standard Vuetify plugin installation in plugins/vuetify.js:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  }
})

• Example Vuetify-Extra plugin installation in plugins/vuetify-extra.js:

import Vue from 'vue'
import VuetifyExtra from '@menteora/vuetify-extra'

Vue.use(VuetifyExtra)

Docker Integration

• Install Docker (refer to official Guide)
• Install "Docker" Extension on VSCode
• Open Folder with VSCode
• Answer "Reopen in Container"

Project setup

See demo in action:

npm run serve

Compiles and minifies Library for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Update workflow

1. Update & commit code

Github pages updates

2. Update demo npm run deploy:demo
3. Test demo

Github updates

4. Update release inside package.json
5. Tag commit git tag v0.3.1
6. Push Tags git push origin --tags

Npm updates

7. Update build npm run build
8. Login on npm npm login
9. Update package on npm npm publish

vuetify-extra's Issues

Error by importing lib

running this commands:

1. npm install
2. npm run build

On my project:

npm install /path/to/vuetify-extra.git

src/plugins/vuetify-extra.js

import Vue from 'vue';
import VuetifyExtra from "@menteora/vuetify-extra";
Vue.use(VuetifyExtra);

src/main.js

import vuetify from "./plugins/vuetify"; import "./plugins/vuetify-extra";

after that:

running my project with
npm run serve

and get this error:

warning in ./src/plugins/vuetify-extra-components.js

"export 'default' (imported as 'VuetifyExtra') was not found in '@menteora/vuetify-extra'

Do you know this error? Or do you know what i'm doing wrong?

Thx!

What license can this be used under?

I could use this project as a first design system library, but only if you license it.

Please decide on one and add it to this repo

Authentication support without vuex

https://medium.com/@zitko/structuring-a-vue-project-authentication-87032e5bfe16

Vuetify component not detected when come from vuetify-extra library

Hello,

I created a new vue project and install vuetify and vuetify-extra.
I imported vuetify and vuetify-extra in the main.js like the documentation.

If I put a vuetify component like v-card or v-btn in a vue, I can see it without error. The v-card is registered.
If I put a vuetify-extra component like CardPage, in a vue, I can see the CardPage component (it is registered) but all the vuetify components inside vuetify-extra component are not detected.

How can I resolve that ? I don't see what is missing ?

Exemple of error only with vuetify-extra :
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

--->

at src/App.vue

vuetify-extra

How to import all the components.

Hi friend,
This is a very good project. Is exactly what i'm looking for.
Can you please tell me how you import the library into an other project ? And how to use the components?

It's possible to create a lib just for 1 components ?

I saw a lot of samples, but without vuetify.

thank you very much!