├── .env.example
├── .github
    └── dependabot.yml
├── .gitignore
├── README.md
├── app.vue
├── assets
    └── main.css
├── components
    ├── AuthorModal.vue
    ├── BookModal.vue
    ├── Form
    │   ├── AuthorInput.vue
    │   └── Input.vue
    └── Nav
    │   └── Header.vue
├── composables
    ├── authorStore.ts
    ├── bookStore.ts
    └── useToast.ts
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── authors
    │   └── index.vue
    └── index.vue
├── plugins
    ├── datatabless.client.ts
    ├── toast.client.ts
    └── vee-validate.ts
├── server
    ├── api
    │   ├── authors
    │   │   ├── [id].delete.ts
    │   │   ├── [id].put.ts
    │   │   ├── create.post.ts
    │   │   └── index.ts
    │   └── books
    │   │   ├── [id].delete.ts
    │   │   ├── [id].put.ts
    │   │   ├── create.post.ts
    │   │   └── index.ts
    ├── db
    │   └── index.ts
    ├── models
    │   ├── Author.model.ts
    │   └── Book.model.ts
    └── validation.ts
├── tailwind.config.js
├── tsconfig.json
└── types
    └── index.ts


/.env.example:
--------------------------------------------------------------------------------
1 | MONGO_URI = 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # Please see the documentation for all configuration options:
 2 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 3 | 
 4 | version: 2
 5 | updates:
 6 |   - package-ecosystem: "npm"
 7 |     directory: "/"
 8 |     schedule:
 9 |       interval: "weekly"
