Vuetify Currency Converter

Vuetify Currency Converter is a template that I developed to learn the basics of Vuetify.

The layout is based on https://vuetifyjs.com/ website.

▶️ ​LIVE DEMO https://joaogcs.github.io/vuetify-currency-converter/

Prerequisites

Before you begin, ensure you have met the following requirements:

• You have installed the latest version of Vue CLI
• You have installed the latest version of Yarn

API limitations of currency converter free version

This repository is build with the free version of Free Currency Converter API.

It's limited to 100 calls per hour and you may need to refresh the current API Key to your own.

The API Key is seen in the files:

src/components/SearchSingleCurrency.vue

149 `https://free.currconv.com/api/v7/currencies?apiKey=d8b2e9d59ba3d57fba43`

src/components/card.vue

209 `https://free.currencyconverterapi.com/api/v5/convert?q=${currencyA}_${currencyB}&compact=y&apiKey=d8b2e9d59ba3d57fba43`

Installing vuetify-currency-converter

To install vuetify-currency-converter, follow these steps:

Linux and macOS:

yarn install

# or

npm install

Windows:

yarn install

# or 

npm install

Run local environment

To use vuetify-currency-converter, follow these steps:

yarn serve

# or

npm serve

Deploy on Github Pages

To deploy vuetify-currency-converter on Github Pages, verify the if the name of you master branch matches the branch in the script scripts/gh-pages-deploy.js, the default is main:

17 await execa("git", ["checkout", "-f", "main"]);

ℹ️ Note

If you are using NPM you also must change package module from yarn to npm

9  await execa("yarn", ["run", "build"]);

⚠️ Important​

Make sure you have your Github account configured and you have committed all changes in main branch.

To change the path of your Github Page, open vue.config.js file and change the value of publicPath property to the path you want.

Follow these steps to deploy to Github Pages

yarn build

yarn deploy

Theme color configuration ☀️ | 🌑

To change colors of dark and light theme go to src/plugins/vuetify.js and change property values as you need.

💡 More information on Vuetify Theme Configuration

export default new Vuetify({
  theme: {
    themes: {
      light: {
        secondary: colors.grey.lighten3,
        tertiary: colors.grey.lighten3,
        accent: colors.green.lighten1,
        error: colors.red.accent3,
        background: colors.white
      },
      dark: {
        secondary: colors.grey.darken3,
        tertiary: colors.grey.darken4,
        accent: colors.green,
        error: colors.red.accent3,
        background: "#121212"
      }
    }
  }
});

Contributing to vuetify-currency-converter

To contribute to vuetify-currency-converter, follow these steps:

1. Fork this repository.
2. Create a branch: git checkout -b development.
3. Make your changes and commit them: git commit -m '<commit_message>'
4. Push to the original branch: git push origin vuetify-currency-converter/main
5. Create the pull request.

Alternatively see the Github documentation on creating a pull request.

Contributors

Thanks to the following people who have contributed to this project:

• @joaogcs 📖

Contact

If you want to contact me you can reach me at joaogcsoares1@gmail.com.

License

This project uses the following license: MIT.