Docs

Vue.js

Volver atrás

Instalación Vue.js

Para comenzar sigue estos pasos:

*La guia usa npm pero puedes usar tu empaquetador preferido*
1

Inicia un proyecto Vue.js

                                                               
                                    $ 
                                      npm create vue@latest
 npm install
2

Instala Tailwind CSS

                                                               
                                    $ 
                                     npm install tailwindcss @tailwindcss/vite
                                        
@import "tailwindcss";
3

Instala Remixicon

                                                               
                                    $ 
                                     npm install remixicon
4

Crea una carpeta "components" en el "src" del proyecto

Elige el componente que desees y agregalo a la carpeta

Botones

      
<template>
  <button
    class="bg-black text-white font-semibold py-2 px-4 rounded-lg transition duration-200 border border-gray-600 hover:opacity-95 focus:outline-none focus:ring-2 focus:ring-gray-500"
    aria-label="Boton"
  >
    {{ label }}
  </button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    label: {
      type: String,
      default: 'Boton'
    }
  }
};
</script>

<style scoped>
/* Agrega estilos personalizados si es necesario */
</style>



    
      
<template>
  <button
    class="bg-gray-700 text-white font-semibold py-2 px-4 rounded-lg border border-gray-600 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 transition duration-200"
    aria-label="Boton Secondary"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'SecondaryButton',
};
</script>



    
      
<template>
  <button
    class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-300 transition duration-200"
    aria-label="Boton Warning"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'WarningButton',
};
</script>

Cards

PRO

Jane Doe

Product Designer

28

Projects

160

Likes

5.2k

Followers

Profile Completion 85% 
      
<script setup>
import { ref } from "vue";

const name = ref("Jane Doe");
const role = ref("Product Designer");
const projects = ref(28);
const likes = ref(160);
const followers = ref("5.2k");
const profileCompletion = ref(85);

export default {
  name: 'UserProfileCard',
};
</script>

<template>
  <article class="w-full md:w-80 bg-white border-none shadow-lg hover:shadow-xl transition-all duration-300 rounded-xl p-6">
    <header class="relative pb-0">
      <div class="absolute top-4 right-4">
        <span class="px-2 py-1 text-xs font-semibold text-white bg-emerald-500 rounded-lg hover:bg-emerald-800 transition duration-150">PRO</span>
      </div>
      <div class="flex flex-col items-center">
        <figure class="border-white border-solid shadow-md px-3 py-2 rounded-full">
          <i class="ri-user-line text-3xl"></i>
        </figure>
        <h2 class="mt-4 text-xl font-semibold">{{ name }}</h2>
        <p class="text-gray-500">{{ role }}</p>
      </div>
    </header>
    <section class="pt-6">
      <div class="flex justify-between text-center mb-6">
        <div class="flex-1">
          <p class="text-2xl font-bold text-gray-900">{{ projects }}</p>
          <p class="text-xs text-gray-500">Projects</p>
        </div>
        <div class="flex-1">
          <p class="text-2xl font-bold text-gray-900">{{ likes }}</p>
          <p class="text-xs text-gray-500">Likes</p>
        </div>
        <div class="flex-1">
          <p class="text-2xl font-bold text-gray-900">{{ followers }}</p>
          <p class="text-xs text-gray-500">Followers</p>
        </div>
      </div>
      <div class="space-y-2">
        <div class="flex justify-between text-sm">
          <span class="text-gray-500">Profile Completion</span>
          <span class="font-medium">{{ profileCompletion }}%</span>
        </div>
        <div class="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
          <div class="bg-blue-500 h-2" :style="{ width: profileCompletion + '%' }"></div>
        </div>
      </div>
    </section>
    <footer class="flex gap-2 items-center mt-4">
      <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
        <i class="ri-heart-fill text-lg text-rose-500"></i>
        <span class="ml-1">Liked</span>
      </button>
      <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
        <i class="ri-message-3-line text-lg text-gray-500"></i>
        <span class="ml-1">Message</span>
      </button>
      <button class="cursor-pointer w-9 h-9 flex items-center justify-center border border-gray-200 rounded-lg">
        <i class="ri-share-line text-lg text-gray-500"></i>
      </button>
    </footer>
  </article>
</template>
react-svg
Tecnologia Lectura 5 min

El futuro de la IA en el desarrollo web

Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.

Por Alex Brown Leer más 
      
