tq-bit

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Learn to make API calls - My Pokedex</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
		<link rel="stylesheet" href="styles.css" />
	</head>
	<body>

## docker-compose.yaml
version: "3.8"

volumes:
  nc_data:
  nc_conf:

services:
  db:
    image: postgres
    restart: always

## AppContainer.vue
<script setup lang="ts">
import { h, defineProps, withDefaults, Component } from 'vue';

interface AppContainerProps {
  tag?: keyof HTMLElementTagNameMap;
  flex?: boolean;
  page?: boolean;
  center?: boolean;
  cols?: number;
}

## AppAudioPlayer.vue
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';

import iPlay from './icons/iPlay.vue';
import iPause from './icons/iPause.vue';

const DEFAULT_AUDIO_ADDRESS = 'https://www.americanrhetoric.com/mp3clips/politicalspeeches/gettysburgaddressjohnnycash.mp3';

const currentAudioFileSource = null;
const previousAudioFileSource = null;

## vue3-ts-lint-setup.sh
npm create vite@latest .
npm install
npm i -D eslint prettier @vue/eslint-config-typescript @rushstack/eslint-patch eslint-config-prettier eslint-plugin-prettier

echo """{
	\"bracketSpacing\": true,
	\"semi\": true,
	\"singleQuote\": true,
	\"trailingComma\": \"all\",
	\"printWidth\": 80,

## Component.vue
<script setup>
import { ref, onMounted } from 'vue';
import AppForm from './components/AppForm.vue';
import AppList from './components/AppList.vue';
import AppLoading from './components/AppLoading.vue';

import useFetch from './use/useFetch';

const rootUrl = 'https://my-json-server.typicode.com/tq-bit/use-fetch-json-mock';
const { loading, results, getJson } = useFetch(rootUrl);

## docker-compose.yml
version: "3.5"

services:
  reverse-proxy:
    # The official v2 Traefik docker image
    image: traefik:v2.9
    # Enables the web UI and tells Traefik to listen to docker
    command: --providers.docker
    ports:
      # The HTTP port
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Learn to make API calls - My Pokedex</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	version: "3.8"

	volumes:
	nc_data:
	nc_conf:

	services:
	db:
	image: postgres
	restart: always
	<script setup lang="ts">
	import { h, defineProps, withDefaults, Component } from 'vue';

	interface AppContainerProps {
	tag?: keyof HTMLElementTagNameMap;
	flex?: boolean;
	page?: boolean;
	center?: boolean;
	cols?: number;
	}
	<script setup lang="ts">
	import { onMounted, ref, computed } from 'vue';

	import iPlay from './icons/iPlay.vue';
	import iPause from './icons/iPause.vue';

	const DEFAULT_AUDIO_ADDRESS = 'https://www.americanrhetoric.com/mp3clips/politicalspeeches/gettysburgaddressjohnnycash.mp3';

	const currentAudioFileSource = null;
	const previousAudioFileSource = null;
	npm create vite@latest .
	npm install
	npm i -D eslint prettier @vue/eslint-config-typescript @rushstack/eslint-patch eslint-config-prettier eslint-plugin-prettier

	echo """{
	\"bracketSpacing\": true,
	\"semi\": true,
	\"singleQuote\": true,
	\"trailingComma\": \"all\",
	\"printWidth\": 80,
	<script setup>
	import { ref, onMounted } from 'vue';
	import AppForm from './components/AppForm.vue';
	import AppList from './components/AppList.vue';
	import AppLoading from './components/AppLoading.vue';

	import useFetch from './use/useFetch';

	const rootUrl = 'https://my-json-server.typicode.com/tq-bit/use-fetch-json-mock';
	const { loading, results, getJson } = useFetch(rootUrl);
	version: "3.5"

	services:
	reverse-proxy:
	# The official v2 Traefik docker image
	image: traefik:v2.9
	# Enables the web UI and tells Traefik to listen to docker
	command: --providers.docker
	ports:
	# The HTTP port