Documentation
Components
Vue

Vue

Welcome to the Vue Components section of TailGrids documentation! Here, we'll dive into everything you need to know about integrating and utilizing TailGrids Vue.js Components in your Vue projects.

Get ready to seamlessly integrate powerful, pre-built TailGrids components into your Vue applications. Discover how to access, use, and customize them to accelerate your development workflow.

How to Access TailGrids Vue Components

To access TailGrids Vue Components:

Step #1: Visit the TailGrids Components Page (opens in a new tab).

Step #2: Browse through the available components or use the search option to find specific components.

Step #3: Choose the component to preview and click the Vue option to view code snippets.

vue code

Step #4: Copy the Vue component code snippet for further use.

How to Use TailGrids Vue Components

Using TailGrids Vue Components is straightforward:

  1. Paste: Paste the copied Vue component code snippet into your .vue file.
  2. Customize: Customize the component's attributes, classes, and content to fit your design.
  3. Save and Preview: Save your file and preview the changes in your web browser.

Let's get hands-on!

Example

In this example, we'll find a button component in TailGrids Vue components, copy its code, and integrate it into a Vue project.

  1. Search for "Button": On the TailGrids Components Page (opens in a new tab), use the search bar to find "button" components.
  2. Choose Your Button: Browse the results and select the button style that best suits your project's needs. Click on it to preview.
  3. Copy the Code: Ensure you have selected the "Vue" option and copy the provided Vue component code.
  4. Create a Vue Component: Continue after Step #5 of installing the Vue version; open a code editor and use the existing Vue component, or create a .vue file named Button.vue (or any name you prefer).
<script setup lang="ts">
  const { label } = defineProps({ label: String });
</script>
 
<template>
  <a
    href="#"
    class="inline-flex items-center justify-center rounded-full border border-dark bg-dark px-7 py-3 text-center text-base font-medium text-white disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 hover:border-body-color hover:bg-body-color dark:border-dark-2 dark:bg-dark-2"
  >
    {{ label }}
  </a>
</template>
  1. Paste and Preview: Now, paste the code you copied and save the Button.vue file. Then, import the button component into App.vue, run the localhost (opens in a new tab) server and open it in your web browser. Your button should be rendered on the page!

💡 Important Note: Ensure you've set up the TailGrids in your Vue project.

Customization: Now experiment by changing colors and text and using Tailwind CSS classes directly within the Vue component.

Let's create a captivating Vue project with TailGrids!

ReactFigma