<template>
  <article class="flex flex-col w-96 rounded-2xl gap-2 shadow-xl py-4 transition duration-150 hover:shadow-2xl">
    <img src="/React.svg" alt="react-svg" class="bg-slate-200 w-full h-52" />
    <div class="flex px-3 items-center gap-3 pt-2">
      <span class="text-base font-bold">Tecnologia</span>
      <span class="text-sm text-slate-500">Lectura 5 min</span>
    </div>
    <div class="flex flex-col gap-1 px-3">
      <h3 class="text-2xl font-semibold">El futuro de la IA en el desarrollo web</h3>
      <p class="text-slate-600">Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.</p>
    </div>
    <div class="flex justify-between px-3">
      <span class="flex gap-2 items-center text-sm"><i class="ri-user-fill"></i>Por Alex Brown</span>
      <a href="#" class="text-cyan-500 transition duration-150 hover:underline font-bold">Leer más</a>
    </div>
  </article>
</template>

<script>
export default {
  name: 'ArticleCard',
};
</script>
react-svg
Tecnologia Lectura 5 min

El futuro de la IA en el desarrollo web

Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.

Por Alex Brown Leer más 
      
<template>
  <article class="flex flex-col w-96 rounded-2xl gap-2 shadow-xl py-4 transition duration-150 hover:shadow-2xl">
    <img src="/React.svg" alt="react-svg" class="bg-slate-200 w-full h-52" />
    <div class="flex px-3 items-center gap-3 pt-2">
      <span class="text-base font-bold">Tecnologia</span>
      <span class="text-sm text-slate-500">Lectura 5 min</span>
    </div>
    <div class="flex flex-col gap-1 px-3">
      <h3 class="text-2xl font-semibold">El futuro de la IA en el desarrollo web</h3>
      <p class="text-slate-600">Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.</p>
    </div>
    <div class="flex justify-between px-3">
      <span class="flex gap-2 items-center text-sm"><i class="ri-user-fill"></i>Por Alex Brown</span>
      <a href="#" class="text-cyan-500 transition duration-150 hover:underline font-bold">Leer más</a>
    </div>
  </article>
</template>

<script>
export default {
  name: 'ArticleCard',
};
</script>

Inputs

      
<template>
  <div class="space-y-2 w-full max-w-md">
    <label for="email" class="block font-medium text-gray-700">Email</label>
    <input
      type="email"
      id="email"
      placeholder="Enter your email"
      class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
      v-model="email"
    />
  </div>
</template>

<script>
export default {
  name: 'EmailInput',
  data() {
    return {
      email: ''
    };
  },
  watch: {
    email(newValue) {
      console.log(newValue); // Opcional: para verificar el valor actualizado en la consola
    }
  }
};
</script>


    
      
<template>
  <div class="space-y-2 w-full max-w-md">
    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
    <div class="relative">
      <input
        :type="showPassword ? 'text' : 'password'"
        id="password"
        placeholder="Enter your password"
        class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
      />
      <button
        type="button"
        class="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
        @click="togglePasswordVisibility"
        :aria-label="showPassword ? 'Hide password' : 'Show password'"
      >
        <i :class="showPassword ? 'ri-eye-off-line h-4 w-4' : 'ri-eye-line h-4 w-4'" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PasswordInput',
  data() {
    return {
      showPassword: false,
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
  },
};
</script>

Alert

      
<template>
  <div class="flex items-center p-3 rounded-2xl bg-blue-100 text-blue-700" role="alert">
    <i class="ri-information-line mr-2"></i>
    <span>This is an informational alert message.</span>
  </div>
</template>

<script>
export default {
  name: 'InfoAlert',
};
</script>

Forms

Login

Enter your credentials to access your account

      
<template>
  <div class="w-full max-w-xs mx-auto border rounded p-4 transition duration-150 shadow-xl hover:shadow-2xl">
    <h2 class="text-xl font-bold mb-2">Login</h2>
    <p class="text-gray-600 mb-4 max-sm:text-base">Enter your credentials to access your account</p>
    <form class="space-y-4" @submit.prevent="handleSubmit">
      <div class="space-y-2">
        <label for="email" class="block font-medium">Email</label>
        <div class="relative">
          <i class="ri-mail-line absolute left-3 top-3 text-gray-400"></i>
          <input
            id="email"
            type="email"
            v-model="email"
            placeholder="Enter your email"
            class="w-full pl-10 p-2 border rounded"
            required
          />
        </div>
      </div>
      <div class="space-y-2">
        <label for="password" class="block font-medium">Password</label>
        <div class="relative">
          <i class="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
          <input
            id="password"
            type="password"
            v-model="password"
            placeholder="Enter your password"
            class="w-full pl-10 p-2 border rounded"
            required
          />
        </div>
      </div>
      <button
        type="submit"
        class="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4"
      >
        Log In
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    handleSubmit() {
      console.log('Email:', this.email);
      console.log('Password:', this.password);
      // Handle login logic here
    }
  }
};
</script>

Contact Us

