├── .eslintrc.js
├── .gitignore
├── README.md
├── app.vue
├── assets
    └── css
    │   ├── _scrollbars.scss
    │   ├── main.scss
    │   ├── tailwind.css
    │   └── utils
    │       ├── _mixins.scss
    │       └── global.scss
├── components
    ├── elements
    │   ├── ElInfiniteLoad
    │   │   └── ElInfiniteLoad.vue
    │   └── ElPagination
    │   │   └── ElPagination.vue
    └── global
    │   ├── ElDataLoad
    │       └── ElDataLoad.vue
    │   ├── ElGithubExampleBanner
    │       └── ElGithubExampleBanner.vue
    │   └── ElLoadingIntro
    │       └── ElLoadingIntro.vue
├── composables
    ├── useHelpers.ts
    └── usePagination.ts
├── content
    ├── 1.index.md
    ├── 2.about.md
    └── 3.blog
    │   ├── 0.index.md
    │   ├── 1.post-1.md
    │   ├── 2.post-4.md
    │   ├── 3.post-3.md
    │   ├── 4.post-4.md
    │   ├── 5.post-5.md
    │   └── 6.post-6.md
├── layouts
    ├── default.vue
    ├── scrollToAdvanced.vue
    └── scrollToSimple.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── examples
    │   ├── data-fetching
    │   │   └── infinite-load
    │   │   │   └── index.vue
    │   ├── data-table
    │   │   └── simple
    │   │   │   └── index.vue
    │   ├── nuxt-content
    │   │   └── infinite-load
    │   │   │   └── index.vue
    │   ├── pagination
    │   │   └── simple
    │   │   │   └── index.vue
    │   └── scroll-to
    │   │   └── simple
    │   │       └── index.vue
    ├── index.vue
    └── mock
    │   └── scroll-to
    │       ├── page-1
    │           └── index.vue
    │       └── page-2
    │           └── index.vue
├── plugins
    └── vercel.client.ts
├── public
    ├── favicon.svg
    └── logo.svg
