Frontend Mentor - Pricing component with toggle solution

This is a solution to the Pricing component with toggle challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Installation
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Installation

Requirements

• Node.js - JavaScript runtime environment
• Git - Free and Open-Source distributed version control system

# Clone the repository
git clone
# Enter the directory
cd pricing_component_vue
# Install the dependencies
npm install
# Run the development server
npm run dev

Screenshot

Links

• Solution URL: https://github.com/aristeoibarra/pricing_component
• Live Site URL: https://pricing-component-vue.vercel.app

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• Vue.js - JS library
• Tailwindcss - For styles
• Vite - For build and development
• Vercel - For deployment

What I learned

I learned how to use the composition api with Vue.js and how to use the pinia store to manage the state of the application.

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
  state: () => ({
    isYearly: false,
  }),
  actions: {
    toggleYearly() {
      this.isYearly = !this.isYearly
    },
  },
})

Useful resources

• Vue.js - Vue.js is a progressive framework for building user interfaces.
• Tailwindcss - A utility-first CSS framework for rapidly building custom designs.
• Vite - Next Generation Frontend Tooling.
• Vercel - Develop. Preview. Ship. For the best frontend teams – design systems, frontend apps, websites & static sites.
• Pinia Store - Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support.

Author

• Website - Aristeo Ibarra
• Frontend Mentor - @aristeoibarra
• Twitter - @aristeoibarra1