Build Random Quote Generator using VueJS Last Updated : 09 May, 2024 Comments Improve Suggest changes Like Article Like Report 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.jsVue.jsApproachWe'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 projectStep 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/cliStep 2: Create a new Vue project:Create a new Vue project using Vue CLI by running vue create vue-quote-generatorStep 3: Navigate to your project directory:cd vue-quote-generatorProject Structure: Step 4: Create and manage component file:Inside the src/components directory, create a file named QuoteGenerator.vueReplace content in src/App.vuecreate a styles.css file in the src directoryExample: This example shows the random code generator using Vue.js CSS /* styles.css */ .container { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; color: #333; margin-top: 60px; } .boxSize { margin: 40px auto; padding: 20px; border-radius: 10px; width: 90%; max-width: 800px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.1); background-color: #d6d9dd; } .quoteText { font-size: 28px; font-weight: bold; margin-bottom: 20px; color: #007bff; } .author { font-size: 20px; font-style: italic; color: #6c757d; } .quoteBtn { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; } .generateQuote_next, .copyButton { font-size: 18px; border: none; border-radius: 5px; cursor: pointer; padding: 12px 20px; font-weight: bold; transition: background-color 0.3s, color 0.3s; } .generateQuote_next { color: #fff; background-color: #28a745; box-shadow: 0 4px 10px 0px rgba(40, 167, 69, 0.3); } .generateQuote_next:hover { background-color: #218838; } .copyButton { color: #fff; background-color: #007bff; box-shadow: 0 4px 10px 0px rgba(0, 123, 255, 0.3); } .copyButton:hover { background-color: #0056b3; } .copyButton:disabled { background-color: #ccc; cursor: not-allowed; } @media (max-width: 991px) { .boxSize { width: 95%; } .quoteText { font-size: 24px; } .author { font-size: 18px; } .quoteBtn { flex-direction: column; align-items: center; } .generateQuote_next, .copyButton { font-size: 16px; padding: 10px 16px; margin: 10px 0; } } @media (max-width: 767px) { .quoteText { font-size: 20px; } .author { font-size: 16px; } } JavaScript //App.vue <template> <div id="app"> <!-- Navbar --> <nav class="navbar"> <h1 class="navbar-brand">GFG Random Quote Generator using Vue.js</h1> </nav> <!-- Quote Generator --> <QuoteGenerator /> </div> </template> <script> import QuoteGenerator from './components/QuoteGenerator.vue'; export default { name: 'App', components: { QuoteGenerator } }; </script> <style> /* Navbar styles */ .navbar { background-color: #007bff; color: #fff; padding: 15px 0; text-align: center; } .navbar-brand { font-size: 1.5rem; font-weight: bold; } </style> JavaScript //QuoteGenerator.vue <template> <div class="container"> <div class="boxSize"> <h1 class="quoteText">{{ quote }}</h1> <p class="author">{{ author }}</p> <hr /> <div class="quoteBtn"> <button class="copyButton" @click="copyToClipboard" :disabled="copied" > {{ copied ? 'Copied!' : 'Copy' }} </button> <button class="generateQuote_next" @click="generateQuote"> Next quote </button> </div> </div> </div> </template> <script> export default { data() { return { quote: '', author: '', copied: false }; }, methods: { async generateQuote() { try { const response = await fetch('https://type.fit/api/quotes'); const quoteList = await response.json(); const randomIdx = Math.floor(Math.random() * quoteList.length); const quoteText = quoteList[randomIdx].text; const auth = quoteList[randomIdx].author || 'Anonymous'; this.quote = quoteText; this.author = '~ ' + auth; } catch (error) { console.error('Error fetching quote:', error); } }, copyToClipboard() { const textArea = document.createElement('textarea'); textArea.value = this.quote; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); this.copied = true; setTimeout(() => (this.copied = false), 2000); } }, mounted() { this.generateQuote(); } }; </script> <style src="./styles.css" scoped></style> Run your Vue.js appnpm run serveYour 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: Comment More infoAdvertise with us Next Article Build Random Quote Generator using VueJS R rituali8i63 Follow Improve Article Tags : Project JavaScript Web Technologies Vue.JS Similar Reads Random Quote Generator App using ReactJS In this article, we will create an application that uses an API to generate random quotes. The user will be given a button which on click will fetch a random quote from the API and display it on the screen. Users can generate many advices by clicking the button again. The button and the quotes are d 3 min read Quote Generator App Using Angular A Quote Generator App is a simple application that displays random quotes to users. It is a great project for practising Angular basics such as components, services, data and API integration.Here we develop a simple Quote Generator App using Angular. This application can able to display a new Quote 6 min read Random Quote Generator Using HTML, CSS and JavaScript A Random Quote Generator is capable of pulling quotes randomly from an API, a database, or simply from an array. We will be designing a Random Quote Generator from scratch using HTML, CSS, JavaScript, and type.fit API. The webpage displays a random quote from a collection and upon the click of a but 8 min read Create a Random Quote Generator using React-Native React Native is the most flexible and powerful mobile application development framework, which has various features embedded into it. Using this framework, we can create different interactive applications. Creating a Random Quote Generator using React Native is one of the interactive project which u 4 min read Build a Todo List App using VueJS This article provides an in-depth exploration of creating a Todo List application using Vue.js. It covers various aspects of building the application, whether you're new to Vue.js or looking to expand your skills, this comprehensive guide offers valuable insights and practical instructions to help y 4 min read Design a Random Quote Generator in Tailwind CSS This project demonstrates the creation of a simple Random Quote Generator web application using HTML, Tailwind CSS for styling, and JavaScript for functionality. The application generates random quotes and their authors upon clicking the "Generate Quote" button, offering an interactive and visually 3 min read Quote Generator App using NextJS In this article, we will build an quote generator using NextJS. The user will be given a button that, when clicked, will retrieve a random quote from the API and display it on the screen. By clicking the button again, users can generate a large number of advices.Technologies Used/PrerequisitesIntrod 3 min read How to Bind Attributes in VueJS ? In Vue.JS, the attribute binding allows us to properly manipulate the HTML elements that are based on the Vue Data properties and the expressions. We can bind these attributes using 2 different methods as listed below:Table of ContentApproach 1: Using v-bindApproach 2: Using shortHandApproach 1: Usi 2 min read Building a Shopping List with VueJS The following approach covers how to build a simple shopping list app with VueJs. Vue (or Vue.js) is an open-source JavaScript framework geared towards building user interfaces, it was created by Evan You.Prerequisites:Basic understanding of HTML.Basic knowledge of CSSBasic knowledge of JavaScriptIn 3 min read Inspirational Quote Generator with React The Inspirational Quotes Website is a web app constructed using React. It showcases quotes to inspire and uplift users. Users have the ability to explore a selection of quotes and even share their quotes on social media. There is an option for navigating back to the already read quotes and a share b 3 min read Like