10 |       day: "sunday"
11 |       time: "06:00"
12 |       timezone: "America/Jamaica"
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 CRUD App
 2 | 
 3 | A Nuxt 3 app that displays how to use [Server Routes & Middleware](https://v3.nuxtjs.org/guide/directory-structure/server) to perform CRUD operations.
 4 | 
 5 | ## Stuff used
 6 | 
 7 | - [Nuxt 3](https://v3.nuxtjs.org)
 8 | - [TailwindCSS](https://tailwindcss.com/)
 9 | - [Headless UI](https://headlessui.com/)
10 | - [Pinia](https://pinia.vuejs.org/)
11 | - [VeeValidate V4](https://vee-validate.logaretm.com/v4/)
12 | - [MongoDB](https://www.mongodb.com/)
13 | 
14 | ## How to start
15 | 
16 | 1. Add mongo uri to `.env` file
17 | 1. Install dependencies with `npm install --force` (Force if you get an error abot pinia)
18 | 1. Run dev with `npm run dev`
19 | 1. Build & deploy if you want to `npm run build`
20 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div>
3 | 		<!-- Header used in entire app -->
4 | 		<NavHeader />
5 | 		<NuxtPage />
6 | 	</div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/assets/main.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
  2 | 
  3 | @tailwind base;
  4 | @tailwind components;
  5 | @tailwind utilities;
  6 | 
  7 | @layer components {
  8 | 	.btn {
  9 | 		@apply px-4 py-2.5 text-sm flex items-center justify-center
 10 |          text-white rounded-md font-medium 
 11 | 		 bg-gradient-to-tr from-primary to-amber-400 hover:shadow-xl 
 12 | 		 hover:shadow-primary/30 hover:scale-[1.03]
 13 | 		focus:ring-4 focus:ring-primary/30 transition-all duration-300;
 14 | 	}
 15 | 	.input {
 16 | 		@apply w-full border-gray-300 rounded-md focus:border-primary sm:text-sm 
 17 | 		focus:ring-4 focus:ring-primary/30 focus:border-primary/50 p-2.5;
 18 | 	}
 19 | 	.label {
 20 | 		@apply inline-block mb-1 text-sm text-gray-600;
 21 | 	}
 22 | }
 23 | 
 24 | .eztble {
 25 | 	--easy-table-border: none;
 26 | 	--easy-table-row-border: none;
 27 | 
 28 | 	--easy-table-header-font-size: 14px;
 29 | 	--easy-table-header-height: 0px;
 30 | 	--easy-table-header-font-color: theme("colors.gray.700");
 31 | 	--easy-table-header-background-color: theme("colors.gray.50");
 32 | 	--easy-table-header-item-padding: 16px;
 33 | 
 34 | 	/* Row & Body */
 35 | 	--easy-table-body-row-height: 0px;
 36 | 	--easy-table-body-row-font-size: 14px;
 37 | 	--easy-table-body-row-font-color: theme("colors.gray.600");
 38 | 	--easy-table-body-row-background-color: #fff;
 39 | 	--easy-table-body-row-hover-font-color: theme("colors.gray.700");
 40 | 	--easy-table-body-row-hover-background-color: theme("colors.gray.100");
 41 | 	--easy-table-body-even-row-font-color: #373737;
 42 | 	--easy-table-body-even-row-background-color: #fff;
 43 | 	--easy-table-body-item-padding: 18px;
 44 | 
 45 | 	/* Footer */
 46 | 	--easy-table-footer-background-color: #fff;
 47 | 	--easy-table-footer-font-color: theme("colors.gray.500");
 48 | 	--easy-table-footer-font-size: 12px;
 49 | 	--easy-table-footer-padding: 20px 5px;
 50 | 	--easy-table-footer-height: 0px;
 51 | 	--easy-table-rows-per-page-selector-width: auto;
 52 | 	--easy-table-rows-per-page-selector-option-padding: 5px;
 53 | 
 54 | 	/* Message */
 55 | 	--easy-table-message-font-color: #212121; /*Empty message related, when no items in table */
 56 | 	--easy-table-message-font-size: 16px; /*Empty message related, when no items in table */
 57 | 	--easy-table-message-padding: 30px 0px; /* Empty message related, when no items in table */
 58 | 
 59 | 	/* Loader */
 60 | 	--easy-table-loading-mask-background-color: #fff;
 61 | 	--easy-table-loading-mask-opacity: 0.5;
 62 | 
 63 | 	/* Scrollbar */
 64 | 	--easy-table-scrollbar-track-color: #fff;
 65 | 	--easy-table-scrollbar-color: #fff;
 66 | 	--easy-table-scrollbar-thumb-color: theme("colors.gray.200");
 67 | 	--easy-table-scrollbar-corner-color: #fff;
 68 | 	--easy-table-buttons-pagination-border: 1px solid #e0e0e0;
 69 | }
 70 | 
 71 | .eztble th {
 72 | 	@apply font-medium;
 73 | }
 74 | 
 75 | /* Toast styles */
 76 | 
 77 | .Vue-Toastification__toast {
 78 | 	font-family: "Inter" !important;
 79 | 	padding: 20px 17px !important;
 80 | }
 81 | .Vue-Toastification__toast-body {
 82 | 	font-size: 14px !important;
 83 | 	font-weight: 400 !important;
 84 | }
 85 | 
 86 | /* Vue select */
 87 | .vue-select {
 88 | 	width: 100% !important;
 89 | 	border: 1px solid theme("colors.slate.300") !important;
 90 | 	@apply !rounded-md hover:!border-slate-400;
 91 | }
 92 | .vue-input input {
 93 | 	@apply !p-2 !text-base;
 94 | }
 95 | 
 96 | .vue-dropdown {
 97 | 	@apply !border-gray-300;
 98 | }
 99 | .vue-dropdown-item.highlighted {
100 | 	@apply !bg-primary-50;
101 | }
102 | 
103 | .vue-dropdown-item.selected {
104 | 	@apply !bg-primary !text-white;
105 | }
106 | 
107 | .vue-dropdown-item {
108 | 	@apply !p-3;
109 | }
110 | .vue-select .vue-tags {
111 | 	height: 50px;
112 | }
113 | 
114 | .vue-tag.selected {
115 | 	background-color: theme("colors.primary.50") !important;
116 | 	border-radius: 50px !important;
117 | 	padding: 0 8px !important;
118 | }
119 | .vue-tag.selected img {
120 | 	height: 14px !important;
121 | 	width: 14px !important;
122 | 	min-height: 10px !important;
123 | 	min-width: 10px !important;
124 | 	max-height: 100% !important;
125 | 	max-width: 100% !important;
126 | 	margin: 0px 5px !important;
127 | }
128 | /* Transitions */
129 | 
130 | .page-enter-active,
131 | .page-leave-active {
132 | 	transition: all 0.2s;
133 | }
134 | 
135 | .page-enter-from,
136 | .page-leave-to {
137 | 	opacity: 0;
138 | 	transform: scale(0.99);
139 | }
140 | 


--------------------------------------------------------------------------------
/components/AuthorModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<TransitionRoot :show="open">
  3 | 		<!-- Dialog -->
  4 | 		<Dialog as="div" class="relative z-20" @close="closeModal">
  5 | 			<!-- Dialog overlay -->
  6 | 			<TransitionChild
  7 | 				enter="duration-200"
  8 | 				leave="duration-200"
  9 | 				enter-from="opacity-0"
 10 | 				leave-to="opacity-0"
 11 | 			>
 12 | 				<div class="fixed inset-0 bg-black/30 backdrop-blur" />
 13 | 			</TransitionChild>
 14 | 
 15 | 			<!-- Full-screen scrollable container -->
 16 | 			<div class="fixed inset-0 overflow-y-auto">
 17 | 				<!-- Container to center the panel -->
 18 | 				<div class="flex items-center justify-center min-h-full p-4">
 19 | 					<!-- The actual dialog panel -->
 20 | 					<TransitionChild
 21 | 						enter="duration-300 ease-out"
 22 | 						enter-from="opacity-0 scale-95"
 23 | 						enter-to="opacity-100 scale-100"
 24 | 						leave="duration-200 ease-in"
 25 | 						leave-from="opacity-100 scale-100"
 26 | 						leave-to="opacity-0 scale-95"
 27 | 					>
 28 | 						<DialogPanel class="w-full min-w-[360px] p-5 bg-white shadow-lg rounded-2xl">
 29 | 							<div class="flex items-center justify-between">
 30 | 								<!-- Conditional rendering for text -->
 31 | 								<DialogTitle class="text-xl font-medium text-gray-700"
 32 | 									>{{ author._id ? "Update" : "Create" }} Author</DialogTitle
 33 | 								>
 34 | 							</div>
 35 | 							<p class="mt-1 text-sm text-gray-500">
 36 | 								{{ author._id ? "Update this author" : "Create a new author here" }}
 37 | 							</p>
 38 | 
 39 | 							<form @submit="submitAuthor" class="mt-5">
 40 | 								<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 41 | 									<div class="col-span-full">
 42 | 										<FormInput
 43 | 											v-model="author.name"
 44 | 											rules="required"
 45 | 											label="Name"
 46 | 											type="text"
 47 | 											name="name"
 48 | 											id="author"
 49 | 										/>
 50 | 									</div>
 51 | 								</div>
 52 | 								<!-- Form buttons -->
 53 | 								<div class="flex items-center justify-end space-x-3 mt-7">
 54 | 									<button
 55 | 										@click="closeModal()"
 56 | 										type="button"
 57 | 										class="px-4 text-sm bg-gray-100 py-2.5 rounded-md"
 58 | 									>
 59 | 										Cancel
 60 | 									</button>
 61 | 									<button type="submit" class="btn">{{ author._id ? "Update" : "Create" }}</button>
 62 | 								</div>
 63 | 							</form>
 64 | 						</DialogPanel>
 65 | 					</TransitionChild>
 66 | 				</div>
 67 | 			</div>
 68 | 		</Dialog>
 69 | 	</TransitionRoot>
 70 | </template>
 71 | 
 72 | <script setup>
 73 | 	import {
 74 | 		Dialog,
 75 | 		DialogPanel,
 76 | 		DialogTitle,
 77 | 		TransitionRoot,
 78 | 		TransitionChild,
 79 | 	} from "@headlessui/vue";
 80 | 	import { useForm } from "vee-validate";
 81 | 
 82 | 	// instantiate author store
 83 | 	const authorStore = useAuthorStore();
 84 | 	//Initial form value
 85 | 	const author = ref({});
 86 | 
 87 | 	// Get function used to handle form submission and set init form values
 88 | 	const { handleSubmit } = useForm({
 89 | 		initialValues: author,
 90 | 	});
 91 | 
 92 | 	// Function used to update or create the record
 93 | 	const submitAuthor = handleSubmit(async (values, ctx) => {
 94 | 		if (!author.value._id) {
 95 | 			// create author
 96 | 			await authorStore.create(values.name);
 97 | 			closeModal();
 98 | 		} else {
 99 | 			// Updated author
100 | 			authorStore.update(author.value._id, values.name);
101 | 			closeModal();
102 | 		}
103 | 	});
104 | 
105 | 	// Control open/close state of modal
106 | 	const open = ref(false);
107 | 	const openModal = (item) => {
108 | 		// Set init values if an object is passed
109 | 		if (item) author.value = JSON.parse(JSON.stringify(item));
110 | 		open.value = true;
111 | 	};
112 | 	const closeModal = () => {
113 | 		author.value = {};
114 | 		open.value = false;
115 | 	};
116 | 
117 | 	// Expose these methods to parent components
118 | 	defineExpose({
119 | 		openModal,
120 | 		closeModal,
121 | 	});
122 | </script>
123 | 
124 | <style></style>
125 | 


--------------------------------------------------------------------------------
/components/BookModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<TransitionRoot :show="open">
  3 | 		<!-- Dialog -->
  4 | 		<Dialog as="div" class="relative z-20" @close="closeModal">
  5 | 			<!-- Dialog overlay -->
  6 | 			<TransitionChild
  7 | 				enter="duration-200"
  8 | 				leave="duration-200"
  9 | 				enter-from="opacity-0"
 10 | 				leave-to="opacity-0"
 11 | 			>
 12 | 				<div class="fixed inset-0 bg-black/30 backdrop-blur" />
 13 | 			</TransitionChild>
 14 | 
 15 | 			<!-- Full-screen scrollable container -->
 16 | 			<div class="fixed inset-0 overflow-y-auto">
 17 | 				<!-- Container to center the panel -->
 18 | 				<div class="flex items-center justify-center min-h-full p-4">
 19 | 					<!-- The actual dialog panel -->
 20 | 					<TransitionChild
 21 | 						enter="duration-300 ease-out"
 22 | 						enter-from="opacity-0 scale-95"
 23 | 						enter-to="opacity-100 scale-100"
 24 | 						leave="duration-200 ease-in"
 25 | 						leave-from="opacity-100 scale-100"
 26 | 						leave-to="opacity-0 scale-95"
 27 | 					>
 28 | 						<DialogPanel class="w-full min-w-[360px] p-5 bg-white shadow-lg rounded-2xl">
 29 | 							<div class="flex items-center justify-between">
 30 | 								<!-- Conditional rendering for text -->
 31 | 								<DialogTitle class="text-xl font-medium text-gray-700"
 32 | 									>{{ book._id ? "Update" : "Create" }} Author</DialogTitle
 33 | 								>
 34 | 							</div>
 35 | 							<p class="mt-1 text-sm text-gray-500">
 36 | 								{{ book._id ? "Update this author" : "Create a new author here" }}
 37 | 							</p>
 38 | 
 39 | 							<form @submit="submitBook" class="mt-5">
 40 | 								<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 41 | 									<div class="col-span-full">
 42 | 										<FormInput rules="required" label="Title" type="text" name="title" id="title" />
 43 | 									</div>
 44 | 									<div class="mb-4 col-span-full">
 45 | 										<FormAuthorInput v-model="authors" />
 46 | 									</div>
 47 | 									<div class="col-span-1">
 48 | 										<FormInput
 49 | 											placeholder="Select a date"
 50 | 											rules="required"
 51 | 											label="Published date"
 52 | 											type="date"
 53 | 											name="published"
 54 | 											id="pub_date"
 55 | 										/>
 56 | 									</div>
 57 | 									<div class="col-span-1">
 58 | 										<FormInput label="ISBN" type="text" name="isbn" id="isbn" />
 59 | 									</div>
 60 | 									<div class="col-span-1">
 61 | 										<FormInput
 62 | 											min="0"
 63 | 											rules="required|min_value:0"
 64 | 											label="Page count"
 65 | 											type="number"
 66 | 											name="pageCount"
 67 | 											id="count"
 68 | 										/>
 69 | 									</div>
 70 | 								</div>
 71 | 								<!-- Form buttons -->
 72 | 								<div class="flex items-center justify-end space-x-3 mt-7">
 73 | 									<button
 74 | 										@click="closeModal()"
 75 | 										type="button"
 76 | 										class="px-4 text-sm bg-gray-100 py-2.5 rounded-md"
 77 | 									>
 78 | 										Cancel
 79 | 									</button>
 80 | 									<button type="submit" class="btn">{{ book._id ? "Update" : "Create" }}</button>
 81 | 								</div>
 82 | 							</form>
 83 | 						</DialogPanel>
 84 | 					</TransitionChild>
 85 | 				</div>
 86 | 			</div>
 87 | 		</Dialog>
 88 | 	</TransitionRoot>
 89 | </template>
 90 | 
 91 | <script setup>
 92 | 	import {
 93 | 		Dialog,
 94 | 		DialogPanel,
 95 | 		DialogTitle,
 96 | 		TransitionRoot,
 97 | 		TransitionChild,
 98 | 	} from "@headlessui/vue";
 99 | 	import { useForm } from "vee-validate";
100 | 
101 | 	const authorStore = useAuthorStore();
102 | 	useAsyncData(() => authorStore.getAll(), { initialCache: false });
103 | 
104 | 	// instantiate book store
105 | 	const bookStore = useBookStore();
106 | 	// Initial form values
107 | 	const book = ref({});
108 | 	const authors = ref([]);
109 | 
110 | 	// Get function used to handle form submission and set init form values
111 | 	const { handleSubmit } = useForm({
112 | 		initialValues: book,
113 | 	});
114 | 
115 | 	// Function used to update or create the record
116 | 	const submitBook = handleSubmit(async (values, ctx) => {
117 | 		if (!book.value._id) {
118 | 			// create author
119 | 			await bookStore.create({ ...values, authors: authors.value });
120 | 			closeModal();
121 | 		} else {
122 | 			// Updated author
123 | 			bookStore.update(book.value._id, { ...values, authors: authors.value });
124 | 			closeModal();
125 | 		}
126 | 	});
127 | 
128 | 	// Controll state of teh modal
129 | 	const open = ref(false);
130 | 	const openModal = (item) => {
131 | 		// Set init values if an object is passed
132 | 		if (item) {
133 | 			book.value = JSON.parse(
134 | 				JSON.stringify({ ...item, published: item.published.substring(0, 10) })
135 | 			);
136 | 			authors.value = item.authors.map((a) => a._id);
137 | 		}
138 | 		open.value = true;
139 | 	};
140 | 	const closeModal = () => {
141 | 		book.value = {};
142 | 		authors.value = [];
143 | 		open.value = false;
144 | 	};
145 | 
146 | 	// Expose these methods to parent components
147 | 	defineExpose({
148 | 		openModal,
149 | 		closeModal,
150 | 	});
151 | </script>
152 | 
153 | <style></style>
154 | 


--------------------------------------------------------------------------------
/components/Form/AuthorInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<Combobox v-slot="{ open }" multiple>
 3 | 		<div class="relative">
 4 | 			<ComboboxLabel class="label">Authors</ComboboxLabel>
 5 | 			<div class="relative">
 6 | 				<ComboboxInput
 7 | 					placeholder="Search here..."
 8 | 					class="input"
 9 | 					@change="query = $event.target.value"
10 | 					:displayValue="getDisplay"
11 | 				/>
12 | 				<span class="absolute top-2 right-2">
13 | 					<ComboboxButton>
14 | 						<Icon
15 | 							class="transition-all duration-300"
16 | 							:class="[open ? 'rotate-180' : '']"
17 | 							name="fluent:chevron-down-24-regular"
18 | 							size="20"
19 | 						/> </ComboboxButton
20 | 				></span>
21 | 			</div>
22 | 			<ComboboxOptions class="absolute w-full bg-white border border-gray-100 rounded-md shadow-lg">
23 | 				<div
24 | 					v-if="filteredAuthors.length === 0 && query !== ''"
25 | 					class="relative px-2 py-4 text-center text-gray-500 cursor-default select-none"
26 | 				>
27 | 					No Author Found
28 | 				</div>
29 | 				<!-- filtereed authors -->
30 | 				<ComboboxOption
31 | 					as="template"
32 | 					v-for="author in filteredAuthors"
33 | 					:key="author._id"
34 | 					:value="author._id"
35 | 				>
36 | 					<li
37 | 						class="px-3 py-2.5 cursor-pointer ui-active:bg-primary-50 ui-selected:bg-primary ui-selected:text-white"
38 | 					>
39 | 						<span class="block text-sm truncate ui-active:text-primary">
40 | 							{{ author.name }}
41 | 						</span>
42 | 					</li>
43 | 				</ComboboxOption>
44 | 			</ComboboxOptions>
45 | 		</div>
46 | 	</Combobox>
47 | </template>
48 | 
49 | <script setup>
50 | 	import {
51 | 		ComboboxLabel,
52 | 		Combobox,
53 | 		ComboboxInput,
54 | 		ComboboxOptions,
55 | 		ComboboxOption,
56 | 		ComboboxButton,
57 | 	} from "@headlessui/vue";
58 | 
59 | 	// instantiate the author store
60 | 	const authorStore = useAuthorStore();
61 | 	// get the authors
62 | 	useAsyncData(() => authorStore.getAll(), { initialCache: false });
63 | 
64 | 	// Serch value
65 | 	const query = ref("");
66 | 
67 | 	// Method used to display the text inside the input
68 | 	const getDisplay = (authors) => {
69 | 		// If empty
70 | 		if (!authors.length) return;
71 | 
72 | 		// get first author name
73 | 		let firstAuthor = authorStore.authors.find((a) => a._id == authors[0])?.name;
74 | 
75 | 		// if we have more than one selected, return the first & the extras
76 | 		if (authors.length > 1) {
77 | 			return `${firstAuthor} + ${authors.length - 1} more`;
78 | 		}
79 | 
80 | 		// If only one is selcted, return that one
81 | 		return firstAuthor;
82 | 	};
83 | 
84 | 	// Simple search function to find the authors
85 | 	const filteredAuthors = computed(() =>
86 | 		query.value === ""
87 | 			? authorStore.authors
88 | 			: authorStore.authors.filter((a) => {
89 | 					return a.name.toLowerCase().includes(query.value.toLowerCase());
90 | 			  })
91 | 	);
92 | </script>
93 | 


--------------------------------------------------------------------------------
/components/Form/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="w-full">
 3 | 		<label v-if="label" class="label" :for="$attrs.id">{{ label }}</label>
 4 | 		<input v-model="value" v-bind="$attrs" class="input" />
 5 | 		<div class="mt-1 text-xs text-red-500">
 6 | 			<span class="text-transparent">.</span>
 7 | 			<span>
 8 | 				{{ errorMessage }}
 9 | 			</span>
10 | 		</div>
11 | 	</div>
12 | </template>
13 | 
14 | <script setup>
15 | 	import { useField } from "vee-validate";
16 | 	const props = defineProps({
17 | 		label: String,
18 | 		name: String,
19 | 		rules: String,
20 | 		modelValue: [String, Number],
21 | 	});
22 | 
23 | 	// Get value and errorMessage to use in template
24 | 	const { errorMessage, value } = useField(ref(props.name), props.rules, {
25 | 		initialValue: props.modelValue, // set init value
26 | 		label: props.label || props.name, // label used for displaying errors
27 | 	});
28 | </script>
29 | 
30 | <script>
31 | 	// stop component from inheriting attrs
32 | 	export default {
33 | 		inheritAttrs: false,
34 | 	};
35 | </script>
36 | 
37 | <style></style>
38 | 


--------------------------------------------------------------------------------
/components/Nav/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<header class="w-full border-b border-gray-200 bg-white/50 backdrop-blur">
 3 | 		<div class="flex items-center justify-between h-20 px-3 mx-auto max-w-7xl">
 4 | 			<NuxtLink to="/" class="text-xl font-semibold">CRUD</NuxtLink>
 5 | 			<nav class="flex items-center space-x-2">
 6 | 				<template v-for="n in menu" :key="`menuItem${n.name}`">
 7 | 					<NuxtLink
 8 | 						class="px-3 py-2 text-sm font-medium text-gray-500 transition-all rounded-lg link hover:text-primary hover:bg-primary-50"
 9 | 						:to="n.link"
10 | 						>{{ n.name }}</NuxtLink
11 | 					>
12 | 				</template>
13 | 			</nav>
14 | 		</div>
15 | 	</header>
16 | </template>
17 | 
18 | <script setup>
19 | 	const menu = ref([
20 | 		{ name: "Books", link: "/" },
21 | 		{ name: "Authors", link: "/authors" },
22 | 	]);
23 | </script>
24 | 
25 | <style scoped>
26 | 	.router-link-active.link {
27 | 		@apply text-primary bg-primary-50;
28 | 	}
29 | </style>
30 | 


--------------------------------------------------------------------------------
/composables/authorStore.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from "pinia";
 2 | import { IAuthor } from "~~/types";
 3 | import useToast from "./useToast";
 4 | 
 5 | export const useAuthorStore = defineStore("author-store", {
 6 | 	state: () => ({
 7 | 		authors: [] as IAuthor[],
 8 | 	}),
 9 | 	actions: {
10 | 		// Get all authors from DB
11 | 		async getAll() {
12 | 			try {
13 | 				let data = await $fetch<IAuthor[]>("/api/authors");
14 | 				this.authors = data;
15 | 				return data as IAuthor[];
16 | 			} catch (e) {
17 | 				useToast().error(e.message);
18 | 			}
19 | 		},
20 | 		// Create a new author
21 | 		async create(name: string) {
22 | 			await $fetch("/api/authors/create", {
23 | 				method: "POST",
24 | 				body: { name },
25 | 			})
26 | 				.catch((e) => {
27 | 					useToast().error(e.data.message);
28 | 				})
29 | 				.then(async () => {
30 | 					await this.getAll();
31 | 					useToast().success("Author created");
32 | 				});
33 | 		},
34 | 		// Update an author
35 | 		async update(id: string, name: string) {
36 | 			await $fetch(`/api/authors/${id}`, {
37 | 				method: "PUT",
38 | 				body: { name },
39 | 			})
40 | 				.catch((e) => {
41 | 					useToast().error(e.data.message);
42 | 				})
43 | 				.then(async () => {
44 | 					await this.getAll();
45 | 					useToast().success("Author updated");
46 | 				});
47 | 		},
48 | 		// delete an author
49 | 		async remove(id: string) {
50 | 			await $fetch(`/api/authors/${id}`, {
51 | 				method: "DELETE",
52 | 			})
53 | 				.catch((e) => {
54 | 					useToast().error(e.data.message);
55 | 				})
56 | 				.then(async () => {
57 | 					await this.getAll();
58 | 					useToast().success("Author removed");
59 | 				});
60 | 		},
61 | 	},
62 | });
63 | 


--------------------------------------------------------------------------------
/composables/bookStore.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from "pinia";
 2 | import { IBook } from "~~/types";
 3 | import useToast from "./useToast";
 4 | 
 5 | export const useBookStore = defineStore("book-store", {
 6 | 	state: () => ({
 7 | 		// List of all books
 8 | 		books: [] as IBook[],
 9 | 	}),
10 | 	actions: {
11 | 		// Get all books from DB
12 | 		async getAll() {
13 | 			try {
14 | 				let data = await $fetch<IBook[]>("/api/books");
15 | 				this.books = data;
16 | 				return data as IBook[];
17 | 			} catch (e) {
18 | 				useToast().error(e.message);
19 | 			}
20 | 		},
21 | 		// Create a new book
22 | 		async create(book: IBook) {
23 | 			await $fetch("/api/books/create", {
24 | 				method: "POST",
25 | 				body: book,
26 | 			})
27 | 				.catch((e) => {
28 | 					useToast().error(e.data.message);
29 | 				})
30 | 				.then(async () => {
31 | 					await this.getAll();
32 | 					useToast().success("Book created");
33 | 				});
34 | 		},
35 | 		// Update a book
36 | 		async update(id: string, book: IBook) {
37 | 			await $fetch(`/api/books/${id}`, {
38 | 				method: "PUT",
39 | 				body: book,
40 | 			})
41 | 				.catch((e) => {
42 | 					useToast().error(e.data.message);
43 | 				})
44 | 				.then(async () => {
45 | 					await this.getAll();
46 | 					useToast().success("Book updated");
47 | 				});
48 | 		},
49 | 		// delete a book
50 | 		async remove(id: string) {
51 | 			await $fetch(`/api/books/${id}`, {
52 | 				method: "DELETE",
53 | 			})
54 | 				.catch((e) => {
55 | 					useToast().error(e.data.message);
56 | 				})
57 | 				.then(async () => {
58 | 					await this.getAll();
59 | 					useToast().success("Book removed");
60 | 				});
61 | 		},
62 | 	},
63 | });
64 | 


--------------------------------------------------------------------------------
/composables/useToast.ts:
--------------------------------------------------------------------------------
1 | import { useToast as toasty } from "vue-toastification";
2 | 
3 | export default function () {
4 | 	const toast = toasty();
5 | 	// export toast function
6 | 	return toast;
7 | }
8 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 2 | export default defineNuxtConfig({
 3 |   // enable devtools
 4 |   devtools: { enabled: true },
 5 | 
 6 |   modules: ["@nuxtjs/tailwindcss", "nuxt-icon", "@pinia/nuxt"],
 7 | 
 8 |   // custom tailwindcss path
 9 |   tailwindcss: {
10 |     cssPath: "~/assets/main.css",
11 |   },
12 | 
13 |   // server config variable
14 |   runtimeConfig: {
15 |     MONGO_URI: process.env.MONGO_URI,
16 |   },
17 | 
18 |   // register nitro plugin
19 |   nitro: {
20 |     plugins: ["@/server/db/index.ts"],
21 |   },
22 | 
23 |   /// transpile  afew packages
24 |   build: {
25 |     transpile: ["@headlessui/vue", "vue-toastification", "@headlessui/tailwindcss"],
26 |   },
27 | 
28 |   compatibilityDate: "2024-08-18",
29 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "dev:clean": "rm -rf node_modules package-lock.json && npm i --force && nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "postinstall": "nuxt prepare"
10 |   },
11 |   "author": {
12 |     "email": "behon.baker@yahoo.com",
13 |     "name": "Behon Baker",
14 |     "url": "https://behonbaker.com"
15 |   },
16 |   "devDependencies": {
17 |     "@nuxtjs/tailwindcss": "^6.12.2",
18 |     "nuxt": "^3.14.1592",
19 |     "vue": "latest",
20 |     "vue-router": "latest"
21 |   },
22 |   "dependencies": {
23 |     "@headlessui/tailwindcss": "^0.2.1",
24 |     "@headlessui/vue": "^1.7.23",
25 |     "@pinia/nuxt": "^0.7.0",
26 |     "@tailwindcss/forms": "^0.5.9",
27 |     "@vee-validate/rules": "^4.14.7",
28 |     "dayjs": "^1.11.13",
29 |     "joi": "^17.13.3",
30 |     "mongoose": "^8.8.2",
31 |     "nuxt-icon": "^0.6.10",
32 |     "pinia": "^2.2.6",
33 |     "vee-validate": "^4.14.7",
34 |     "vue-toastification": "next",
35 |     "vue3-easy-data-table": "^1.5.47"
36 |   },
37 |   "overrides": {
38 |     "vue": "latest"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/pages/authors/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="min-h-screen">
 3 |     <main class="max-w-5xl px-5 mx-auto pt-7 lg:px-0">
 4 |       <!-- Page title -->
 5 |       <h1 class="text-2xl font-medium">Authors</h1>
 6 |       <p class="mt-2 text-sm text-gray-500">Manage your authors here</p>
 7 | 
 8 |       <div
 9 |         class="flex flex-col items-center justify-between mt-5 space-y-3 md:space-y-0 md:flex-row"
10 |       >
11 |         <div class="relative w-full md:mr-10 grow">
12 |           <span class="absolute -translate-y-1/2 top-1/2 left-3">
13 |             <Icon name="ep:search" size="24" class="text-gray-400" />
14 |           </span>
15 |           <input
16 |             placeholder="Search author..."
17 |             v-model="search"
18 |             type="search"
19 |             name="search"
20 |             id="search"
21 |             class="pl-11 input"
22 |           />
23 |         </div>
24 |         <button
25 |           @click="authorModal.openModal()"
26 |           class="w-full py-3.5 md:py-2.5 md:w-auto btn shrink-0"
27 |         >
28 |           Add Author
29 |         </button>
30 |       </div>
31 | 
32 |       <div class="relative mt-5 border border-gray-100 rounded-lg">
33 |         <ClientOnly>
34 |           <EasyDataTable
35 |             empty-message="No Author Found"
36 |             :search-value="search"
37 |             theme-color="#f97316"
38 |             table-class-name="eztble"
39 |             :headers="headers"
40 |             :items="authorStore.authors"
41 |           >
42 |             <!-- Show authors  -->
43 |             <template #item-name="{ name }">
44 |               <span class="font-semibold">{{ name }}</span>
45 |             </template>
46 |             <!-- Action items for table -->
47 |             <template #item-actions="author">
48 |               <div class="flex space-x-4 text-gray-500">
49 |                 <button @click="authorModal.openModal(author)">
50 |                   <Icon size="18" name="fluent:pen-24-regular" />
51 |                 </button>
52 |                 <button @click="removeAuthor(author)">
53 |                   <Icon size="18" name="fluent:delete-24-regular" />
54 |                 </button>
55 |               </div>
56 |             </template>
57 |           </EasyDataTable>
58 |         </ClientOnly>
59 |       </div>
60 |     </main>
61 |     <!-- Author modal comp -->
62 |     <AuthorModal ref="authorModal" />
63 |   </div>
64 | </template>
65 | 
66 | <script setup lang="ts">
67 |   import type { Header } from "vue3-easy-data-table";
68 |   import type { IAuthor } from "~/types";
69 | 
70 |   // Author store
71 |   const authorStore = useAuthorStore();
72 | 
73 |   // get data on page load
74 |   useAsyncData(async () => await authorStore.getAll(), {
75 |     // Remove in newer version of nuxt
76 |     // initialCache: false,
77 |   });
78 | 
79 |   // Modal ref
80 |   const authorModal = ref();
81 |   //Search for author in table
82 |   const search = ref("");
83 | 
84 |   // Method used to remove an author
85 |   const removeAuthor = async (author: IAuthor) => {
86 |     await authorStore.remove(author._id!);
87 |   };
88 | 
89 |   // Table headers
90 |   const headers: Header[] = [
91 |     { text: "Author Name", value: "name", sortable: true },
92 |     { text: "Actions", value: "actions", width: 100 },
93 |   ];
94 | </script>
95 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="min-h-screen">
  3 |     <main class="max-w-5xl px-5 mx-auto pt-7 lg:px-0">
  4 |       <!-- Page title -->
  5 |       <h1 class="text-2xl font-medium">Books</h1>
  6 |       <p class="mt-2 text-sm text-gray-500">Manage your books here</p>
  7 | 
  8 |       <div
  9 |         class="flex flex-col items-center justify-between mt-5 space-y-3 md:space-y-0 md:flex-row"
 10 |       >
 11 |         <div class="relative w-full md:mr-10 grow">
 12 |           <span class="absolute -translate-y-1/2 top-1/2 left-3">
 13 |             <Icon name="ep:search" size="24" class="text-gray-400" />
 14 |           </span>
 15 |           <input
 16 |             placeholder="Search books..."
 17 |             v-model="search"
 18 |             type="search"
 19 |             name="search"
 20 |             id="search"
 21 |             class="pl-11 input"
 22 |           />
 23 |         </div>
 24 |         <button
 25 |           @click="bookModal.openModal()"
 26 |           class="w-full py-3.5 md:py-2.5 md:w-auto btn shrink-0"
 27 |         >
 28 |           Add Book
 29 |         </button>
 30 |       </div>
 31 | 
 32 |       <div class="relative mt-5 border border-gray-100 rounded-lg">
 33 |         <ClientOnly>
 34 |           <EasyDataTable
 35 |             :search-value="search"
 36 |             empty-message="No Book Found"
 37 |             theme-color="#f97316"
 38 |             table-class-name="eztble"
 39 |             :headers="headers"
 40 |             :items="bookStore.books"
 41 |           >
 42 |             <!-- Show title with custom styles -->
 43 |             <template #item-title="{ title }">
 44 |               <span class="font-semibold">{{ title }}</span>
 45 |             </template>
 46 |             <template #item-published="{ published }">
 47 |               <span>{{ dayjs(published).format("MMM DD, YYYY") }}</span>
 48 |             </template>
 49 |             <!-- Action items for table -->
 50 |             <template #item-actions="book">
 51 |               <div class="flex space-x-4 text-gray-500">
 52 |                 <button @click="bookModal.openModal(book)">
 53 |                   <Icon size="18" name="fluent:pen-24-regular" />
 54 |                 </button>
 55 |                 <button @click="removeBook(book)">
 56 |                   <Icon size="18" name="fluent:delete-24-regular" />
 57 |                 </button>
 58 |               </div>
 59 |             </template>
 60 |           </EasyDataTable>
 61 |         </ClientOnly>
 62 |       </div>
 63 |     </main>
 64 |     <!-- Book modal comp -->
 65 |     <BookModal ref="bookModal" />
 66 |   </div>
 67 | </template>
 68 | 
 69 | <script setup lang="ts">
 70 |   // Has to be explicitly imported as a type
 71 |   import type { Header } from "vue3-easy-data-table";
 72 |   import dayjs from "dayjs";
 73 |   import type { IBook } from "~/types";
 74 | 
 75 |   // Book store from pinia
 76 |   const bookStore = useBookStore();
 77 |   // Get books with async data
 78 |   await useAsyncData("allBooks", () => bookStore.getAll(), {
 79 |     // Removed in Nuxt v3.11
 80 |     // initialCache: false,
 81 |   });
 82 | 
 83 |   // Modal refence - used to open modal
 84 |   const bookModal = ref();
 85 |   //Search for record in table
 86 |   const search = ref("");
 87 | 
 88 |   // headers for the table
 89 |   const headers: Header[] = [
 90 |     { text: "Title", value: "title", sortable: true, width: 200 },
 91 |     { text: "Published", value: "published", width: 150 },
 92 |     { text: "ISBN", value: "isbn", sortable: true },
 93 |     { text: "Page Count", value: "pageCount", sortable: true, width: 200 },
 94 |     { text: "Actions", value: "actions", width: 100 },
 95 |   ];
 96 | 
 97 |   // Method used to remove a book
 98 |   const removeBook = async (book: IBook) => {
 99 |     await bookStore.remove(book._id!);
100 |   };
101 | </script>
102 | 


--------------------------------------------------------------------------------
/plugins/datatabless.client.ts:
--------------------------------------------------------------------------------
1 | import Vue3EasyDataTable from "vue3-easy-data-table";
2 | import "vue3-easy-data-table/dist/style.css";
3 | 
4 | export default defineNuxtPlugin((app) => {
5 | 	app.vueApp.component("EasyDataTable", Vue3EasyDataTable);
6 | });
7 | 


--------------------------------------------------------------------------------
/plugins/toast.client.ts:
--------------------------------------------------------------------------------
1 | import Toast from "vue-toastification";
2 | import "vue-toastification/dist/index.css";
3 | 
4 | export default defineNuxtPlugin((app) => {
5 |     app.vueApp.use(Toast);
6 | });
7 | 


--------------------------------------------------------------------------------
/plugins/vee-validate.ts:
--------------------------------------------------------------------------------
 1 | import { defineRule } from "vee-validate";
 2 | import { required, min, min_value, max, max_value } from "@vee-validate/rules";
 3 | 
 4 | export default defineNuxtPlugin(() => {
 5 | 	defineRule("required", required);
 6 | 	defineRule("min", min);
 7 | 	defineRule("min_value", min_value);
 8 | 	defineRule("max", max);
 9 | 	defineRule("max_value", max_value);
10 | });
11 | 


--------------------------------------------------------------------------------
/server/api/authors/[id].delete.ts:
--------------------------------------------------------------------------------
 1 | import AuthorModel from "~~/server/models/Author.model";
 2 | import { AuthorSchema } from "~~/server/validation";
 3 | 
 4 | export default defineEventHandler(async (event) => {
 5 | 	// Get id from params
 6 | 	const id = event.context.params.id;
 7 | 
 8 | 	// Remove author
 9 | 	try {
10 | 		await AuthorModel.findByIdAndDelete(id);
11 | 		return { message: "Author removed" };
12 | 	} catch (e) {
13 | 		throw createError({
14 | 			message: e.message,
15 | 		});
16 | 	}
17 | });
18 | 


--------------------------------------------------------------------------------
/server/api/authors/[id].put.ts:
--------------------------------------------------------------------------------
 1 | import AuthorModel from "~~/server/models/Author.model";
 2 | import { AuthorSchema } from "~~/server/validation";
 3 | 
 4 | export default defineEventHandler(async (event) => {
 5 | 	// Get data form body
 6 | 	const body = await readBody(event);
 7 | 	//Get id from params
 8 | 	const id = event.context.params.id;
 9 | 
10 | 	// validate
11 | 	let { value, error } = AuthorSchema.validate(body, { abortEarly: true, allowUnknown: true });
12 | 	if (error) {
13 | 		throw createError({
14 | 			message: error.message.replace(/"/g, ""),
15 | 			statusCode: 400,
16 | 			fatal: false,
17 | 		});
18 | 	}
19 | 
20 | 	// Update author
21 | 	try {
22 | 		await AuthorModel.findByIdAndUpdate(id, body);
23 | 		return { message: "Author updated" };
24 | 	} catch (e) {
25 | 		throw createError({
26 | 			message: e.message,
27 | 		});
28 | 	}
29 | });
30 | 


--------------------------------------------------------------------------------
/server/api/authors/create.post.ts:
--------------------------------------------------------------------------------
 1 | import AuthorModel from "~~/server/models/Author.model";
 2 | import { AuthorSchema } from "~~/server/validation";
 3 | 
 4 | export default defineEventHandler(async (event) => {
 5 | 	// Get data form body
 6 | 	const body = await readBody(event);
 7 | 
 8 | 	// validate
 9 | 	let { value, error } = AuthorSchema.validate(body);
10 | 	if (error) {
11 | 		throw createError({
12 | 			message: error.message.replace(/"/g, ""),
13 | 			statusCode: 400,
14 | 			fatal: false,
15 | 		});
16 | 	}
17 | 
18 | 	// create author
19 | 	try {
20 | 		await AuthorModel.create(body);
21 | 		return { message: "Author created" };
22 | 	} catch (e) {
23 | 		throw createError({
24 | 			message: e.message,
25 | 		});
26 | 	}
27 | });
28 | 


--------------------------------------------------------------------------------
/server/api/authors/index.ts:
--------------------------------------------------------------------------------
1 | import AuthorModel from "~~/server/models/Author.model";
2 | 
3 | export default defineEventHandler(async (event) => {
4 | 	// return all authors
5 | 	return await AuthorModel.find();
6 | });
7 | 


--------------------------------------------------------------------------------
/server/api/books/[id].delete.ts:
--------------------------------------------------------------------------------
 1 | import BookModel from "~~/server/models/Book.model";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 | 	// Get id from params
 5 | 	const id = event.context.params.id;
 6 | 
 7 | 	// Remove book
 8 | 	try {
 9 | 		await BookModel.findByIdAndDelete(id);
10 | 		return { message: "Book removed" };
11 | 	} catch (e) {
12 | 		throw createError({
13 | 			message: e.message,
14 | 		});
15 | 	}
16 | });
17 | 


--------------------------------------------------------------------------------
/server/api/books/[id].put.ts:
--------------------------------------------------------------------------------
 1 | import BookModel from "~~/server/models/Book.model";
 2 | import { BookSchema } from "~~/server/validation";
 3 | 
 4 | export default defineEventHandler(async (event) => {
 5 | 	// Get data form body
 6 | 	const body = await readBody(event);
 7 | 	// get id from params
 8 | 	const id = event.context.params.id;
 9 | 
10 | 	// validate
11 | 	let { error } = BookSchema.validate(body, { abortEarly: true, allowUnknown: true });
12 | 	if (error) {
13 | 		throw createError({
14 | 			message: error.message.replace(/"/g, ""),
15 | 			statusCode: 400,
16 | 			fatal: false,
17 | 		});
18 | 	}
19 | 
20 | 	// Update book
21 | 	try {
22 | 		await BookModel.findByIdAndUpdate(id, body);
23 | 		return { message: "Author updated" };
24 | 	} catch (e) {
25 | 		throw createError({
26 | 			message: e.message,
27 | 		});
28 | 	}
29 | });
30 | 


--------------------------------------------------------------------------------
/server/api/books/create.post.ts:
--------------------------------------------------------------------------------
 1 | import BookModel from "~~/server/models/Book.model";
 2 | import { BookSchema } from "~~/server/validation";
 3 | 
 4 | export default defineEventHandler(async (event) => {
 5 | 	// Get data form body
 6 | 	const body = await readBody(event);
 7 | 
 8 | 	// validate
 9 | 	let { error } = BookSchema.validate(body);
10 | 	if (error) {
11 | 		throw createError({
12 | 			message: error.message.replace(/"/g, ""),
13 | 			statusCode: 400,
14 | 			fatal: false,
15 | 		});
16 | 	}
17 | 
18 | 	// create book
19 | 	try {
20 | 		await BookModel.create(body);
21 | 		return { message: "Book created" };
22 | 	} catch (e) {
23 | 		throw createError({
24 | 			message: e.message,
25 | 		});
26 | 	}
27 | });
28 | 


--------------------------------------------------------------------------------
/server/api/books/index.ts:
--------------------------------------------------------------------------------
1 | import BookModel from "~~/server/models/Book.model";
2 | 
3 | export default defineEventHandler(async (event) => {
4 | 	// get all books & populate the authors
5 | 	return await BookModel.find().populate("authors");
6 | });
7 | 


--------------------------------------------------------------------------------
/server/db/index.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | // nitro has to be imported as a type, otherwise it will throw an error
 3 | import type { Nitro } from "nitropack";
 4 | 
 5 | // Nitro plugin
 6 | // Thanks to https://github.com/UnderKoen for the answer to this
 7 | // https://github.com/nuxt/framework/discussions/4923
 8 | export default async (_nitroApp: Nitro) => {
 9 |   //run your connect code here
10 |   const config = useRuntimeConfig();
11 |   // connect to mongodb
12 |   mongoose
13 |     .connect(config.MONGO_URI)
14 |     .then(() => console.log(`Connected to DB`))
15 |     .catch((e) => console.log(e));
16 | };
17 | 


--------------------------------------------------------------------------------
/server/models/Author.model.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | // author schema
 4 | const schema: mongoose.Schema = new mongoose.Schema(
 5 | 	{
 6 | 		name: {
 7 | 			type: String,
 8 | 			requied: true,
 9 | 		},
10 | 	},
11 | 	{ timestamps: true }
12 | );
13 | 
14 | // author model
15 | export default mongoose.model("Author", schema);
16 | 


--------------------------------------------------------------------------------
/server/models/Book.model.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | // book schema
 4 | const schema: mongoose.Schema = new mongoose.Schema(
 5 | 	{
 6 | 		title: {
 7 | 			type: String,
 8 | 			requied: true,
 9 | 		},
10 | 		published: {
11 | 			type: Date,
12 | 			required: true,
13 | 		},
14 | 		isbn: String,
15 | 		authors: [
16 | 			{
17 | 				type: mongoose.Schema.Types.ObjectId,
18 | 				ref: "Author",
19 | 			},
20 | 		],
21 | 		pageCount: Number,
22 | 	},
23 | 	{ timestamps: true }
24 | );
25 | 
26 | // book model
27 | export default mongoose.model("Book", schema);
28 | 


--------------------------------------------------------------------------------
/server/validation.ts:
--------------------------------------------------------------------------------
 1 | import Joi from "joi";
 2 | 
 3 | // author validation
 4 | export const AuthorSchema = Joi.object({
 5 | 	name: Joi.string().min(3).required(),
 6 | });
 7 | 
 8 | // book validation
 9 | export const BookSchema = Joi.object({
10 | 	title: Joi.string().min(3).required(),
11 | 	isbn: Joi.string().min(3).required(),
12 | 	authors: Joi.array(),
13 | 	published: Joi.date().required(),
14 | 	pageCount: Joi.number(),
15 | });
16 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require("tailwindcss/colors");
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 | 	content: [],
 6 | 	theme: {
 7 | 		extend: {
 8 | 			fontFamily: {
 9 | 				sans: ["Inter"],
10 | 			},
11 | 			colors: {
12 | 				primary: {
13 | 					DEFAULT: colors.orange[500],
14 | 					...colors.orange,
15 | 				},
16 | 			},
17 | 		},
18 | 	},
19 | 	plugins: [require("@tailwindcss/forms"), require("@headlessui/tailwindcss")],
20 | };
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
 1 | export interface IBook {
 2 | 	_id?: string;
 3 | 	title: string;
 4 | 	isbn: string;
 5 | 	pageCount: number;
 6 | 	published: string;
 7 | 	author: IAuthor;
 8 | }
 9 | 
10 | export interface IAuthor {
11 | 	name: string;
12 | 	_id?: string;
13 | }
14 | 


--------------------------------------------------------------------------------