Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cruip/cruip-tutorials-vue

A repository of Cruip's guides & tutorials made with Vue and Tailwind CSS
https://github.com/cruip/cruip-tutorials-vue

tailwind tailwindcss tutorial tutorials typescript vue vuejs

Last synced: about 1 month ago
JSON representation

A repository of Cruip's guides & tutorials made with Vue and Tailwind CSS

Awesome Lists containing this project

README 

        
# Cruip Tutorials made with Vue and Tailwind CSS



Welcome to the repository of Cruip's guides & tutorials for **Vue**. Here you will find the code for all the components we have developed and will develop, made in **TypeScript**, and ready to be integrated into your projects.



If you're new to our articles, we recommend taking a look here: [Tailwind CSS Tutorials](https://cruip.com/tutorials/). If you're new to Cruip's ecosystem, learn more about our [Tailwind CSS templates](https://cruip.com/).



## Tutorial list



- [How to Build a Modal Video Component with Tailwind CSS and Vue](https://cruip.com/how-to-build-a-modal-video-component-with-tailwind-css-and-vue/)

- [How to Create a Pricing Table with a Monthly/Yearly Toggle in Tailwind CSS and Vue](https://cruip.com/how-to-create-a-pricing-table-with-a-monthly-yearly-toggle-in-tailwind-css-and-vue/)

- [How to Create a Beautiful Particle Animation with HTML Canvas](https://cruip.com/how-to-create-a-beautiful-particle-animation-with-html-canvas/)

- [How to Create a Spotlight Card Hover Effect with Tailwind CSS](https://cruip.com/how-to-create-a-spotlight-card-hover-effect-with-tailwind-css/)

- [How to Build a Fancy Testimonial Slider with Tailwind CSS and Vue](https://cruip.com/how-to-build-a-fancy-testimonial-slider-with-tailwind-css-and-vue/)

- [Using Tailwind CSS and Vue to Create Animated and Accessible Tabs](https://cruip.com/using-tailwind-css-and-vue-to-create-animated-and-accessible-tabs/)

- [How to Create a Feature Comparison Table with Tailwind CSS](https://cruip.com/how-to-create-a-feature-comparison-table-with-tailwind-css/)

- [Building a Simple Animated Accordion Component with Tailwind CSS](https://cruip.com/building-a-simple-animated-accordion-component-with-tailwind-css/)

- [Building a Simple Animated Accordion Component with Tailwind CSS](https://cruip.com/building-a-simple-animated-accordion-component-with-tailwind-css/)

- [Creating a Sliding Text Animation with Tailwind CSS](https://cruip.com/creating-a-sliding-text-animation-with-tailwind-css/)

- [Create an Infinite Horizontal Scroll Animation with Tailwind CSS](https://cruip.com/create-an-infinite-horizontal-scroll-animation-with-tailwind-css/)

- [How to Create a Sticky On Scroll Effect with JavaScript](https://cruip.com/how-to-create-a-sticky-on-scroll-effect-with-javascript/)

- [Create a Carousel with Progress Indicators using Tailwind and Vue](https://cruip.com/create-a-carousel-with-progress-indicators-using-tailwind-and-vue/)



## Vue 3 + TypeScript + Vite



This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.



## Recommended IDE Setup



- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).



## Type Support For `.vue` Imports in TS



TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.



If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:



1. Disable the built-in TypeScript Extension

   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette

   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`

2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.



## Terms of use



We want you to get the most out of these resources, so here's what you need to know:



1. **Usage Freedom**: You are free to use these tutorials and demos for any purpose. Whether it's for personal projects, educational endeavors, or even commercial purposes, go ahead and make the most of them!



2. **Respect Our Work**: While you're free to use the tutorials and demos as-is, you are not allowed to redistribute them or create derivative works with the aim of making money. Let's keep it fair and respect each other's efforts.



3. **Attribute and Share the Love**: We kindly ask that you provide attribution when you use our work. It's easy, just retain any copyright notices or credits you find in the code. It helps spread the word about our project and allows others to discover these valuable resources too.



4. **Be Creative**: We love to see what you can do with our work! Feel free to create remixes or derivative works for non-commercial purposes. Play around, experiment, and have fun, as long as you stick to the same license terms.



That's it! We believe in empowering the community with knowledge and resources, and we hope these tutorials and demos help you on your journey to creating fantastic projects with Tailwind CSS.



If you have any questions or just want to say hello, don't hesitate to reach out to us at Cruip.com.



Happy coding! 🚀