In this tutorial, we will discuss how to add a CSS Framework to a Vue project. Let's handle both Vue2 and Vue3. For beginners who have decided to use Vue Framework, this will be helpful in adding the above CSS Frameworks to your project.
I believe all the frameworks have their benefits and drawback. Once you understand one and get the concept of how to work with CSS Frameworks then you will be able to switch easily depending on the project you are handling. Working with CSS frameworks is like solving a puzzle, adding each section/component, and ensuring they match.
Tailwind CSS
There are two ways of creating a vue3 project. Using Vue-CLI or Vite.
Here are the steps of creating a Vue3 using Vite and installing Tailwind CSS manually.
Install Vite
npm install -g vite
Create a vue3 application
npm init @vitejs/app vue3-vite-tailwind-app
cd my-project
npm install
Install Tailwind and its peer-dependencies using npm:
npm install -D tailwindcss@latest postcss@latest
autoprefixer@latest
Create configuration files
npx tailwindcss init -p
This will generate two files
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Configure Tailwind to remove unused styles in production. Edit the following file:
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Create an index.css file in ./src folder and add the following:
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Finally, ensure your CSS file is being imported in your ./src/main.js file:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
Save and run your application
npm run dev
Add router and other components you require in your application.
Here are the steps of creating a Vue2 or Vue3 using Vue CLI and installing Tailwind CSS.
You cannot use the above steps of Vite when you create an application using Vue CLI and want to add Tailwind CSS. You will get an error when you try to run your application.
Lets begin by creating our applications:
// let install vue cli
npm install -g @vue/cli
Create a vue2 and vue3 application using Vue CLI
// create a vue3 app
vue create vue3-cli-tailwind-app
// pick a preset or choose to manually select features. This will allow you to add other components like Vuex, router, and others.
// create a vue2 app
vue create vue2-cli-tailwind-app
Once done we will have two applications in our directory. We need to configure both and install tailwindcss.
// Run this command on both vue2 or vue3
vue add tailwind
Choose what Tailwind config you want to generate:
none - Won't create a config file. Useful if you already have a config (make sure to configure PurgeCSS).
minimal (default) - Will create a minimal tailwind.config.js file where you can define your customizations.
full - Will generate a tailwind.config.js file containing the entire default configuration.
That should get you going on with Vue and Tailwind. For more documentation about Tailwind here is a link
Vuetify
This is easy to start with on Vue2 unfortunately you cant add vuetify in a Vue3 project. We only need to create our application and vuetify.
The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the release of Vuetify v3. When creating a new project, please ensure you selected Vue 2 from the Vue CLI prompts, or that you are installing to an existing Vue 2 project.
// Create a vue2 application
vue create vue2-vuetify-app
// Then add vuetify.js
vue add vuetify
That should get you going on with Vue and Vuetify. For more documentation about Vuetify here is a link
Bulma
Let's create a Vue2 and Vue3 application and add Bulma to it.
// Create a vue2 app
vue create vue2-bulma-app
// Create a vue3 app
vue create vue3-bulma-app
// Then add bulma on each application
yarn add bulma
Once we have installed bulma we need to add bulma.css in the main.js file
import { createApp } from 'vue'
import App from './App.vue'
+import "../node_modules/bulma/css/bulma.css";
createApp(App).mount('#app')
That should get you going on with Vue and Bulma. For more documentation about Bulma here is a link
Bootstrap
There is bootstrap specifically for Vue application called Bootstrap Vue. Let's create an application and add Bootstrap Vue.
// Create a vue2 application
vue create vue2-bootstrap-app
// Create a vue2 application
vue create vue3-bootstrap-app
// Then add bootstrap on each application
yarn add vue bootstrap bootstrap-vue
Once we have done that we need to add the CSS on the main.js file
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");
That should get you going on with Vue and Bootstrap Vue. For more documentation about Bootstrap Vue here is a link:
There are so many other CSS frameworks that I have not talked about but you can start from anywhere. What is good with CSS frameworks they remove the burden of writing CSS from scratch. It is so tedious and requires great talent.
The only problem I have with some of them they are limiting. For customization, you will have to work with what they have. This is why you can know a bootstrap application by the look of it or Bulma or Vuetify.
That's the gap Tailwind CSS tries to close by allowing users to customize their applications according to their preference. This creates the diversity of how each tailwind application looks. I have been a Vuetify person but currently transitioning to Tailwinds. I hope this will help a beginner in Vue.
Top comments (2)
These are sensible options for Vue. I would add a kind of inverted approach that might be interesting to you. Check out Vuetensils. It's a "headless UI" (sort of) in that it gives you a lot of the underlying functionality you'd want from say Tabs being keyboard navigable and accessible. But then you get to style it yourself as it's very amenable to customization. I could see coupling this with something like open-props.style/ (open props) a very powerful combination if you're doing a Vue project.
I have a framework of my own (linked in my profile of course) that works in Vue 3 but perhaps try the idea above first ⭐ 🙌 🍰
Looks interesting