Day 1 of VueJS, TailwindCSS & FrappeUI Training: Learning DOM Manipulation and VueJS Fundamentals

Welcome to Day 1 of VueJS, TailwindCSS, and FrappeUI Training! In today’s session, we will be focusing on DOM manipulation and VueJS basics.

VueJS is a popular JavaScript framework used for building dynamic and interactive web applications. TailwindCSS is a utility-first CSS framework that makes it easy to design responsive and well-structured user interfaces. FrappeUI is a design system built on top of TailwindCSS which provides ready-to-use components for building beautiful web applications.

In this tutorial, we will walk you through the process of setting up a VueJS project, integrating TailwindCSS and FrappeUI, and working on DOM manipulation using VueJS.

Step 1: Setting up the project

To get started, create a new VueJS project by running the following command in your terminal:

vue create my-vue-project

Follow the prompts to set up your project and select the features you want to include. Once the project is set up, navigate to the project directory and install TailwindCSS and FrappeUI:

npm install tailwindcss @tailwindcss/forms @tailwindcss/typography frappe-ui

Step 2: Integrating TailwindCSS and FrappeUI

Next, you need to configure TailwindCSS and FrappeUI in your project. Create a tailwind.config.js file in the root of your project and add the following code:

// tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('frappe-ui/vue'),
  ],
}

Step 3: Creating a Vue component

Now, let’s create a new Vue component to start working on DOM manipulation. Create a file named Home.vue in the src/components directory and add the following code:

<template>
  <div>
    <h1 v-if="showTitle">{{ title }}</h1>
    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, VueJS!',
      showTitle: true,
    };
  },
  methods: {
    toggleTitle() {
      this.showTitle = !this.showTitle;
    },
  },
};
</script>

Step 4: Adding the component to the main Vue instance

Now, let’s import the Home.vue component and add it to the main Vue instance. Open the App.vue file in the src directory and add the following code:

<template>
  <div>
    <Home />
  </div>
</template>

<script>
import Home from './components/Home.vue';

export default {
  components: {
    Home,
  },
};
</script>

Step 5: Running the project

To run the project, use the following command:

npm run serve

Navigate to http://localhost:8080 in your browser to see the VueJS application with TailwindCSS and FrappeUI integration. You should see a title with a "Toggle Title" button that allows you to toggle the visibility of the title.

That’s it for Day 1 of our training! In this session, we covered DOM manipulation basics using VueJS. Stay tuned for tomorrow’s session where we will dive deeper into VueJS components and data binding. Happy coding!