├── tailwind.config.js
└── tsconfig.json


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // .eslintrc.js
 2 | module.exports = {
 3 |   env: {
 4 |     browser: true,
 5 |     es2021: true,
 6 |     node: true,
 7 |   },
 8 |   extends: [
 9 |     "plugin:@typescript-eslint/recommended",
10 |     "plugin:nuxt/recommended",
11 |     "plugin:vue/vue3-recommended",
12 |     "plugin:prettier/recommended",
13 |   ],
14 |   parserOptions: {
15 |     ecmaVersion: "latest",
16 |     parser: "@typescript-eslint/parser",
17 |     sourceType: "module",
18 |   },
19 |   plugins: ["@typescript-eslint"],
20 |   rules: {
21 |     "@typescript-eslint/no-explicit-any": "off",
22 |     "@typescript-eslint/no-non-null-assertion": "off",
23 |     "vue/no-v-html": "off",
24 |     camelcase: "off",
25 |     "prettier/prettier": [
26 |       "error",
27 |       {
28 |         endOfLine: "auto",
29 |       },
30 |     ],
31 |   },
32 | };
33 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Examples
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | [Check out example](https://nuxt-3-examples.vercel.app/) that was deployed on Vercel
 6 | 
 7 | ## Setup
 8 | 
 9 | Make sure to install the dependencies:
10 | 
11 | ```bash
12 | # npm
13 | npm install
14 | ```
15 | 
16 | ## Development Server
17 | 
18 | Start the development server on http://localhost:3000
19 | 
20 | ```bash
21 | npm run dev
22 | ```
23 | 
24 | ## Production
25 | 
26 | Build the application for production:
27 | 
28 | ```bash
29 | npm run build
30 | ```
31 | 
32 | Locally preview production build:
33 | 
34 | ```bash
35 | npm run preview
36 | ```
37 | 
38 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
39 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NuxtLayout>
 3 |     <Html lang="en">
 4 |       <Head>
 5 |         <Title>Nuxt 3 - Learn by Examples</Title>
 6 |         <Meta name="language" content="en" />
 7 |         <Meta
 8 |           name="keywords"
 9 |           content="nuxt, nuxt.js, nuxt3, vue, vue.js, vue3, examples, javascript, github, tailwind, TailwindCSS, coding, learning"
10 |         />
11 |         <Meta name="og:title" content="Nuxt 3 - Learn by Examples" />
12 |         <Meta name="twitter:title" content="Nuxt 3 - Learn by Examples" />
13 |         <Meta
14 |           name="description"
15 |           content="Nuxt 3 project with a lot of different examples."
16 |         />
17 |         <Meta
18 |           name="og:description"
19 |           content="Nuxt 3 project with a lot of different examples."
20 |         />
21 |         <Meta
22 |           name="twitter:description"
23 |           content="Nuxt 3 project with a lot of different examples."
24 |         />
25 |         <Meta name="og:image" content="/favicon.svg" />
26 |         <Meta name="twitter:image" content="/favicon.svg" />
27 |         <Meta name="og:site_name" content="/favicon.svg" />
28 |         <Meta name="twitter:site" content="/favicon.svg" />
29 |         <Meta
30 |           name="url"
31 |           :content="`https://nuxt-3-examples.vercel.app${$route?.path}`"
32 |         />
33 |         <Meta
34 |           name="og:url"
35 |           :content="`https://nuxt-3-examples.vercel.app${$route?.path}`"
36 |         />
37 |         <Link rel="icon" type="image/x-icon" href="/favicon.svg" />
38 |         <Link rel="apple-touch-icon" type="image/svg" href="/favicon.svg" />
39 |         <Link rel="apple-touch-startup-image" href="/favicon.svg" />
40 |       </Head>
41 |     </Html>
42 |     <NuxtPage />
43 |     <!--    <el-loading-intro />-->
44 |   </NuxtLayout>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/assets/css/_scrollbars.scss:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --scrollbar-bg-color: theme("colors.primary.800");
 3 |   --scrollbar-handle-color: theme("colors.primary.700");
 4 |   --scrollbar-handle-color-hover: theme("colors.primary.600");
 5 | }
 6 | 
 7 | body {
 8 |   // Firefox
 9 |   scrollbar-color: var(--scrollbar-bg-color) var(--scrollbar-handle-color);
10 |   scrollbar-width: thin;
11 |   // Width
12 |   &::-webkit-scrollbar {
13 |     @apply w-1.5 h-1.5;
14 |   }
15 |   &::-webkit-scrollbar:hover {
16 |     @apply w-2;
17 |   }
18 |   // Track
19 |   &::-webkit-scrollbar-track {
20 |     @apply bg-[var(--scrollbar-bg-color)];
21 |   }
22 |   // Handle
23 |   &::-webkit-scrollbar-thumb {
24 |     @apply border border-[var(--scrollbar-bg-color)];
25 |     @apply bg-[var(--scrollbar-handle-color)];
26 |   }
27 |   // Hover
28 |   &::-webkit-scrollbar-thumb:hover {
29 |     @apply bg-[var(--scrollbar-handle-color-hover)];
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/assets/css/main.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 2 | 
 3 | @import "scrollbars";
 4 | 
 5 | body {
 6 |   -webkit-font-smoothing: antialiased;
 7 |   font-family: 'Roboto', sans-serif;
 8 |   @apply bg-neutral-100;
 9 | }
10 | 
11 | html, body, #__nuxt {
12 |   @apply min-h-screen;
13 | }
14 | 
15 | .container__main {
16 |   @apply p-6 pb-0 pt-8;
17 | }


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/assets/css/utils/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin container-padding {
 2 |   @apply px-4;
 3 |   @apply sm:px-8;
 4 |   @apply md:px-10;
 5 |   @apply lg:px-12;
 6 | }
 7 | 
 8 | @mixin container {
 9 |   @apply w-full mx-auto;
10 |   @apply sm:max-w-[750px];
11 |   @apply md:max-w-[970px];
12 |   @apply lg:max-w-[1170px];
13 |   @include container-padding;
14 | }
15 | 
16 | @mixin container-small {
17 |   @apply  w-full mx-auto;
18 |   @apply  sm:max-w-[750px];
19 |   @include container-padding;
20 | }
21 | 
22 | @mixin container-medium {
23 |   @apply  w-full mx-auto;
24 |   @apply  sm:max-w-[750px];
25 |   @apply  md:max-w-[970px];
26 |   @include container-padding;
27 | }
28 | 
29 | @mixin media-md-max {
30 |   @media only screen and (max-width: 767px) {
31 |     @content
32 |   }
33 | }
34 | 
35 | @mixin transition {
36 |   transition: 0.2s linear;
37 | }
38 | 
39 | @mixin line-clamp($i) {
40 |   overflow: hidden;
41 |   display: -webkit-box;
42 |   -webkit-box-orient: vertical;
43 |   -webkit-line-clamp: $i;
44 | }


--------------------------------------------------------------------------------
/assets/css/utils/global.scss:
--------------------------------------------------------------------------------
1 | @import "mixins";


--------------------------------------------------------------------------------
/components/elements/ElInfiniteLoad/ElInfiniteLoad.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <client-only>
 3 |     <infinite-loading @infinite="$emit('load-data', $event)">
 4 |       <template #spinner>
 5 |         <div class="w-full flex items-center justify-center py-4">
 6 |           <svg
 7 |             class="animate-spin h-8 w-8 text-emerald-500"
 8 |             xmlns="http://www.w3.org/2000/svg"
 9 |             fill="none"
10 |             viewBox="0 0 24 24"
11 |           >
12 |             <circle
13 |               class="opacity-25"
14 |               cx="12"
15 |               cy="12"
16 |               r="10"
17 |               stroke="currentColor"
18 |               stroke-width="4"
19 |             />
20 |             <path
21 |               class="opacity-75"
22 |               fill="currentColor"
23 |               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
24 |             />
25 |           </svg>
26 |         </div>
27 |       </template>
28 |       <template #complete>
29 |         <div class="hidden">Loaded</div>
30 |       </template>
31 |       <template #error="{ retry }">
32 |         <button class="hidden" @click="retry">Error. Click to retry.</button>
33 |       </template>
34 |     </infinite-loading>
35 |   </client-only>
36 | </template>
37 | 
38 | <script setup>
39 | // DOC: https://vue3-infinite-loading.netlify.app/
40 | import InfiniteLoading from "v3-infinite-loading";
41 | import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots
42 | defineEmits(["load-data"]);
43 | </script>
44 | 


--------------------------------------------------------------------------------
/components/elements/ElPagination/ElPagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex justify-between items-center gap-4">
  3 |     <ul>
  4 |       <li
  5 |         v-if="!hideSearch && page <= total"
  6 |         class="el__pagination_item el__pagination_item--search"
  7 |       >
  8 |         <label for="goToPage">Search for page...</label>
  9 |         <input
 10 |           id="goToPage"
 11 |           v-model="inputPage"
 12 |           aria-label="Search for page..."
 13 |           type="text"
 14 |           placeholder="..."
 15 |         />
 16 |       </li>
 17 |     </ul>
 18 |     <ul
 19 |       v-if="total > 1"
 20 |       class="el__pagination"
 21 |       :class="[`el__pagination--${props?.type || 'default'}`]"
 22 |     >
 23 |       <li
 24 |         v-if="page > 1"
 25 |         class="el__pagination_item el__pagination_item--first"
 26 |       >
 27 |         <button type="button" aria-label="Move to first page" @click="page = 1">
 28 |           <Icon name="material-symbols:first-page" />
 29 |         </button>
 30 |       </li>
 31 |       <li
 32 |         v-if="page - 1 > 1"
 33 |         class="el__pagination_item el__pagination_item--backward"
 34 |       >
 35 |         <button
 36 |           type="button"
 37 |           aria-label="Move to previous page"
 38 |           @click="page = page - 1"
 39 |         >
 40 |           <Icon name="grommet-icons:form-previous" />
 41 |         </button>
 42 |       </li>
 43 |       <template
 44 |         v-for="prevPage in arrayCreate(prevShowCount).reverse()"
 45 |         :key="`prevPage--${prevPage._id}}`"
 46 |       >
 47 |         <li
 48 |           v-if="page - prevPage._id > 0"
 49 |           class="el__pagination_item el__pagination_item--prev"
 50 |         >
 51 |           <button
 52 |             type="button"
 53 |             :aria-label="`Move to page ${page - prevPage._id}`"
 54 |             @click="page = page - prevPage._id"
 55 |             v-text="page - prevPage._id"
 56 |           />
 57 |         </li>
 58 |       </template>
 59 |       <li class="el__pagination_item el__pagination_item--current">
 60 |         <button type="button" v-text="page" />
 61 |       </li>
 62 |       <template
 63 |         v-for="nextPage in arrayCreate(nextShowCount)"
 64 |         :key="`nextPage--${nextPage._id}}`"
 65 |       >
 66 |         <li
 67 |           v-if="page + nextPage._id <= total"
 68 |           class="el__pagination_item el__pagination_item--next"
 69 |         >
 70 |           <button
 71 |             type="button"
 72 |             :aria-label="`Move to page ${page + nextPage._id}`"
 73 |             @click="page = page + nextPage._id"
 74 |             v-text="page + nextPage._id"
 75 |           />
 76 |         </li>
 77 |       </template>
 78 |       <li
 79 |         v-if="page + 1 < total"
 80 |         class="el__pagination_item el__pagination_item--forward"
 81 |       >
 82 |         <button
 83 |           type="button"
 84 |           aria-label="Move to next page"
 85 |           @click="page = page + 1"
 86 |         >
 87 |           <Icon name="grommet-icons:form-next" />
 88 |         </button>
 89 |       </li>
 90 |       <li
 91 |         v-if="page < total"
 92 |         class="el__pagination_item el__pagination_item--last"
 93 |       >
 94 |         <button
 95 |           type="button"
 96 |           aria-label="Move to last page"
 97 |           @click="page = total"
 98 |         >
 99 |           <Icon name="material-symbols:last-page" />
100 |         </button>
101 |       </li>
102 |     </ul>
103 |   </div>
104 | </template>
105 | 
106 | <script lang="ts" setup>
107 | import debounce from "lodash-es/debounce";
108 | const props = defineProps<{
109 |   type?: "square" | "rounded";
110 |   total: number;
111 |   prevShowCount: number;
112 |   nextShowCount: number;
113 |   modelValue: number;
114 |   query?: boolean;
115 |   hideSearch?: boolean;
116 |   disableScrollTop?: boolean;
117 | }>();
118 | 
119 | const page = ref<number>(props?.modelValue);
120 | 
121 | watch(
122 |   () => props?.modelValue,
123 |   async (val) => {
124 |     console.log("update");
125 |     page.value = val;
126 |   }
127 | );
128 | 
129 | const emit = defineEmits<{
130 |   (event: "update:modelValue", payload: number): void;
131 | }>();
132 | 
133 | const { arrayCreate } = useHelpers();
134 | 
135 | const inputPage = ref(page.value);
136 | if (!props?.hideSearch) {
137 |   watch(inputPage, (newInputPage) => {
138 |     validatePage(newInputPage);
139 |   });
140 | 
141 |   const validatePage = debounce((newInputPage) => {
142 |     const newInputPageValue = +newInputPage;
143 |     if (newInputPageValue > 0 && newInputPageValue <= props?.total) {
144 |       page.value = newInputPageValue;
145 |     } else {
146 |       inputPage.value = page.value;
147 |     }
148 |   }, 1000);
149 | }
150 | 
151 | if (props?.query) {
152 |   const route = useRoute();
153 |   const router = useRouter();
154 | 
155 |   const query = computed(() => {
156 |     return route.query;
157 |   });
158 | 
159 |   // Initial page population disable for now since we do it in root component
160 |   // if (query.value.page) {
161 |   //   page.value = +query.value.page || props?.modelValue;
162 |   //   emit("update:modelValue", +page.value);
163 |   // }
164 | 
165 |   watch(page, (newPage) => {
166 |     router.push({ query: { ...query.value, page: `${newPage}` } });
167 |     inputPage.value = +newPage;
168 |     emit("update:modelValue", +newPage);
169 |     if (!props?.disableScrollTop) {
170 |       window.scrollTo({ top: 0, behavior: "smooth" });
171 |     }
172 |   });
173 | } else {
174 |   watch(page, (newPage) => {
175 |     inputPage.value = +newPage;
176 |     emit("update:modelValue", +newPage);
177 |     if (!props?.disableScrollTop) {
178 |       window.scrollTo({ top: 0, behavior: "smooth" });
179 |     }
180 |   });
181 | }
182 | </script>
183 | 
184 | <style lang="scss">
185 | .el__pagination {
186 |   @apply flex items-center;
187 |   &--default {
188 |     @apply gap-1;
189 |     .el__pagination_item {
190 |       @apply rounded-sm;
191 |     }
192 |   }
193 |   &--square {
194 |     .el__pagination_item {
195 |       @apply border border-blue-500;
196 |       &--search {
197 |         @apply w-14;
198 |       }
199 |       &--current {
200 |         @apply text-white;
201 |       }
202 |       &:not(:last-child) {
203 |         border-right: none;
204 |       }
205 |     }
206 |   }
207 |   &--rounded {
208 |     @apply gap-1;
209 |     .el__pagination_item {
210 |       @apply border border-blue-500 rounded-full;
211 |       &--search {
212 |         @apply w-10 overflow-hidden;
213 |         input {
214 |           @apply rounded-full;
215 |         }
216 |       }
217 |     }
218 |   }
219 |   &_item {
220 |     @apply w-10 h-10 flex items-center justify-center text-center text-blue-500;
221 |     button {
222 |       @apply w-full h-full;
223 |     }
224 |     &--first,
225 |     &--backward,
226 |     &--prev,
227 |     &--current,
228 |     &--next,
229 |     &--forward,
230 |     &--last {
231 |       @apply hover:bg-blue-500 hover:text-white;
232 |     }
233 |     &--first,
234 |     &--backward,
235 |     &--prev,
236 |     &--next,
237 |     &--forward,
238 |     &--last {
239 |       @apply cursor-pointer;
240 |     }
241 |     &--first,
242 |     &--backward,
243 |     &--forward,
244 |     &--last {
245 |       button {
246 |         svg {
247 |           @apply w-5 h-5;
248 |         }
249 |       }
250 |     }
251 |     &--current {
252 |       @apply bg-blue-500 text-white;
253 |     }
254 |     &--search {
255 |       @apply w-auto bg-primary-800 overflow-hidden rounded-sm;
256 |       label {
257 |         @apply block whitespace-nowrap px-4 text-primary-200 text-xs;
258 |       }
259 |       input {
260 |         @apply border-l border-primary-900 bg-primary-800 text-white w-10 h-full focus:outline-none text-center;
261 |       }
262 |     }
263 |   }
264 | }
265 | </style>
266 | 


--------------------------------------------------------------------------------
/components/global/ElDataLoad/ElDataLoad.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full flex items-center justify-center py-4">
 3 |     <svg
 4 |       class="animate-spin h-8 w-8 text-emerald-500"
 5 |       xmlns="http://www.w3.org/2000/svg"
 6 |       fill="none"
 7 |       viewBox="0 0 24 24"
 8 |     >
 9 |       <circle
10 |         class="opacity-25"
11 |         cx="12"
12 |         cy="12"
13 |         r="10"
14 |         stroke="currentColor"
15 |         stroke-width="4"
16 |       />
17 |       <path
18 |         class="opacity-75"
19 |         fill="currentColor"
20 |         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
21 |       />
22 |     </svg>
23 |   </div>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/components/global/ElGithubExampleBanner/ElGithubExampleBanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     class="w-full max-w-[640px] mx-auto h-10 sticky top-0 right-0 left-0 bg-primary-900 bg-opacity-90 border border-primary-800 border-opacity-50 border-t-transparent hover:text-emerald-500 text-center flex items-center justify-center text-primary-200"
 4 |     :href="`https://github.com/ndragun92/nuxt3-examples/blob/main${githubPath}`"
 5 |     target="_blank"
 6 |   >
 7 |     <span class="flex items-center gap-2 text-sm">
 8 |       <Icon size="20" name="mdi:github" />
 9 |       <span
10 |         >View this example on
11 |         <span class="text-emerald-500 font-bold">GitHub</span></span
12 |       >
13 |     </span>
14 |   </a>
15 | </template>
16 | 
17 | <script lang="ts" setup>
18 | const route = useRoute();
19 | const githubPath = computed(() => `/pages/${route.path}/index.vue`);
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/global/ElLoadingIntro/ElLoadingIntro.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loading__bg" :class="{ 'loading__bg--finish': loading === 100 }">
 3 |     <div
 4 |       class="loading__progress h-full flex items-center"
 5 |       :style="{ width: `${loading}%` }"
 6 |     >
 7 |       <div class="flex items-center h-full gap-4 pr-8 justify-end">
 8 |         <span class="relative -top-[1px] flex h-3 w-3">
 9 |           <span
10 |             class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
11 |           />
12 |           <span
13 |             class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"
14 |           />
15 |         </span>
16 |         <span class="uppercase font-bold tracking-widest">Loading</span>
17 |       </div>
18 |     </div>
19 |     <div
20 |       class="loading__progress loading__progress--mobile flex justify-center"
21 |       :style="{ height: `${loading}%` }"
22 |     >
23 |       <div class="flex items-center gap-2 pr-4 h-full">
24 |         <span class="relative -top-[1px] flex h-3 w-3">
25 |           <span
26 |             class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
27 |           />
28 |           <span
29 |             class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"
30 |           />
31 |         </span>
32 |         <span class="uppercase font-bold tracking-widest">Loading</span>
33 |       </div>
34 |     </div>
35 |     <div class="fixed right-0 bottom-10 left-0 z-50 text-center">
36 |       <button
37 |         class="bg-black bg-opacity-10 border border-primary-800 border-opacity-50 mx-auto py-2 px-4 uppercase text-xs hover:bg-opacity-50"
38 |         type="button"
39 |         @click="loading = 100"
40 |       >
41 |         Skip Animation
42 |       </button>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script lang="ts" setup>
48 | import { promiseTimeout } from "@vueuse/core";
49 | 
50 | const loading = ref(25);
51 | onMounted(async () => {
52 |   await promiseTimeout(1250);
53 |   onProgress(45);
54 |   await promiseTimeout(1750);
55 |   onProgress(60);
56 |   await promiseTimeout(1000);
57 |   onProgress(95);
58 |   await promiseTimeout(1250);
59 |   onProgress(100);
60 | });
61 | 
62 | const onProgress = (progress) => {
63 |   if (loading.value === 100) return;
64 |   loading.value = progress;
65 | };
66 | </script>
67 | 
68 | <style lang="scss" scoped>
69 | .loading__bg {
70 |   @apply fixed top-0 right-0 bottom-0 left-0 bg-white z-50 opacity-100;
71 |   transition: 1s;
72 |   &--finish {
73 |     @apply opacity-0 pointer-events-none;
74 |   }
75 | }
76 | .loading__progress {
77 |   @apply fixed top-0 right-0 bottom-0 left-0 bg-primary-900 z-50 w-[10%] hidden md:block;
78 |   transition: width 1s;
79 |   &--mobile {
80 |     transition: height 1s;
81 |     @apply w-full h-[10%] flex md:hidden;
82 |   }
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/composables/useHelpers.ts:
--------------------------------------------------------------------------------
 1 | export default function useHelpers() {
 2 |   const arrayCreate = (count = 1, data = {}) => {
 3 |     return [...Array(count)].map((_, i) => {
 4 |       return {
 5 |         _id: i + 1,
 6 |         ...data,
 7 |       };
 8 |     });
 9 |   };
10 | 
11 |   const toggleValue = ref(false);
12 |   const toggle = () => {
13 |     toggleValue.value = !toggleValue.value;
14 |   };
15 | 
16 |   return { arrayCreate, toggleValue, toggle };
17 | }
18 | 


--------------------------------------------------------------------------------
/composables/usePagination.ts:
--------------------------------------------------------------------------------
 1 | export default function usePagination() {
 2 |   const router = useRouter();
 3 |   const route = useRoute();
 4 | 
 5 |   const query = computed(() => {
 6 |     return route.query;
 7 |   });
 8 |   const getCurrentPage = (query = false, page: number) => {
 9 |     if (query) {
10 |       const route = useRoute();
11 | 
12 |       const query = computed(() => {
13 |         return route.query;
14 |       });
15 | 
16 |       if (query.value.page) {
17 |         return +query.value.page;
18 |       }
19 |     }
20 |     return page;
21 |   };
22 | 
23 |   const getTotalPages = (total: number, limit: number): number => {
24 |     return Math.ceil(+total / +limit) || 0;
25 |   };
26 | 
27 |   const resetPageQuery = () => {
28 |     router.push({ query: { ...query.value, page: undefined } });
29 |   };
30 | 
31 |   return { getCurrentPage, getTotalPages, resetPageQuery, query };
32 | }
33 | 


--------------------------------------------------------------------------------
/content/1.index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Home Page
3 | description: Home page
4 | navigation: true
5 | ---
6 | 
7 | # Home Page


--------------------------------------------------------------------------------
/content/2.about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: About us
3 | navigation: true
4 | ---
5 | 
6 | # About
7 | 
8 | About us content


--------------------------------------------------------------------------------
/content/3.blog/0.index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Блог
3 | description: Blog
4 | navigation: true
5 | ---
6 | 
7 | ::blog-posts
8 | ::


--------------------------------------------------------------------------------
/content/3.blog/1.post-1.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: blog-post
  3 | title: 'My Page Title'
  4 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
  5 | date: 10.01.2023
  6 | image:
  7 |   src: 'https://via.placeholder.com/350x150/ff5722'
  8 |   alt: 'An image showcasing My Page.'
  9 |   width: 400
 10 |   height: 300
 11 | head:
 12 |   meta:
 13 |     - name: 'keywords'
 14 |       content: 'nuxt, vue, content'
 15 |     - name: 'robots'
 16 |       content: 'index, follow'
 17 |     - name: 'author'
 18 |       content: 'Fubon'
 19 |     - name: 'copyright'
 20 |       content: '© 2023 Fubon'
 21 | ---
 22 | 
 23 | # My first blog post
 24 | 
 25 | ```js{1,3-5}[server.js]
 26 | const http = require('http')
 27 | const bodyParser = require('body-parser')
 28 | 
 29 | http.createServer((req, res) => {
 30 |   bodyParser.parse(req, (error, body) => {
 31 |     res.end(body)
 32 |   })
 33 | }).listen(3000)
 34 | ```
 35 | 
 36 | ::InfoBox{type="warning"}
 37 | Here's a handy bit of information for you!
 38 | 
 39 | #details
 40 | This will be rendered inside the `description` slot. _It's important_ to see how this **works**.
 41 | \[More information can be found here\](#)
 42 | ::
 43 | 
 44 | ::fancy-header
 45 | That text paragraph will be unwrapped.
 46 | ::
 47 | 
 48 | Welcome to my first blog post using \[content v2 module\](https://content.nuxtjs.org/)
 49 | Hey there! 👋🏾 :tada:
 50 | 
 51 | This is my first blog post learning nuxt content.
 52 | I'm currently building it using the following:
 53 | - Nuxt.js
 54 | - Nuxt Content module
 55 | - TailwindCSS
 56 |   - TailwindCSS typography
 57 | 
 58 | ## Nuxt.js
 59 | 
 60 | ### Nuxt.js
 61 | 
 62 | [Nuxt](https://nuxtjs.org/) is a powerful Vue framework that offers excellent development features such as server-side rendering.
 63 | 
 64 | ```bash
 65 | npx nuxi init nuxt-app
 66 | cd nuxt-app
 67 | yarn install
 68 | yarn dev -o
 69 | ```
 70 | 
 71 | ### First Post
 72 | 
 73 | ```javascript[file.js]{4-6,7} meta-info=val
 74 | export default () => {
 75 |   console.log('Code block')
 76 | }
 77 | ```
 78 | 
 79 | ## Как дела
 80 | 
 81 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 82 | <!--more-->
 83 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 84 | 
 85 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 86 | 
 87 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 88 | 
 89 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 90 | 
 91 | 
 92 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 93 | 
 94 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 95 | 
 96 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 97 | 
 98 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 99 | 
100 | 
101 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
102 | 
103 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
104 | 
105 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
106 | 
107 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
108 | 
109 | 
110 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
111 | 
112 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
113 | 
114 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
115 | 
116 | ## Нормально
117 | 
118 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
119 | 
120 | 
121 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
122 | 
123 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124 | 
125 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
126 | 
127 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
128 | 
129 | 
130 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
131 | 
132 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
133 | 
134 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
135 | 
136 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
137 | 
138 | 
139 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
140 | 
141 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
142 | 
143 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
144 | 
145 | ## Нормально не реально
146 | 
147 | 
148 | First in My Post :tada:


--------------------------------------------------------------------------------
/content/3.blog/2.post-4.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog-post
3 | date: 12.01.2023
4 | ---
5 | 
6 | # Second Post
7 | 
8 | First in My Post :tada:


--------------------------------------------------------------------------------
/content/3.blog/3.post-3.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog-post
3 | date: 14.01.2023
4 | ---
5 | 
6 | # Third Post
7 | 
8 | First in My Post :tada:


--------------------------------------------------------------------------------
/content/3.blog/4.post-4.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog-post
3 | date: 15.01.2023
4 | ---
5 | 
6 | # Post 4
7 | 
8 | First in My Post :tada:


--------------------------------------------------------------------------------
/content/3.blog/5.post-5.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog-post
3 | date: 16.01.2023
4 | ---
5 | 
6 | # Post 5
7 | 
8 | First in My Post :tada:


--------------------------------------------------------------------------------
/content/3.blog/6.post-6.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog-post
3 | date: 20.01.2023
4 | ---
5 | 
6 | # Post 6
7 | 
8 | First in My Post :tada:


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="min-h-screen flex flex-col bg-primary-900 text-primary-300">
  3 |     <nav
  4 |       class="bg-black bg-opacity-10 border-b border-primary-800 border-opacity-50 px-4"
  5 |     >
  6 |       <div
  7 |         class="w-full max-w-[1280px] mx-auto flex items-center justify-between h-20"
  8 |       >
  9 |         <nuxt-link to="/" class="flex items-center">
 10 |           <div class="relative">
 11 |             <img class="w-24" src="/logo.svg" alt="Logo" />
 12 |             <span class="absolute -top-2 -right-4 text-xl text-emerald-500"
 13 |               >3</span
 14 |             >
 15 |           </div>
 16 |           <sup class="uppercase text-xs ml-6 tracking-wider">Examples</sup>
 17 |         </nuxt-link>
 18 |         <div class="flex items-center gap-4">
 19 |           <a
 20 |             class="hover:text-emerald-500"
 21 |             aria-label="Github Repository"
 22 |             href="https://github.com/ndragun92/nuxt3-examples"
 23 |             target="_blank"
 24 |           >
 25 |             <Icon size="30" name="mdi:github" />
 26 |           </a>
 27 |           <a
 28 |             class="hover:text-blue-500"
 29 |             aria-label="Discord Channel"
 30 |             href="https://discord.gg/cfYJbewNcz"
 31 |             target="_blank"
 32 |           >
 33 |             <Icon size="30" name="ic:baseline-discord" />
 34 |           </a>
 35 |           <button
 36 |             aria-label="Mobile Menu"
 37 |             class="block md:hidden"
 38 |             type="button"
 39 |             @click="toggleMobileMenu"
 40 |           >
 41 |             <Icon
 42 |               v-show="showMobileMenu"
 43 |               size="30"
 44 |               name="material-symbols:close-rounded"
 45 |             />
 46 |             <Icon
 47 |               v-show="!showMobileMenu"
 48 |               size="30"
 49 |               name="charm:menu-hamburger"
 50 |             />
 51 |           </button>
 52 |         </div>
 53 |       </div>
 54 |     </nav>
 55 |     <div class="wrapper mb-10 h-full flex-1 w-full max-w-[1280px] mx-auto">
 56 |       <aside
 57 |         class="aside__mobile mt-10 md:block relative z-10 border-r border-primary-800 border-opacity-50 px-4"
 58 |         :class="{ 'aside__mobile--open': showMobileMenu }"
 59 |       >
 60 |         <div
 61 |           v-for="(categoryValue, categoryKey) in navigation"
 62 |           :key="categoryKey"
 63 |           class="mb-2"
 64 |         >
 65 |           <div
 66 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 67 |             @click="onToggleFolder(categoryKey)"
 68 |           >
 69 |             <Icon
 70 |               v-show="expandedFolders.data.includes(categoryKey)"
 71 |               class="w-6 h-6"
 72 |               name="material-symbols:folder-open-rounded"
 73 |             />
 74 |             <Icon
 75 |               v-show="!expandedFolders.data.includes(categoryKey)"
 76 |               class="w-6 h-6"
 77 |               name="material-symbols:folder-rounded"
 78 |             />
 79 |             <div
 80 |               class="relative top-[1px] truncate flex-1"
 81 |               v-text="formatCategoryName(categoryKey)"
 82 |             />
 83 |           </div>
 84 |           <ul v-if="expandedFolders.data.includes(categoryKey)" class="pl-10">
 85 |             <li v-for="link in categoryValue" :key="link.path">
 86 |               <nuxt-link
 87 |                 class="flex items-baseline gap-1 text-primary-500 hover:text-emerald-500"
 88 |                 :to="link.path"
 89 |               >
 90 |                 <Icon
 91 |                   class="relative top-[2px] text-emerald-500"
 92 |                   name="ic:baseline-minus" />
 93 |                 <span class="flex-1 text-sm" v-text="link.meta.title"
 94 |               /></nuxt-link>
 95 |             </li>
 96 |           </ul>
 97 |         </div>
 98 |       </aside>
 99 |       <main>
100 |         <slot />
101 |       </main>
102 |     </div>
103 |     <footer
104 |       class="text-center py-2 px-4 bg-black bg-opacity-10 border-t border-primary-800 border-opacity-50 text-xs flex flex-col md:flex-row items-center justify-between gap-2"
105 |     >
106 |       <a
107 |         href="https://github.com/ndragun92/nuxt3-examples"
108 |         target="_blank"
109 |         class="flex items-center gap-2"
110 |       >
111 |         <Icon class="animate-bounce" size="16" name="twemoji:star" />
112 |         <div
113 |           class="relative top-[1px] text-white"
114 |           v-text="data?.stargazers_count"
115 |         />
116 |       </a>
117 |       <div>
118 |         <a
119 |           class="text-emerald-500 hover:text-white"
120 |           href="https://ndragun92.github.io/portfolio/"
121 |           target="_blank"
122 |           >ndragun92.github.io/portfolio</a
123 |         >
124 |         <span> &copy; {{ year }} All Rights Reserved</span>
125 |       </div>
126 |       <div class="flex items-center gap-2">
127 |         <div>Made with</div>
128 |         <div class="relative">
129 |           <Icon
130 |             class="animate-ping absolute top-1 left-0"
131 |             name="twemoji:red-heart"
132 |           />
133 |           <Icon name="twemoji:red-heart" />
134 |         </div>
135 |         <div>
136 |           by
137 |           <a
138 |             class="text-bold text-white hover:underline"
139 |             href="https://www.linkedin.com/in/nemanja-dragun/"
140 |             target="_blank"
141 |             >Nemanja Dragun</a
142 |           >
143 |           in Bielefeld
144 |         </div>
145 |       </div>
146 |     </footer>
147 |   </div>
148 | </template>
149 | 
150 | <script lang="ts">
151 | export default {
152 |   name: "LayoutDefault",
153 | };
154 | </script>
155 | 
156 | <script lang="ts" setup>
157 | const { toggleValue: showMobileMenu, toggle: toggleMobileMenu } = useHelpers();
158 | 
159 | const { data } = useLazyAsyncData<{ stargazers_count: number }>(() =>
160 |   $fetch("https://api.github.com/repos/ndragun92/nuxt3-examples")
161 | );
162 | 
163 | const year = computed(() => {
164 |   return useDateFormat(useNow(), "YYYY").value;
165 | });
166 | 
167 | const router = useRouter();
168 | 
169 | const navigation = computed(() => {
170 |   const routes = router.getRoutes();
171 |   const formatRoutes = routes
172 |     .filter((route) => route.path.startsWith("/examples/"))
173 |     .map((obj) => {
174 |       return {
175 |         path: obj.path,
176 |         name: obj.name,
177 |         meta: obj.meta,
178 |       };
179 |     });
180 |   const buildNavigation = {};
181 |   formatRoutes.forEach((route) => {
182 |     const splitRoute = route.path.replace("/examples/", "").split("/");
183 |     const category = splitRoute[0];
184 |     if (!buildNavigation[category]) {
185 |       buildNavigation[category] = [];
186 |     }
187 |     buildNavigation[category].push({
188 |       ...route,
189 |     });
190 |   });
191 |   return buildNavigation;
192 | });
193 | 
194 | const formatCategoryName = (category: string) => {
195 |   switch (category) {
196 |     case "data-fetching":
197 |       return "Data Fetching";
198 |     case "data-table":
199 |       return "Data Tables";
200 |     case "nuxt-content":
201 |       return "Nuxt Content";
202 |     case "pagination":
203 |       return "Pagination";
204 |     case "scroll-to":
205 |       return "Scroll To";
206 |     default:
207 |       return category;
208 |   }
209 | };
210 | 
211 | const expandedFolders = reactive<{ data: string[] }>({ data: [] });
212 | 
213 | const onToggleFolder = (category: string) => {
214 |   if (!expandedFolders.data.includes(category)) {
215 |     expandedFolders.data.push(category);
216 |   } else {
217 |     expandedFolders.data = expandedFolders.data.filter(
218 |       (folder) => folder !== category
219 |     );
220 |   }
221 | };
222 | 
223 | onMounted(() => {
224 |   const firstCategory = Object.keys(navigation.value)[0];
225 |   // Expand first category by default
226 |   expandedFolders.data.push(firstCategory);
227 | });
228 | </script>
229 | 
230 | <style lang="scss" scoped>
231 | aside {
232 |   a {
233 |     &.router-link-active,
234 |     &:hover {
235 |       @apply text-emerald-500;
236 |     }
237 |   }
238 | }
239 | .aside__mobile {
240 |   @include media-md-max {
241 |     @apply fixed top-[calc(5rem+1px)] left-0 bottom-0 w-[300px] z-50 bg-primary-900 overflow-y-auto overflow-x-hidden p-4;
242 |     @apply -translate-x-full;
243 |     @include transition;
244 |     &--open {
245 |       @apply translate-x-0;
246 |     }
247 |   }
248 | }
249 | .wrapper {
250 |   @apply grid;
251 |   @apply grid-cols-[minmax(0,1fr)] md:grid-cols-[300px,minmax(0,1fr)];
252 | }
253 | </style>
254 | 


--------------------------------------------------------------------------------
/layouts/scrollToAdvanced.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="min-h-screen flex flex-col bg-primary-900 text-primary-300">
  3 |     <nav
  4 |       class="bg-black bg-opacity-10 border-b border-primary-800 border-opacity-50 px-4"
  5 |     >
  6 |       <div
  7 |         class="w-full max-w-[1280px] mx-auto flex items-center justify-between h-20"
  8 |       >
  9 |         <nuxt-link to="/" class="flex items-center">
 10 |           <div class="relative">
 11 |             <img class="w-24" src="/logo.svg" alt="Logo" />
 12 |             <span class="absolute -top-2 -right-4 text-xl text-emerald-500"
 13 |               >3</span
 14 |             >
 15 |           </div>
 16 |           <sup class="uppercase text-xs ml-6 tracking-wider">Examples</sup>
 17 |         </nuxt-link>
 18 |         <div class="flex items-center gap-4">
 19 |           <a
 20 |             class="hover:text-emerald-500"
 21 |             aria-label="Github Repository"
 22 |             href="https://github.com/ndragun92/nuxt3-examples"
 23 |             target="_blank"
 24 |           >
 25 |             <Icon size="30" name="mdi:github" />
 26 |           </a>
 27 |           <a
 28 |             class="hover:text-blue-500"
 29 |             aria-label="Discord Channel"
 30 |             href="https://discord.gg/cfYJbewNcz"
 31 |             target="_blank"
 32 |           >
 33 |             <Icon size="30" name="ic:baseline-discord" />
 34 |           </a>
 35 |           <button
 36 |             aria-label="Mobile Menu"
 37 |             class="block md:hidden"
 38 |             type="button"
 39 |             @click="toggleMobileMenu"
 40 |           >
 41 |             <Icon
 42 |               v-show="showMobileMenu"
 43 |               size="30"
 44 |               name="material-symbols:close-rounded"
 45 |             />
 46 |             <Icon
 47 |               v-show="!showMobileMenu"
 48 |               size="30"
 49 |               name="charm:menu-hamburger"
 50 |             />
 51 |           </button>
 52 |         </div>
 53 |       </div>
 54 |     </nav>
 55 |     <div class="wrapper mb-10 h-full flex-1 w-full max-w-[1280px] mx-auto">
 56 |       <aside
 57 |         class="aside__mobile mt-10 md:block relative z-10 border-r border-primary-800 border-opacity-50 px-4"
 58 |         :class="{ 'aside__mobile--open': showMobileMenu }"
 59 |       >
 60 |         <div class="mb-2">
 61 |           <div
 62 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 63 |           >
 64 |             <nuxt-link to="/mock/scroll-to/page-1#section1">
 65 |               <div
 66 |                 class="relative top-[1px] truncate flex-1"
 67 |                 v-text="'Page 1 (Smooth) - Section 1'"
 68 |               />
 69 |             </nuxt-link>
 70 |           </div>
 71 |         </div>
 72 |         <div class="mb-2">
 73 |           <div
 74 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 75 |           >
 76 |             <nuxt-link to="/mock/scroll-to/page-1#section2">
 77 |               <div
 78 |                 class="relative top-[1px] truncate flex-1"
 79 |                 v-text="'Page 1 (Smooth) - Section 2'"
 80 |               />
 81 |             </nuxt-link>
 82 |           </div>
 83 |         </div>
 84 |         <div class="mb-2">
 85 |           <div
 86 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 87 |           >
 88 |             <nuxt-link to="/mock/scroll-to/page-2#section1">
 89 |               <div
 90 |                 class="relative top-[1px] truncate flex-1"
 91 |                 v-text="'Page 2 - Section 1'"
 92 |               />
 93 |             </nuxt-link>
 94 |           </div>
 95 |         </div>
 96 |         <div class="mb-2">
 97 |           <div
 98 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 99 |           >
100 |             <nuxt-link to="/mock/scroll-to/page-2#section2">
101 |               <div
102 |                 class="relative top-[1px] truncate flex-1"
103 |                 v-text="'Page 2 - Section 2'"
104 |               />
105 |             </nuxt-link>
106 |           </div>
107 |         </div>
108 |       </aside>
109 |       <main>
110 |         <slot />
111 |       </main>
112 |     </div>
113 |     <footer
114 |       class="text-center py-2 px-4 bg-black bg-opacity-10 border-t border-primary-800 border-opacity-50 text-xs flex flex-col md:flex-row items-center justify-between gap-2"
115 |     >
116 |       <a
117 |         href="https://github.com/ndragun92/nuxt3-examples"
118 |         target="_blank"
119 |         class="flex items-center gap-2"
120 |       >
121 |         <Icon class="animate-bounce" size="16" name="twemoji:star" />
122 |         <div
123 |           class="relative top-[1px] text-white"
124 |           v-text="data?.stargazers_count"
125 |         />
126 |       </a>
127 |       <div>
128 |         <a
129 |           class="text-emerald-500 hover:text-white"
130 |           href="https://ndragun92.github.io/portfolio/"
131 |           target="_blank"
132 |           >ndragun92.github.io/portfolio</a
133 |         >
134 |         <span> &copy; {{ year }} All Rights Reserved</span>
135 |       </div>
136 |       <div class="flex items-center gap-2">
137 |         <div>Made with</div>
138 |         <div class="relative">
139 |           <Icon
140 |             class="animate-ping absolute top-1 left-0"
141 |             name="twemoji:red-heart"
142 |           />
143 |           <Icon name="twemoji:red-heart" />
144 |         </div>
145 |         <div>
146 |           by
147 |           <a
148 |             class="text-bold text-white hover:underline"
149 |             href="https://www.linkedin.com/in/nemanja-dragun/"
150 |             target="_blank"
151 |             >Nemanja Dragun</a
152 |           >
153 |           in Bielefeld
154 |         </div>
155 |       </div>
156 |     </footer>
157 |   </div>
158 | </template>
159 | 
160 | <script lang="ts">
161 | export default {
162 |   name: "LayoutScrollTo",
163 | };
164 | </script>
165 | 
166 | <script lang="ts" setup>
167 | const { toggleValue: showMobileMenu, toggle: toggleMobileMenu } = useHelpers();
168 | 
169 | const { data } = useLazyAsyncData<{ stargazers_count: number }>(() =>
170 |   $fetch("https://api.github.com/repos/ndragun92/nuxt3-examples")
171 | );
172 | 
173 | const year = computed(() => {
174 |   return useDateFormat(useNow(), "YYYY").value;
175 | });
176 | </script>
177 | 
178 | <style lang="scss" scoped>
179 | aside {
180 |   a {
181 |     &.router-link-active,
182 |     &:hover {
183 |       @apply text-emerald-500;
184 |     }
185 |   }
186 | }
187 | .aside__mobile {
188 |   @include media-md-max {
189 |     @apply fixed top-[calc(5rem+1px)] left-0 bottom-0 w-[300px] z-50 bg-primary-900 overflow-y-auto overflow-x-hidden p-4;
190 |     @apply -translate-x-full;
191 |     @include transition;
192 |     &--open {
193 |       @apply translate-x-0;
194 |     }
195 |   }
196 | }
197 | .wrapper {
198 |   @apply grid;
199 |   @apply grid-cols-[minmax(0,1fr)] md:grid-cols-[300px,minmax(0,1fr)];
200 | }
201 | </style>
202 | 


--------------------------------------------------------------------------------
/layouts/scrollToSimple.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="min-h-screen flex flex-col bg-primary-900 text-primary-300">
  3 |     <nav
  4 |       class="bg-black bg-opacity-10 border-b border-primary-800 border-opacity-50 px-4"
  5 |     >
  6 |       <div
  7 |         class="w-full max-w-[1280px] mx-auto flex items-center justify-between h-20"
  8 |       >
  9 |         <nuxt-link to="/" class="flex items-center">
 10 |           <div class="relative">
 11 |             <img class="w-24" src="/logo.svg" alt="Logo" />
 12 |             <span class="absolute -top-2 -right-4 text-xl text-emerald-500"
 13 |               >3</span
 14 |             >
 15 |           </div>
 16 |           <sup class="uppercase text-xs ml-6 tracking-wider">Examples</sup>
 17 |         </nuxt-link>
 18 |         <div class="flex items-center gap-4">
 19 |           <a
 20 |             class="hover:text-emerald-500"
 21 |             aria-label="Github Repository"
 22 |             href="https://github.com/ndragun92/nuxt3-examples"
 23 |             target="_blank"
 24 |           >
 25 |             <Icon size="30" name="mdi:github" />
 26 |           </a>
 27 |           <a
 28 |             class="hover:text-blue-500"
 29 |             aria-label="Discord Channel"
 30 |             href="https://discord.gg/cfYJbewNcz"
 31 |             target="_blank"
 32 |           >
 33 |             <Icon size="30" name="ic:baseline-discord" />
 34 |           </a>
 35 |           <button
 36 |             aria-label="Mobile Menu"
 37 |             class="block md:hidden"
 38 |             type="button"
 39 |             @click="toggleMobileMenu"
 40 |           >
 41 |             <Icon
 42 |               v-show="showMobileMenu"
 43 |               size="30"
 44 |               name="material-symbols:close-rounded"
 45 |             />
 46 |             <Icon
 47 |               v-show="!showMobileMenu"
 48 |               size="30"
 49 |               name="charm:menu-hamburger"
 50 |             />
 51 |           </button>
 52 |         </div>
 53 |       </div>
 54 |     </nav>
 55 |     <div class="wrapper mb-10 h-full flex-1 w-full max-w-[1280px] mx-auto">
 56 |       <aside
 57 |         class="aside__mobile mt-10 md:block relative z-10 border-r border-primary-800 border-opacity-50 px-4"
 58 |         :class="{ 'aside__mobile--open': showMobileMenu }"
 59 |       >
 60 |         <div class="mb-2">
 61 |           <div
 62 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 63 |           >
 64 |             <nuxt-link to="/examples/scroll-to/simple">
 65 |               <div
 66 |                 class="relative top-[1px] truncate flex-1"
 67 |                 v-text="'Go Back'"
 68 |               />
 69 |             </nuxt-link>
 70 |           </div>
 71 |         </div>
 72 |         <div class="mb-2">
 73 |           <div
 74 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 75 |           >
 76 |             <nuxt-link to="/mock/scroll-to/page-1#section1">
 77 |               <div
 78 |                 class="relative top-[1px] truncate flex-1 text-white"
 79 |                 v-text="'Section 1'"
 80 |               />
 81 |             </nuxt-link>
 82 |           </div>
 83 |         </div>
 84 |         <div class="mb-2">
 85 |           <div
 86 |             class="flex items-center gap-4 mb-2 cursor-pointer hover:text-emerald-500"
 87 |           >
 88 |             <nuxt-link to="/mock/scroll-to/page-1#section2">
 89 |               <div
 90 |                 class="relative top-[1px] truncate flex-1 text-white"
 91 |                 v-text="'Section 2'"
 92 |               />
 93 |             </nuxt-link>
 94 |           </div>
 95 |         </div>
 96 |       </aside>
 97 |       <main>
 98 |         <slot />
 99 |       </main>
100 |     </div>
101 |     <footer
102 |       class="text-center py-2 px-4 bg-black bg-opacity-10 border-t border-primary-800 border-opacity-50 text-xs flex flex-col md:flex-row items-center justify-between gap-2"
103 |     >
104 |       <a
105 |         href="https://github.com/ndragun92/nuxt3-examples"
106 |         target="_blank"
107 |         class="flex items-center gap-2"
108 |       >
109 |         <Icon class="animate-bounce" size="16" name="twemoji:star" />
110 |         <div
111 |           class="relative top-[1px] text-white"
112 |           v-text="data?.stargazers_count"
113 |         />
114 |       </a>
115 |       <div>
116 |         <a
117 |           class="text-emerald-500 hover:text-white"
118 |           href="https://ndragun92.github.io/portfolio/"
119 |           target="_blank"
120 |           >ndragun92.github.io/portfolio</a
121 |         >
122 |         <span> &copy; {{ year }} All Rights Reserved</span>
123 |       </div>
124 |       <div class="flex items-center gap-2">
125 |         <div>Made with</div>
126 |         <div class="relative">
127 |           <Icon
128 |             class="animate-ping absolute top-1 left-0"
129 |             name="twemoji:red-heart"
130 |           />
131 |           <Icon name="twemoji:red-heart" />
132 |         </div>
133 |         <div>
134 |           by
135 |           <a
136 |             class="text-bold text-white hover:underline"
137 |             href="https://www.linkedin.com/in/nemanja-dragun/"
138 |             target="_blank"
139 |             >Nemanja Dragun</a
140 |           >
141 |           in Bielefeld
142 |         </div>
143 |       </div>
144 |     </footer>
145 |   </div>
146 | </template>
147 | 
148 | <script lang="ts">
149 | export default {
150 |   name: "LayoutScrollTo",
151 | };
152 | </script>
153 | 
154 | <script lang="ts" setup>
155 | const { toggleValue: showMobileMenu, toggle: toggleMobileMenu } = useHelpers();
156 | 
157 | const { data } = useLazyAsyncData<{ stargazers_count: number }>(() =>
158 |   $fetch("https://api.github.com/repos/ndragun92/nuxt3-examples")
159 | );
160 | 
161 | const year = computed(() => {
162 |   return useDateFormat(useNow(), "YYYY").value;
163 | });
164 | </script>
165 | 
166 | <style lang="scss" scoped>
167 | aside {
168 |   a {
169 |     &.router-link-active,
170 |     &:hover {
171 |       @apply text-emerald-500;
172 |     }
173 |   }
174 | }
175 | .aside__mobile {
176 |   @include media-md-max {
177 |     @apply fixed top-[calc(5rem+1px)] left-0 bottom-0 w-[300px] z-50 bg-primary-900 overflow-y-auto overflow-x-hidden p-4;
178 |     @apply -translate-x-full;
179 |     @include transition;
180 |     &--open {
181 |       @apply translate-x-0;
182 |     }
183 |   }
184 | }
185 | .wrapper {
186 |   @apply grid;
187 |   @apply grid-cols-[minmax(0,1fr)] md:grid-cols-[300px,minmax(0,1fr)];
188 | }
189 | </style>
190 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | import eslintPlugin from "vite-plugin-eslint";
 3 | export default defineNuxtConfig({
 4 |   // ssr: false,
 5 |   nitro: {
 6 |     compressPublicAssets: true,
 7 |     routeRules: {
 8 |       // "/_nuxt/**": { headers: { "cache-control": "max-age=31536000" } }, // Set generated files cache to 1 year
 9 |     },
10 |   },
11 |   css: ["~/assets/css/main.scss"],
12 |   modules: [
13 |     // https://tailwindcss.nuxt.dev/
14 |     "@nuxtjs/tailwindcss",
15 |     // https://github.com/nuxt-modules/icon
16 |     // https://icones.js.org/collection/all?s=github
17 |     "nuxt-icon",
18 |     // https://vueuse.org/guide/index.html#nuxt
19 |     "@vueuse/nuxt",
20 |     // https://content.nuxtjs.org/get-started
21 |     "@nuxt/content",
22 |   ],
23 |   vite: {
24 |     plugins: [eslintPlugin()],
25 |     css: {
26 |       preprocessorOptions: {
27 |         scss: {
28 |           additionalData: `@import "@/assets/css/utils/global.scss";`,
29 |         },
30 |       },
31 |     },
32 |   },
33 | });
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "devDependencies": {
11 |     "@nuxt/content": "^2.3.0",
12 |     "@nuxtjs/tailwindcss": "^6.1.3",
13 |     "@typescript-eslint/eslint-plugin": "^5.46.0",
14 |     "@typescript-eslint/parser": "^5.46.0",
15 |     "@vueuse/core": "^9.7.0",
16 |     "@vueuse/nuxt": "^9.7.0",
17 |     "eslint": "^8.29.0",
18 |     "eslint-config-prettier": "^8.5.0",
19 |     "eslint-plugin-nuxt": "^4.0.0",
20 |     "eslint-plugin-prettier": "^4.2.1",
21 |     "eslint-plugin-vue": "^9.7.0",
22 |     "nuxt": "3.0.0",
23 |     "nuxt-icon": "^0.1.8",
24 |     "prettier": "^2.8.1",
25 |     "sass": "^1.56.2",
26 |     "sass-loader": "^13.2.0",
27 |     "vite-plugin-eslint": "^1.8.1"
28 |   },
29 |   "dependencies": {
30 |     "@vercel/analytics": "^0.1.6",
31 |     "lodash-es": "^4.17.21",
32 |     "v3-infinite-loading": "^1.2.2"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pages/examples/data-fetching/infinite-load/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-github-example-banner />
  4 |     <div class="container__main">
  5 |       <h1 class="text-2xl font-bold mb-4 text-center md:text-left">
  6 |         Infinite Load Example
  7 |       </h1>
  8 |       <div v-if="pending" class="text-center">Loading...</div>
  9 |       <ul class="flex flex-col gap-4 max-h-full overflow-auto">
 10 |         <li
 11 |           v-for="beer in beers?.data"
 12 |           :key="beer.id"
 13 |           class="border border-primary-800 border-opacity-50 bg-black bg-opacity-20 p-4 text-center md:text-left flex flex-col md:flex-row gap-4 items-center"
 14 |         >
 15 |           <div class="w-32 h-32 bg-primary-900 p-2">
 16 |             <client-only>
 17 |               <img
 18 |                 class="block w-full h-full object-contain"
 19 |                 :src="beer.image_url"
 20 |                 :alt="beer.name"
 21 |               />
 22 |             </client-only>
 23 |           </div>
 24 |           <div class="flex-1">
 25 |             <h3
 26 |               class="font-bold text-lg mb-4 text-primary-100"
 27 |               v-text="beer.name"
 28 |             />
 29 |             <p v-text="beer.description" />
 30 |           </div>
 31 |         </li>
 32 |         <template v-if="beers?.data?.length">
 33 |           <el-infinite-load v-if="!pending" @load-data="onLoadData" />
 34 |           <lazy-el-data-load v-else />
 35 |         </template>
 36 |       </ul>
 37 |       <div v-if="beers?.data?.length" class="text-center mt-4">
 38 |         Loaded: {{ beers?.data?.length }} of {{ beers?.total }} records
 39 |       </div>
 40 |     </div>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script lang="ts">
 45 | export default {
 46 |   name: "PageExamplesDataFetchingInfiniteLoad",
 47 | };
 48 | </script>
 49 | 
 50 | <script lang="ts" setup>
 51 | import { promiseTimeout } from "@vueuse/core";
 52 | 
 53 | const ElInfiniteLoad = defineAsyncComponent(
 54 |   () => import("~/components/elements/ElInfiniteLoad/ElInfiniteLoad.vue")
 55 | );
 56 | 
 57 | definePageMeta({
 58 |   title: "Infinite Load",
 59 | });
 60 | 
 61 | interface BeersDataInterface {
 62 |   page?: number; // For internal caching
 63 |   total: number;
 64 |   data: {
 65 |     name: string;
 66 |     description: string;
 67 |     image_url: string;
 68 |   }[];
 69 | }
 70 | 
 71 | const page = ref(1);
 72 | const cacheEnabled = true; // Enables/Disabled cache
 73 | const cacheLoaded = ref(false);
 74 | 
 75 | const route = useRoute();
 76 | // Cache key has to be unique key across all the pages
 77 | const cacheKey = computed(() => {
 78 |   return route.fullPath;
 79 | });
 80 | 
 81 | const {
 82 |   pending,
 83 |   data: beers,
 84 |   refresh,
 85 | } = useLazyAsyncData<BeersDataInterface>(cacheKey.value, async (nuxtApp) => {
 86 |   const {
 87 |     page: cachedPage,
 88 |     total: cachedTotal,
 89 |     data: cachedData,
 90 |   } = nuxtApp?.payload?.data[cacheKey.value] || {}; // Checks payload and cached data
 91 |   console.log("here");
 92 |   // Validates if cache was loaded and if it exists
 93 |   if (cacheEnabled && !cacheLoaded.value && cachedPage) {
 94 |     // Load cached data
 95 |     cacheLoaded.value = true; // We need to load cached data only once on page load
 96 |     page.value = cachedPage; // Gets last fetched page, so we can continue fetch with correct page and just append new data to cached data
 97 |     return {
 98 |       page: page.value,
 99 |       total: cachedTotal,
100 |       data: cachedData,
101 |     };
102 |   }
103 |   // Load fresh data from API
104 |   await promiseTimeout(1000); // Fake API timeout for 1 second for demo, so we can see spinner
105 |   const apiResponse: any[] = await $fetch(
106 |     `https://api.punkapi.com/v2/beers?page=${page.value}&per_page=25`
107 |   );
108 | 
109 |   const response = {
110 |     total: 300, // Fake total of 300 since API does not return total available records but in ideal scenario we usually get total back from API
111 |     data: apiResponse,
112 |   };
113 | 
114 |   let data: any[] = response.data;
115 |   // Check if page is greater than 1, if it is then just append new data on current
116 |   if (beers.value?.data && page.value > 1) {
117 |     data = [...beers.value.data, ...data];
118 |   }
119 | 
120 |   return {
121 |     page: page.value,
122 |     total: response.total,
123 |     data,
124 |   };
125 | });
126 | 
127 | // Triggered on scroll to bottom
128 | const onLoadData = async ($state) => {
129 |   page.value++;
130 |   // Validates if we did load all data
131 |   if (beers.value?.data && beers.value.data.length >= beers.value.total) {
132 |     $state.complete();
133 |   } else {
134 |     await refresh();
135 |     $state.loaded();
136 |   }
137 | };
138 | </script>
139 | 


--------------------------------------------------------------------------------
/pages/examples/data-table/simple/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-github-example-banner />
 4 |     <div class="container__main">
 5 |       <h1 class="text-2xl font-bold mb-4 text-center md:text-left">
 6 |         Coming soon
 7 |       </h1>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script lang="ts">
13 | export default {
14 |   name: "PageExamplesDataTableSimple",
15 | };
16 | </script>
17 | 
18 | <script lang="ts" setup>
19 | definePageMeta({
20 |   title: "Simple",
21 | });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/pages/examples/nuxt-content/infinite-load/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-github-example-banner />
 4 |     <div class="container__main">
 5 |       <h1 class="text-2xl font-bold mb-4 text-center md:text-left">
 6 |         Nuxt Content - Infinite Load Example
 7 |       </h1>
 8 |       <ul v-if="posts?.data?.length" class="grid grid-cols-3 gap-4">
 9 |         <li
10 |           v-for="post in posts?.data"
11 |           :key="post._id"
12 |           class="bg-primary-800 min-h-[300px]"
13 |         >
14 |           <div class="h-40 bg-black">
15 |             <img
16 |               class="w-full h-full cover"
17 |               :src="post.image?.src || 'https://via.placeholder.com/350x150'"
18 |               :alt="post.title"
19 |             />
20 |           </div>
21 |           <div class="p-4">
22 |             <h2 class="font-bold text-lg" v-text="post.title" />
23 |             <p class="mt-2 text-sm" v-text="post.description" />
24 |           </div>
25 |         </li>
26 |         <template v-if="posts?.data?.length">
27 |           <el-infinite-load v-if="!pending" @load-data="onLoadData" />
28 |           <lazy-el-data-load v-else />
29 |         </template>
30 |       </ul>
31 |       <div v-if="posts?.length" class="text-center mt-4">
32 |         Loaded: {{ posts?.length }} of {{ totalPosts?.length }} records
33 |       </div>
34 |     </div>
35 |   </div>
36 | </template>
37 | 
38 | <script lang="ts">
39 | export default {
40 |   name: "PageExamplesNuxtContentInfiniteLoad",
41 | };
42 | </script>
43 | 
44 | <script lang="ts" setup>
45 | const ElInfiniteLoad = defineAsyncComponent(
46 |   () => import("~/components/elements/ElInfiniteLoad/ElInfiniteLoad.vue")
47 | );
48 | 
49 | definePageMeta({
50 |   title: "Infinite Load",
51 | });
52 | 
53 | const pending = ref(false);
54 | const page = ref(0);
55 | const limit = ref(2);
56 | const posts = reactive({
57 |   data: await queryContent("blog/post").skip(0).limit(limit.value).find(),
58 | });
59 | const totalPosts = await queryContent("blog/post").only("id").find();
60 | 
61 | const loadMorePosts = async () => {
62 |   pending.value = true;
63 |   const newPosts = await queryContent("blog/post")
64 |     .skip(skip.value)
65 |     .limit(limit.value)
66 |     .find();
67 |   posts.data = [...posts.data, ...newPosts];
68 |   pending.value = false;
69 | };
70 | 
71 | const skip = computed(() => page.value * limit.value);
72 | 
73 | const onLoadData = async ($state) => {
74 |   page.value++;
75 |   await nextTick();
76 |   // Validates if we did load all data
77 |   if (posts?.data && posts.data.length >= totalPosts.length) {
78 |     $state.complete();
79 |   } else {
80 |     await loadMorePosts();
81 |     $state.loaded();
82 |   }
83 | };
84 | </script>
85 | 


--------------------------------------------------------------------------------
/pages/examples/pagination/simple/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-github-example-banner />
  4 |     <div class="container__main">
  5 |       <h1 class="text-2xl font-bold mb-4 text-center md:text-left">
  6 |         Pagination Example
  7 |       </h1>
  8 |       <div v-if="pending" class="text-center">Loading...</div>
  9 |       <ul class="flex flex-col gap-4 max-h-full overflow-auto">
 10 |         <li
 11 |           v-for="beer in returnData"
 12 |           :key="beer.id"
 13 |           class="border border-primary-800 border-opacity-50 bg-black bg-opacity-20 p-4 text-center md:text-left flex flex-col md:flex-row gap-4 items-center"
 14 |         >
 15 |           <div class="w-32 h-32 bg-primary-900 p-2">
 16 |             <client-only>
 17 |               <img
 18 |                 class="block w-full h-full object-contain"
 19 |                 :src="beer.image_url"
 20 |                 :alt="beer.name"
 21 |               />
 22 |             </client-only>
 23 |           </div>
 24 |           <div class="flex-1">
 25 |             <h3
 26 |               class="font-bold text-lg mb-4 text-primary-100"
 27 |               v-text="beer.name"
 28 |             />
 29 |             <p v-text="beer.description" />
 30 |           </div>
 31 |         </li>
 32 |       </ul>
 33 |       <div class="mt-4">
 34 |         <el-pagination
 35 |           v-if="beers?.total"
 36 |           v-model.number="page"
 37 |           :query="true"
 38 |           :total="getTotalPages(beers?.total, limit)"
 39 |           :prev-show-count="3"
 40 |           :next-show-count="3"
 41 |         />
 42 |       </div>
 43 |     </div>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script lang="ts">
 48 | export default {
 49 |   name: "PageExamplesPaginationSimple",
 50 | };
 51 | </script>
 52 | 
 53 | <script lang="ts" setup>
 54 | definePageMeta({
 55 |   title: "Simple",
 56 | });
 57 | 
 58 | const ElPagination = defineAsyncComponent(
 59 |   () => import("~/components/elements/ElPagination/ElPagination.vue")
 60 | );
 61 | 
 62 | interface BeersDataInterface {
 63 |   total: number;
 64 |   data: {
 65 |     [key: string]: {
 66 |       name: string;
 67 |       description: string;
 68 |       image_url: string;
 69 |     }[];
 70 |   };
 71 | }
 72 | 
 73 | const { getCurrentPage, getTotalPages, query } = usePagination();
 74 | const page = ref(getCurrentPage(true, 1));
 75 | const limit = 3;
 76 | 
 77 | const route = useRoute();
 78 | const cacheEnabled = true; // Enables/Disabled cache
 79 | 
 80 | // Cache key has to be unique key across all the pages
 81 | const cacheKey = computed(() => {
 82 |   return route.path;
 83 | });
 84 | 
 85 | // Cache key has to be unique key to store correct page data
 86 | const cacheKeyPage = computed(() => {
 87 |   return route.fullPath;
 88 | });
 89 | 
 90 | const {
 91 |   pending,
 92 |   data: beers,
 93 |   refresh,
 94 | } = useLazyAsyncData<BeersDataInterface>(cacheKey.value, async (nuxtApp) => {
 95 |   const cachedData = nuxtApp?.payload?.data[cacheKey.value] || {}; // Checks payload and cached data
 96 | 
 97 |   // Check if we have data in cache, if so then return cached data and skip API call
 98 |   if (
 99 |     cacheEnabled &&
100 |     cachedData?.data &&
101 |     cachedData?.data[cacheKeyPage.value]
102 |   ) {
103 |     return cachedData;
104 |   }
105 |   // Make API request with page/limit to get fresh data
106 |   const apiResponse = await $fetch(
107 |     `https://api.punkapi.com/v2/beers?page=${page.value}&per_page=${limit}`
108 |   );
109 | 
110 |   // Custom logic to handle cache based on limit/current page
111 |   return {
112 |     data: {
113 |       ...(cachedData?.data || {}),
114 |       [cacheKeyPage.value]: apiResponse,
115 |     },
116 |     total: 300, // Fake for testing since this api does not return total
117 |   } as BeersDataInterface;
118 | });
119 | 
120 | // Set page to 1 if page query does not exist
121 | watch(
122 |   () => query.value.page,
123 |   async (value) => {
124 |     if (!value) {
125 |       page.value = 1;
126 |     }
127 |     // On page change refresh data
128 |     await refresh();
129 |   }
130 | );
131 | 
132 | // Return data with cached key
133 | const returnData = computed(() => {
134 |   return beers?.value?.data[cacheKeyPage.value];
135 | });
136 | </script>
137 | 


--------------------------------------------------------------------------------
/pages/examples/scroll-to/simple/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-github-example-banner />
 4 |     <div class="container__main">
 5 |       <h1 class="text-2xl font-bold mb-4 text-center md:text-left">
 6 |         Scroll to simple example
 7 |       </h1>
 8 |       <p>
 9 |         Click on left menu <code class="text-emerald-500">Sections</code> to
10 |         scroll to autoscroll to desired section
11 |       </p>
12 |       <p>or</p>
13 |       <nuxt-link
14 |         class="text-emerald-500 hover:underline"
15 |         to="/mock/scroll-to/page-1"
16 |         >Click here</nuxt-link
17 |       >
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script lang="ts">
23 | export default {
24 |   name: "PageExamplesScrollToSimple",
25 | };
26 | </script>
27 | 
28 | <script lang="ts" setup>
29 | definePageMeta({
30 |   title: "Simple",
31 |   layout: "scroll-to-simple",
32 | });
33 | </script>
34 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex-1 w-full h-full flex items-center justify-center p-4">
 3 |     <div
 4 |       class="max-w-[500px] overflow-hidden bg-black text-primary-100 bg-opacity-10 border border-primary-800 border-opacity-50 text-center rounded-lg"
 5 |     >
 6 |       <div class="px-8 pb-8 pt-4">
 7 |         <h1 class="text-2xl font-bold mb-4">Hello and welcome!</h1>
 8 |         <p class="text-primary-300">
 9 |           I have decided today to build something for this awesome community! I
10 |           decided to start a new project where I will put examples of how you
11 |           can build stuff with Nuxt 3/Vue 3! You can use
12 |           <a
13 |             class="font-bold text-emerald-500 hover:underline"
14 |             href="https://github.com/ndragun92/nuxt3-examples/discussions"
15 |             target="_blank"
16 |             >discussions</a
17 |           >
18 |           in GitHub Repository and suggest something you would like to see.
19 |           Based on your ideas/needs I will build examples and add them to this
20 |           public repository so everyone will be able to learn by examples
21 |         </p>
22 |       </div>
23 |       <div
24 |         class="flex flex-col md:flex-row items-center h-24 md:h-12 bg-black bg-opacity-20 border-t border-primary-800 border-opacity-50"
25 |       >
26 |         <a
27 |           class="flex items-center justify-center gap-2 h-full flex-1 hover:text-emerald-500"
28 |           href="https://github.com/ndragun92/nuxt3-examples/discussions"
29 |           target="_blank"
30 |           ><Icon class="relative -top-[1px]" size="20" name="mdi:github" />Start
31 |           a New Discussion</a
32 |         >
33 |         <div
34 |           class="w-full h-[1px] md:h-full md:w-[1px] bg-primary-800 bg-opacity-50"
35 |         />
36 |         <a
37 |           class="flex items-center justify-center gap-2 h-full flex-1 hover:text-emerald-500"
38 |           href="https://github.com/ndragun92/nuxt3-examples"
39 |           target="_blank"
40 |           ><Icon class="relative -top-[1px]" size="20" name="mdi:github" />
41 |           Check Repository</a
42 |         >
43 |       </div>
44 |     </div>
45 |   </div>
46 | </template>
47 | 
48 | <script lang="ts">
49 | export default {
50 |   name: "PageHomepage",
51 | };
52 | </script>
53 | 


--------------------------------------------------------------------------------
/pages/mock/scroll-to/page-1/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-github-example-banner />
 4 |     <!--  If you want to disable smooth scroll delete this class from HTML-->
 5 |     <Html class="smoothScroll"></Html>
 6 |     <div class="container__main">
 7 |       <section
 8 |         class="text-2xl font-bold mb-4 text-center md:text-left text-white h-[1200px] flex items-center justify-center"
 9 |       >
10 |         <div class="text-center">
11 |           <h2>Example with smooth scroll enabled</h2>
12 |           <div class="mt-4">
13 |             <nuxt-link :to="`#section2`">
14 |               <div
15 |                 class="relative top-[1px] truncate flex-1"
16 |                 v-text="`Go to Section 2`"
17 |               />
18 |             </nuxt-link>
19 |           </div>
20 |         </div>
21 |       </section>
22 |       <section
23 |         v-for="section in 2"
24 |         :id="`section${section}`"
25 |         :key="section"
26 |         class="text-2xl font-bold mb-4 text-center md:text-left text-white h-[800px] flex items-center justify-center"
27 |         :class="section === 1 ? 'bg-yellow-500' : 'bg-blue-500'"
28 |       >
29 |         <div class="text-center">
30 |           <h6>Section {{ section }}</h6>
31 | 
32 |           <nuxt-link :to="`#section${section === 2 ? 1 : 2}`">
33 |             <div
34 |               class="relative top-[1px] truncate flex-1"
35 |               v-text="`Scroll to Section ${section === 2 ? 1 : 2}`"
36 |             />
37 |           </nuxt-link>
38 |         </div>
39 |       </section>
40 |     </div>
41 |   </div>
42 | </template>
43 | 
44 | <script lang="ts">
45 | export default {
46 |   name: "PageMockScrollToPage1",
47 | };
48 | </script>
49 | 
50 | <script lang="ts" setup>
51 | definePageMeta({
52 |   layout: "scroll-to-simple",
53 | });
54 | </script>
55 | 
56 | <style>
57 | .smoothScroll {
58 |   scroll-behavior: smooth;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/pages/mock/scroll-to/page-2/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-github-example-banner />
 4 |     <div class="container__main">
 5 |       <section
 6 |         class="text-2xl font-bold mb-4 text-center md:text-left text-white h-[1200px] flex items-center justify-center"
 7 |       >
 8 |         Page 2 without smooth scroll enabled
 9 |       </section>
10 |       <section
11 |         v-for="(result, index) in results"
12 |         :id="`section${index + 1}`"
13 |         :key="index"
14 |         class="text-2xl font-bold mb-4 text-center md:text-left text-white h-[800px] flex items-center justify-center"
15 |         :class="!index ? 'bg-yellow-500' : 'bg-blue-500'"
16 |       >
17 |         <div class="text-center">
18 |           <h6>Section {{ index + 1 }}</h6>
19 |           <p class="text-xs">{{ result.name }}</p>
20 | 
21 |           <nuxt-link v-if="index" :to="`#section${index}`">
22 |             <div
23 |               class="relative top-[1px] truncate flex-1"
24 |               v-text="'Scroll to Section 1'"
25 |             />
26 |           </nuxt-link>
27 |         </div>
28 |       </section>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <script lang="ts">
34 | export default {
35 |   name: "PageMockScrollToPage2",
36 | };
37 | </script>
38 | 
39 | <script lang="ts" setup>
40 | definePageMeta({
41 |   layout: "scroll-to-advanced",
42 | });
43 | 
44 | const { data: results } = await useLazyFetch(
45 |   "https://api.punkapi.com/v2/beers?page=1&per_page=2"
46 | );
47 | </script>
48 | 


--------------------------------------------------------------------------------
/plugins/vercel.client.ts:
--------------------------------------------------------------------------------
 1 | import { inject } from "@vercel/analytics";
 2 | 
 3 | export default defineNuxtPlugin(() => {
 4 |   // Inject plugin only on prod build
 5 |   if (import.meta.env.PROD) {
 6 |     console.info("Vercel Tracking Enabled");
 7 |     inject();
 8 |   }
 9 | });
10 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="61" height="40" viewBox="0 0 61 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M33.9971 39.539H56.5247C57.2402 39.539 57.9432 39.3564 58.5628 39.0093C59.1825 38.6623 59.697 38.1631 60.0546 37.5619C60.4122 36.9608 60.6003 36.2789 60.6 35.5849C60.5997 34.8908 60.411 34.2091 60.0528 33.6083L44.9239 8.1904C44.5663 7.5894 44.0519 7.09032 43.4324 6.74332C42.8129 6.39632 42.1101 6.21363 41.3947 6.21363C40.6793 6.21363 39.9766 6.39632 39.357 6.74332C38.7375 7.09032 38.2231 7.5894 37.8655 8.1904L33.9971 14.6939L26.4338 1.97648C26.0759 1.37553 25.5613 0.876518 24.9416 0.52958C24.3219 0.182643 23.619 0 22.9035 0C22.188 0 21.4851 0.182643 20.8654 0.52958C20.2457 0.876518 19.7311 1.37553 19.3732 1.97648L0.547184 33.6083C0.189033 34.2091 0.00031171 34.8908 3.85805e-07 35.5849C-0.000310938 36.2789 0.187799 36.9608 0.54541 37.5619C0.903021 38.1631 1.41752 38.6623 2.03717 39.0093C2.65681 39.3564 3.35975 39.539 4.07528 39.539H18.2162C23.819 39.539 27.9509 37.1518 30.794 32.4945L37.6965 20.8993L41.3936 14.6939L52.4895 33.3335H37.6965L33.9971 39.539ZM17.9857 33.3272L8.11711 33.325L22.9101 8.47362L30.2912 20.8993L25.3492 29.2044C23.4611 32.2262 21.3162 33.3272 17.9857 33.3272Z" fill="#00DC82"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="132" height="32" viewBox="0 0 132 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_1264_7350)">
 3 | <path d="M26.8295 31.4227H44.4182C44.9769 31.4228 45.5257 31.2802 46.0095 31.0092C46.4933 30.7382 46.895 30.3485 47.1742 29.8791C47.4534 29.4098 47.6003 28.8774 47.6001 28.3355C47.5998 27.7936 47.4525 27.2614 47.1728 26.7922L35.3608 6.94689C35.0816 6.47766 34.6799 6.08799 34.1962 5.81706C33.7125 5.54614 33.1638 5.4035 32.6053 5.4035C32.0467 5.4035 31.498 5.54614 31.0143 5.81706C30.5306 6.08799 30.129 6.47766 29.8498 6.94689L26.8295 12.0246L20.9243 2.09529C20.6449 1.62609 20.2431 1.23648 19.7593 0.965601C19.2754 0.694725 18.7266 0.552124 18.168 0.552124C17.6094 0.552124 17.0606 0.694725 16.5767 0.965601C16.0929 1.23648 15.6911 1.62609 15.4117 2.09529L0.712988 26.7922C0.433357 27.2614 0.28601 27.7936 0.285767 28.3355C0.285524 28.8774 0.432393 29.4098 0.711603 29.8791C0.990813 30.3485 1.39252 30.7382 1.87631 31.0092C2.36011 31.2802 2.90894 31.4228 3.4676 31.4227H14.5083C18.8828 31.4227 22.1088 29.5589 24.3286 25.9227L29.7178 16.8696L32.6044 12.0246L41.2677 26.5778H29.7178L26.8295 31.4227ZM14.3283 26.5728L6.62332 26.5711L18.1731 7.16803L23.9361 16.8696L20.0775 23.3539C18.6034 25.7132 16.9287 26.5728 14.3283 26.5728Z" fill="#00DC82"/>
 4 | <path d="M60.65 31.1321V19.5774C60.65 16.2709 60.3057 12.9644 60.3057 12.9644C60.3057 12.9644 61.614 15.9802 63.2665 18.8144L70.3243 31.1321H75.8673V5.69727H70.6686V17.2519C70.6686 20.5585 71.0129 23.9013 71.0129 23.9013C71.0129 23.9013 69.7046 20.8491 68.0865 18.015L60.9942 5.69727H55.4857V31.1321H60.65Z" fill="white"/>
 5 | <path d="M92.2457 12.819V22.8476C92.2457 25.1731 90.7653 26.9172 88.6652 26.9172C86.7028 26.9172 85.3256 25.3184 85.3256 23.1019V12.819H80.5401V24.2283C80.5401 28.4069 83.0878 31.4228 86.9782 31.4228C89.3538 31.4228 91.2817 30.3327 92.2457 28.5886V31.1321H97.0657V12.819H92.2457Z" fill="white"/>
 6 | <path d="M111.082 21.6122L116.901 12.819H111.633L108.466 17.6516L105.298 12.819H100.065L105.884 21.5759L99.6177 31.1321H104.748L108.5 25.5001L112.218 31.1321H117.314L111.082 21.6122Z" fill="white"/>
 7 | <path d="M122.281 12.819H118.941V17.0339H122.281V24.4827C122.281 28.7339 124.863 31.1321 128.857 31.1321H131.714V26.8808H129.511C127.962 26.8808 127.066 26.0451 127.066 24.2647V17.0339H131.714V12.819H127.066V7.40503H122.281V12.819Z" fill="white"/>
 8 | </g>
 9 | <defs>
10 | <clipPath id="clip0_1264_7350">
11 | <rect width="131.429" height="32" fill="white" transform="translate(0.285767)"/>
12 | </clipPath>
13 | </defs>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  ** TailwindCSS Configuration File
 3 |  **
 4 |  ** Docs: https://tailwindcss.com/docs/configuration
 5 |  */
 6 | module.exports = {
 7 |   content: [],
 8 |   theme: {
 9 |     screens: {
10 |       touch: { raw: "hover: none" },
11 |       "can-hover": { raw: "hover: hover" },
12 |       xxs: "380px",
13 |       xs: "480px",
14 |       sm: "640px",
15 |       md: "768px",
16 |       lg: "1024px",
17 |       xl: "1280px",
18 |       "2xl": "1536px",
19 |       "3xl": "1920px",
20 |       "4xl": "2560px",
21 |       "5xl": "3840px",
22 |     },
23 |     extend: {
24 |       colors: {
25 |         primary: {
26 |           DEFAULT: "#4D5666",
27 |           50: "#D2D6DD",
28 |           100: "#C5CAD3",
29 |           200: "#ABB2BF",
30 |           300: "#919AAC",
31 |           400: "#768398",
32 |           500: "#606C80",
33 |           600: "#4D5666",
34 |           700: "#3B424E",
35 |           800: "#2A2F37",
36 |           900: "#181B20",
37 |         },
38 |       },
39 |       flex: {
40 |         2: "2 2 0%",
41 |         3: "3 3 0%",
42 |       },
43 |     },
44 |   },
45 | };
46 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // https://nuxt.com/docs/guide/concepts/typescript
 3 |   "extends": "./.nuxt/tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "noImplicitAny": false,
 6 |     "importsNotUsedAsValues": "error",
 7 |     "types": []
 8 |   }
 9 | }
10 | 


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