If you do not use Tailwind in the project that consumes the component library, you probably want to disable preflight (style resetting). Otherwise it may break your main applications layout. Also, to avoid clashing class names when you do use Tailwind in your main application, use some prefix for tailwind in the component library (like tw-).
In case you don't want to use the css from package, instead discover the files from node_modules/florida-components and compile them into your project. Example ⬇ module.exports = { content: [ 'node_modules/florida-components/dist/*.js' ], OR module.exports = { content: [ 'node_modules/florida-components/components/**/*.vue' ],
Why in min 17:31 she is importing the style from 'florida-components-test-2/dist' and not from the library that was installed? Also in the github demo code this is wrong.
8:20 you re importing again the component which is already imported by the other index.js file. it would be more clean to simply do: export * from ./Button
How we can import as a component currently based on the video we are importing at the root level you can say in app mount I want to import the component in wherein I need to use (route or components based wherein we need to use not on the root level)
i have a small question: if i wanna use my web component which is created by vue 3 in a third party website (website may uses any version of vue or not at all) and the question: is it possible to face vue version conflict between my web component vue version and the third party website vue version ?
why register them globally? would not make sense to import only whatever is needed? as soon as the library grow, the probability to don't use of all them is quite high
Год назад
Great presentation, however the name of the video should be "Create Custom Vue Component Library with Tailwind"
1. WHY would I do this rather than use Vuetify? I am at this decision point. (I have used Vuetify before) 2. I dislike the Vuetify layout classes, although I am not a CSS master (or competent) I prefer to use raw CSS so I learn the basics of grid and flexbox. Is this a good approach? 3. Another example/preference (am I wrong?)... Rather than use v-divider from Vuetify is it not more simple to use (using base technology makes it more accessible )
1. Building your own component library can give you better control over the design of your application. You also won't be dependent on library issues and limitations. Vuetify isn't that good anyway plus it is very opiniated... 2. It can be, but it requires more attention to details. Tailwind is a good middle-ground honestly. 3. Use what works for you... if works, then why not use it?
imo this talk is about how to wrap your own components (css & behavior) into a npm package for others to consume. you can use any ui library or write your own entirely custom css and behavior for your components & tailwind was just used for demo purposes.
@@hogwrangler3283 thanks, yes, there was a lot of 'NPM' in this which is not important to me. I thought of 'roll my own' but that is too ambitious for our small team. Lowest risk is to use Vuetify with our own layer of styled components; we can style differently from the toy-town look that comes out-of-the-box.
1) on large companies where they have several internal projects you may need to have a good design system with its own component library based on all needs across projects rather than having to install n+vuetify instances and copy pasting components. Both ways work, it depends on what you need; does it going to have a big scale? o just one small project.