Send us a message and we will get back to you as soon as possible

      
<template>
  <div class="w-full max-w-2xl mx-auto border rounded p-4 shadow-xl hover:shadow-2xl">
    <h2 class="text-xl font-bold mb-2">Contact Us</h2>
    <p class="text-gray-600 mb-4">Send us a message and we will get back to you as soon as possible</p>
    <form class="space-y-4" @submit.prevent="handleSubmit">
      <div class="space-y-2">
        <label for="name" class="block font-medium">Name</label>
        <div class="relative">
          <i class="ri-user-line absolute left-3 top-3 text-gray-400"></i>
          <input
            id="name"
            v-model="name"
            placeholder="Enter your name"
            class="w-full pl-10 p-2 border rounded"
            required
          />
        </div>
      </div>
      <div class="space-y-2">
        <label for="message" class="block font-medium">Message</label>
        <textarea
          id="message"
          v-model="message"
          placeholder="Type your message here"
          class="w-full p-2 border rounded"
          required
        ></textarea>
      </div>
      <button
        type="submit"
        class="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4"
      >
        <i class="ri-send-plane-line mr-2"></i>
        Send Message
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      message: ''
    };
  },
  methods: {
    handleSubmit() {
      console.log('Name:', this.name);
      console.log('Message:', this.message);
      // Handle form submission logic here
    }
  }
};
</script>

Subscribe to Our Newsletter

Stay updated with our latest news

      
<template>
  <div class="w-full shadow-xl hover:shadow-2xl max-w-md mx-auto border rounded p-4">
    <h2 class="text-xl font-bold mb-2">Subscribe to Our Newsletter</h2>
    <p class="text-gray-600 mb-4">Stay updated with our latest news</p>
    <form class="space-y-4" @submit.prevent="handleSubmit">
      <label class="block font-medium">Choose your plan</label>
      <div class="space-y-2">
        <label class="flex items-center">
          <input
            type="radio"
            name="plan"
            value="basic"
            v-model="plan"
            class="mr-2"
            required
          />
          Basic
        </label>
        <label class="flex items-center">
          <input
            type="radio"
            name="plan"
            value="premium"
            v-model="plan"
            class="mr-2"
            required
          />
          Premium
        </label>
        <label class="flex items-center">
          <input
            type="radio"
            name="plan"
            value="pro"
            v-model="plan"
            class="mr-2"
            required
          />
          Pro
        </label>
      </div>
      <button
        type="submit"
        class="w-full transition duration-150 hover:bg-blue-700 bg-blue-500 text-white p-2 rounded mt-4"
      >
        <i class="ri-check-line mr-2"></i>
        Subscribe
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plan: 'basic', // Default selected plan
    };
  },
  methods: {
    handleSubmit() {
      console.log('Selected Plan:', this.plan);
      // Handle form submission logic here
    },
  },
};
</script>

Tables

# Name Age Country
1 John Doe 25 USA
2 Jane Smith 30 Canada 
      
<template>
  <div class="overflow-x-auto bg-white shadow-md rounded-lg">
    <table class="min-w-full text-sm text-left text-gray-600">
      <thead class="bg-gray-200">
        <tr>
          <th class="px-6 py-3">#</th>
          <th class="px-6 py-3">Name</th>
          <th class="px-6 py-3">Age</th>
          <th class="px-6 py-3">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="px-6 py-3">1</td>
          <td class="px-6 py-3">John Doe</td>
          <td class="px-6 py-3">25</td>
          <td class="px-6 py-3">USA</td>
        </tr>
        <tr class="bg-gray-50">
          <td class="px-6 py-3">2</td>
          <td class="px-6 py-3">Jane Smith</td>
          <td class="px-6 py-3">30</td>
          <td class="px-6 py-3">Canada</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
};
</script>
# Name Age Country
1 John Doe 25 USA
2 Jane Smith 30 Canada
Showing 1 to 2 of 50 entries
      
<template>
  <div class="overflow-x-auto bg-white shadow-md rounded-lg">
    <div class="flex justify-between items-center p-4">
      <input
        v-model="searchQuery"
        type="text"
        placeholder="Search..."
        class="px-4 py-2 border rounded-lg text-sm w-1/4"
      />
      <div class="flex space-x-2">
        <button class="px-4 py-2 bg-blue-500 text-white text-sm rounded" @click="filter">Filter</button>
        <button class="px-4 py-2 bg-gray-500 text-white text-sm rounded" @click="reset">Reset</button>
      </div>
    </div>

    <table class="min-w-full text-sm text-left text-gray-600">
      <thead class="bg-blue-100">
        <tr>
          <th class="px-6 py-3">#</th>
          <th class="px-6 py-3">Name</th>
          <th class="px-6 py-3">Age</th>
          <th class="px-6 py-3">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in filteredData" :key="index">
          <td class="px-6 py-3">{{ item.id }}</td>
          <td class="px-6 py-3">{{ item.name }}</td>
          <td class="px-6 py-3">{{ item.age }}</td>
          <td class="px-6 py-3">{{ item.country }}</td>
        </tr>
      </tbody>
    </table>

    <div class="flex justify-between items-center p-4">
      <div class="text-sm">Showing 1 to 2 of 50 entries</div>
      <div class="space-x-2">
        <button class="px-4 py-2 border rounded" @click="previousPage">Previous</button>
        <button class="px-4 py-2 border rounded" @click="nextPage">Next</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: "",
      currentPage: 1,
      pageSize: 2,
      data: [
        { id: 1, name: "John Doe", age: 25, country: "USA" },
        { id: 2, name: "Jane Smith", age: 30, country: "Canada" },
        // Add more data entries as needed
      ],
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return (
          item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          item.country.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      });
    },
  },
  methods: {
    filter() {
      // Implement additional filter functionality if needed
      console.log("Filter applied");
    },
    reset() {
      this.searchQuery = "";
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage * this.pageSize < this.filteredData.length) {
        this.currentPage++;
      }
    },
  },
};
</script>

