Build Random Quote Generator using VueJS

We are going to build a Random Quote Generator using Vue.js. This application will fetch random quotes from an API and display them on the screen. Users will have the option to copy the quote to their clipboard or generate a new random quote.

Prerequisites:

• Node.js
• Vue.js

Approach

We'll create a Vue.js component called QuoteGenerator that fetches random quotes from the "https://type.fit/api/quotes" API. This component will display the quote and author, provide buttons to copy the quote to the clipboard, and generate a new random quote.

Setting up the Vue.js project

Step 1: Install Vue CLI:

If you haven't installed Vue CLI yet, you can do so by running the following command in your terminal:

npm install -g @vue/cli

Step 2: Create a new Vue project:

Create a new Vue project using Vue CLI by running

vue create vue-quote-generator

Step 3: Navigate to your project directory:

cd vue-quote-generator

Project Structure:

👁 Screenshot-2024-04-30-100415

Step 4: Create and manage component file:

• Inside the src/components directory, create a file named QuoteGenerator.vue
• Replace content in src/App.vue
• create a styles.css file in the src directory

Example: This example shows the random code generator using Vue.js

Run your Vue.js app

npm run serve

Your Vue.js quote generator should be up and running at http://localhost:8080 by default. You can access it in your browser and see it in action!

Output:
👁 quote