AndrewJBateman / vue-vuex-datalist

:clipboard: Displays random facts and image from APIs, using the Vue and Vuex.

⚡ Vue Vuex Data

• Vue app to display random fact data using Vuex state management.
• Also shows a random image from Unsplash.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Vue Vuex Data
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Data displayed using one-way data-binding and an v-for loop.
• Simple top navigation between random fact shown on a card and a list of facts.
• 'purgecss' was disabled to make this work with the version upgrades. It is not required anyway.

📷 Screenshots

. .

📶 Technologies

• Vue framework v2
• Vue Router v3 the official router for Vue.js
• Vue CLI v4
• tailwindcss v2 low-level CSS framework plugin.
• Simple to use Random facts API
• Vue DevTools extension for Chrome

💾 Setup

• Run npm i to install dependencies.
• Run npm run serve then navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files.
• Run npm run build to create a build file

💻 Code Examples

• extract from store/index.js to control Vuex states

export default new Vuex.Store({
  state: {
    currentData: "Random facts display",
    allDatas: []
  },
  mutations: {
    setCurrentData(state, payload) {
      state.currentData = payload;
      state.allDatas.push(payload);
    }
  },
  actions: {
    async setCurrentData(state){
      const data = await fetch(url, { headers });
      const d = await data.json();
      console.log('json data: ', d.items)
      state.commit("setCurrentData", d.text);
    }
  },
  modules: {},
  getters: {
    getCurrentData: state => state.currentData,
    getAllDatas: state => state.allDatas
  }
});

🆒 Features

• Uses Vue & Tailwind CSS for reduced bundle size
• Random image every time app started or screen is refreshed, add API data model

📋 Status & To-Do List

• Status: Working. Updated june 2021.
• To-Do: Nothing

👏 Inspiration

• Tailwind CSS cards
• Generate Random Images From Unsplash Without Using The API, June 24, 2018 by Andreas Wik

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]