Create a Custom Component Library with Vue & Tailwind CSS
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 https://www.vuemastery.com/courses
0:00 Custom Component Libraries with Vue and Tailwind
1:23 Component Libraries
2:10 Step 1: Generate a Vue application
3:11 Step 2: Install Tailwind CSS
7:06 Step 3: Build your First Component
11:45 Step 4: Register Components
12:27 Step 5: Configure Package.json
15:16 Publish to NPM
16:33 In action
20:06 Other things to consider
21:34 Q&A
Комментарии:
What if I want to also export icons from my library?!? How can I do that?
Ответить
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
Ответить
What are the differences in the configuration if one is using the Vite, without vue-cli?
Ответить
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'
],
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)
Ответить
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-).
Ответить
why is using the old create vue app? can we use the new way of scaffolding vue projects?
Ответить
🤣😂🤣😂 the code always want to show off when you are showing it to people.
Ответить
These presentations are getting more and more useless. Please, now teach me how do you declare variables.
Ответить
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 <hr/> (using base technology makes it more accessible )
Where is TS support? :(
Ответить