Accordions

¿Puedo usar esto en mi proyecto?

Sí. es de uso gratuito para proyectos personales y comerciales. No se requiere atribución.

¿Por qué no lo publicas como paquete npm?

La idea detrás de esto es darle propiedad y control sobre el código, permitiéndole decidir cómo se construyen y diseñan los componentes.

¿Qué frameworks son compatibles?

Puedes usarlo en cualquiera, React, Astro, Angular, Vue, etc.

      
<template>
  <div class="w-full border border-gray-300 rounded-lg bg-black py-2 px-4">
    <details class="faq-border mb-4 pb-2 group max-lg:px-5">
      <summary class="text-white cursor-pointer flex justify-between items-center group-hover:underline">
        ¿Puedo usar esto en mi proyecto?
        <span class="ml-2">
          <svg
            class="w-4 h-4 transition-transform group-open:rotate-90"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            />
          </svg>
        </span>
      </summary>
      <p class="text-white pt-5">
        Sí. es de uso gratuito para proyectos personales y comerciales. No se
        requiere atribución.
      </p>
    </details>

    <details class="faq-border mb-4 pb-2 group max-lg:px-5">
      <summary class="text-white cursor-pointer flex justify-between items-center group-hover:underline">
        ¿Por qué no lo publicas como paquete npm?
        <span class="ml-2">
          <svg
            class="w-4 h-4 transition-transform group-open:rotate-90"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            />
          </svg>
        </span>
      </summary>
      <p class="text-white pt-5">
        La idea detrás de esto es darle propiedad y control sobre el código,
        permitiéndole decidir cómo se construyen y diseñan los componentes.
      </p>
    </details>

    <details class="faq-border mb-4 pb-2 group max-lg:px-5">
      <summary class="text-white cursor-pointer flex justify-between items-center group-hover:underline">
        ¿Qué frameworks son compatibles?
        <span class="ml-2">
          <svg
            class="w-4 h-4 transition-transform group-open:rotate-90"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            />
          </svg>
        </span>
      </summary>
      <p class="text-white pt-5">
        Puedes usarlo en cualquiera, React, Astro, Angular, Vue, etc.
      </p>
    </details>
  </div>
</template>

<script>
export default {
  name: "FAQAccordion",
};
</script>

<style scoped>
.faq-border {
  border-bottom: 1px solid #4a4a4a;
}
.group-open {
  rotate: 90deg;
}
</style>
Custom Header 1
This accordion has custom styling applied to it.
Custom Header 2
You can customize the colors, padding, and other styles.
Custom Header 3
This demonstrates how flexible the accordion component can be. 
      
<template>
  <div class="w-full">
    <details class="mb-2">
      <summary
        class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center"
      >
        <i class="ri-edit-2-line mr-2"></i>
        Custom Header 1
      </summary>
      <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
        This accordion has custom styling applied to it.
      </div>
    </details>

    <details class="mb-2">
      <summary
        class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center"
      >
        <i class="ri-settings-2-line mr-2"></i>
        Custom Header 2
      </summary>
      <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
        You can customize the colors, padding, and other styles.
      </div>
    </details>

    <details>
      <summary
        class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center"
      >
        <i class="ri-lightbulb-line mr-2"></i>
        Custom Header 3
      </summary>
      <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
        This demonstrates how flexible the accordion component can be.
      </div>
    </details>
  </div>
</template>

<script>
export default {
  name: "CustomAccordion",
};
</script>

Checkbox

      
<template>
  <div class="bg-black flex items-center space-x-2 p-2 rounded">
    <input
      type="checkbox"
      id="exampleCheckbox"
      name="example"
      class="peer"
    />
    <label
      for="exampleCheckbox"
      class="text-sm text-white font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    >
      Accept terms and conditions
    </label>
  </div>
</template>

<script>
export default {
  name: "TermsCheckbox",
};
</script>

<style scoped>
</style>