This commit is contained in:
Nadar 2025-07-23 20:58:21 +03:00
commit 80616ccf51
30 changed files with 22512 additions and 0 deletions

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example

13
.typegen.js Normal file
View File

@ -0,0 +1,13 @@
import path from 'node:path'
import { generateApi } from 'swagger-typescript-api'
import 'dotenv/config';
(async () => {
await generateApi({
name: 'swagger-types.ts',
output: path.resolve(process.cwd(), 'api'),
typePrefix: 'I',
url: 'https://wp.koptilnya.xyz/rest-api/schema',
extractEnums: true,
})
})()

75
README.md Normal file
View File

@ -0,0 +1,75 @@
# Nuxt Minimal Starter
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

12505
api/Api.ts Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,4 @@
import api from '~/api/instance'
export const getProductList = () =>
api.wp.v2ProductList()

1
api/endpoints/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './getProductList'

14
api/instance.ts Normal file
View File

@ -0,0 +1,14 @@
import { Api } from '~/api/Api'
const api = new Api({
baseUrl: String('https://wp.koptilnya.xyz/wp-json'),
})
const nativeRequest = api.request
api.request = async function (...args) {
const response = await nativeRequest.call(api, ...args)
return await response.json()
}
export default api

1
api/queries/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './useGetProductList'

View File

@ -0,0 +1,9 @@
import { useQuery } from '@tanstack/vue-query'
import { getProductList } from '~/api/endpoints'
export const useGetProductList = () => {
return useQuery({
queryKey: ['get-product-list'],
queryFn: () => getProductList(),
})
}

14
api/useGetProduct.ts Normal file
View File

@ -0,0 +1,14 @@
import { useAsyncData } from '#app'
export function useGetProducts() {
return useAsyncData(
'products',
async () => {
const response = await $fetch('https://wp.koptilnya.xyz/wp-json/wp/v2/product')
return response
},
{
server: false,
},
)
}

11
app.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
<style lang="scss">
@use '@/assets/scss/main' as *;
</style>

View File

@ -0,0 +1,6 @@
// Breakpoints
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

70
assets/scss/_reset.scss Normal file
View File

@ -0,0 +1,70 @@
/* Modern CSS Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Remove default margin and padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Remove list styles on ul, ol elements */
ul,
ol {
list-style: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

88
assets/scss/colors.scss Normal file
View File

@ -0,0 +1,88 @@
// Brand Colors
$brand-primary: #4f46e5; // Основной цвет бренда
$brand-secondary: #10b981; // Вторичный цвет бренда
// Neutral Colors
$neutral-50: #f9fafb; // Самый светлый оттенок
$neutral-100: #f3f4f6; // Светлый фон
$neutral-200: #e5e7eb; // Светлая граница
$neutral-300: #d1d5db; // Светлый текст
$neutral-400: #9ca3af; // Неактивный текст
$neutral-500: #6b7280; // Средний текст
$neutral-600: #4b5563; // Основной текст
$neutral-700: #374151; // Темный текст
$neutral-800: #1f2937; // Очень темный текст
$neutral-900: #111827; // Самый темный оттенок
// Semantic Colors
$text-primary: $neutral-900; // Основной текст
$text-secondary: $neutral-600; // Вторичный текст
$text-muted: $neutral-400; // Неактивный текст
$background-primary: $neutral-50; // Основной фон
$background-secondary: $neutral-100; // Вторичный фон
$border-color: $neutral-200; // Цвет границ
// Status Colors
$success: #10b981; // Успех
$warning: #f59e0b; // Предупреждение
$error: #ef4444; // Ошибка
$info: #3b82f6; // Информация
// Basic Colors
$black: #000000;
$dark-background: #13141c;
$dark-grey: #171821;
$grey-selector: #1b1b24;
$grey-blocks: #1e1f2b;
$grey-text-highlight: #23242c;
$grey-blocks-hover: #262736;
$grey-menu: #292a32;
$grey-stroke: #323442;
$grey-paginator: #323442;
$grey-icons: #5b5e6d;
$grey-text: #7f808b;
$grey-text2: #9A9BAB;
$white: #ffffff;
$greeen: #9fff00;
$greeen-dark: #43611b;
$red: #ff4141;
$red-dark: #3e232c;
$green: #20b26c;
$green-dark: #133324;
$gold: #ffc35c;
// Form Elements
$grey-form: #1c1d26;
$grey-form-stroke: #323442;
$grey-button: #21222d;
$grey-button-2: #32323c;
$grey-button-stroke: #5b5e6d;
// Export colors for JavaScript
:export {
black: $black;
darkBackground: $dark-background;
darkGrey: $dark-grey;
greySelector: $grey-selector;
greyBlocks: $grey-blocks;
greyTextHighlight: $grey-text-highlight;
greyBlocksHover: $grey-blocks-hover;
greyMenu: $grey-menu;
greyStroke: $grey-stroke;
greyPaginator: $grey-paginator;
greyIcons: $grey-icons;
greyText: $grey-text;
white: $white;
greeen: $greeen;
greeenDark: $greeen-dark;
red: $red;
redDark: $red-dark;
green: $green;
greenDark: $green-dark;
greyForm: $grey-form;
greyFormStroke: $grey-form-stroke;
greyButton: $grey-button;
greyButton2: $grey-button-2;
greyButtonStroke: $grey-button-stroke;
gold: $gold;
}

12
assets/scss/global.scss Normal file
View File

@ -0,0 +1,12 @@
@use 'main' as *;
body {
font-family: 'Inter', sans-serif;
color: $text-color;
margin: 0;
padding: 0;
}
.container {
@include container;
}

78
assets/scss/main.scss Normal file
View File

@ -0,0 +1,78 @@
@use 'reset';
@use 'colors' as *;
@use 'typography' as *;
@use 'utils' as *;
// Base styles
html {
font-size: 16px;
line-height: 1.5;
scroll-behavior: smooth;
}
body {
font-family: $font-family-base;
color: white;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Typography
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: $font-weight-semibold;
line-height: 100%;
color: #ffffff;
}
h1 {
@include h1('h1');
}
h2 {
@include h2('h2');
}
h3 {
@include h3('h3');
}
a {
color: inherit;
text-decoration: none;
transition: all 0.2s ease;
}
// Buttons
button {
cursor: pointer;
font-family: inherit;
font-size: inherit;
line-height: inherit;
border: none;
background: none;
padding: 0;
}
// Forms
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
transition: all 0.2s ease;
&:focus {
outline: none;
border-color: $brand-primary;
}
}

121
assets/scss/typography.scss Normal file
View File

@ -0,0 +1,121 @@
@use 'utils' as *;
// Font Face Declarations
@font-face {
font-family: 'Inter';
src:
url('/fonts/Inter-Regular.woff2') format('woff2'),
url('/fonts/Inter-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src:
url('/fonts/Inter-Medium.woff2') format('woff2'),
url('/fonts/Inter-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src:
url('/fonts/Inter-SemiBold.woff2') format('woff2'),
url('/fonts/Inter-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
// Font Variables
$font-family-base:
'Inter',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
sans-serif;
// Font Weights
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
// Custom type
@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
@if ($namespace) {
@if ($onlyVars) {
--#{$namespace}-font-size: #{$size};
--#{$namespace}-font-weight: #{$weight};
--#{$namespace}-line-height: #{$lineHeight};
} @else {
font-size: var(--#{$namespace}-font-size, $size);
font-weight: var(--#{$namespace}-font-weight, $weight);
line-height: var(--#{$namespace}-line-height, $lineHeight);
}
} @else {
font-size: $size;
font-weight: $weight;
line-height: $lineHeight;
}
}
/* Headline */
@mixin h1($namespace: null, $onlyVars: false) {
@include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars);
@include mobile {
font-size: 24px;
}
}
@mixin h2($namespace: null, $onlyVars: false) {
@include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars);
@include mobile {
font-size: 20px;
}
}
@mixin h3($namespace: null, $onlyVars: false) {
@include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars);
}
/* Text */
// 16 medium-(medium/bold)
@mixin txt-m($namespace: null, $onlyVars: false) {
@include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars);
}
@mixin txt-m-m($namespace: null, $onlyVars: false) {
@include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars);
}
@mixin txt-m-b($namespace: null, $onlyVars: false) {
@include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars);
}
// 14 regular-(medium/bold)
@mixin txt-r($namespace: null, $onlyVars: false) {
@include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars);
}
@mixin txt-r-m($namespace: null, $onlyVars: false) {
@include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars);
}
@mixin txt-r-b($namespace: null, $onlyVars: false) {
@include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars);
}
// 12 text small-(medium/bold)
@mixin txt-s($namespace: null, $onlyVars: false) {
@include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars);
}
@mixin txt-s-m($namespace: null, $onlyVars: false) {
@include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars);
}
@mixin txt-s-b($namespace: null, $onlyVars: false) {
@include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars);
}
// 10 text-tiny
@mixin txt-t($namespace: null, $onlyVars: false) {
@include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars);
}

153
assets/scss/utils.scss Normal file
View File

@ -0,0 +1,153 @@
@use 'sass:color';
@use 'sass:math';
@use 'breakpoints' as *;
// Mixins
@mixin responsive($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
@mixin mobile {
@media (max-width: $breakpoint-md) {
@content;
}
}
$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
@each $i in $indents {
.m#{$i} {
margin: #{$i}px;
}
.mx#{$i} {
margin-left: #{$i}px;
margin-right: #{$i}px;
}
.my#{$i} {
margin-top: #{$i}px;
margin-bottom: #{$i}px;
}
.mt#{$i} {
margin-top: #{$i}px;
}
.mb#{$i} {
margin-bottom: #{$i}px;
}
.ml#{$i} {
margin-left: #{$i}px;
}
.mr#{$i} {
margin-right: #{$i}px;
}
.p#{$i} {
padding: #{$i}px;
}
.px#{$i} {
padding-left: #{$i}px;
padding-right: #{$i}px;
}
.py#{$i} {
padding-top: #{$i}px;
padding-bottom: #{$i}px;
}
.pt#{$i} {
padding-top: #{$i}px;
}
.pb#{$i} {
padding-bottom: #{$i}px;
}
.pl#{$i} {
padding-left: #{$i}px;
}
.pr#{$i} {
padding-right: #{$i}px;
}
}
.mla {
margin-left: auto;
}
.mra {
margin-left: auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
@each $align in ('left', 'right', 'center') {
.text-align-#{$align} {
text-align: #{$align};
}
}
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }
.text-align-center { text-align: center !important; }
.text-align-left { text-align: left !important; }
.text-align-right { text-align: right !important; }

17
eslint.config.js Normal file
View File

@ -0,0 +1,17 @@
import antfu from '@antfu/eslint-config'
export default antfu({
rules: {
'antfu/top-level-function': 'off',
},
formatters: {
css: true,
},
overrides: {
vue: {
'vue/block-order': ['error', {
order: ['template', 'script', 'style'],
}],
},
},
})

58
layouts/default.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div class="layout">
<header class="header">
Header
</header>
<main class="main">
<div class="container">
<slot />
</div>
</main>
<footer class="footer">
Footer
</footer>
</div>
</template>
<style lang="scss" scoped>
@use '@/assets/scss/colors.scss' as colors;
@use '@/assets/scss/main.scss' as main;
@use '@/assets/scss/utils.scss' as utils;
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
background: colors.$dark-grey;
}
.container {
max-width: 1000px;
margin: 48px auto 100px;
@media (max-width: 1280px) {
margin: 24px auto 52px;
padding: 0 24px;
}
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.main {
flex: 1;
margin-top: 64px;
}
.footer {
margin-top: auto;
}
</style>

6
nuxt.config.ts Normal file
View File

@ -0,0 +1,6 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2025-05-15',
devtools: { enabled: true },
modules: ['@nuxt/ui', '@nuxt/image', '@nuxt/icon', '@nuxt/fonts'],
})

39
package.json Normal file
View File

@ -0,0 +1,39 @@
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"typegen": "node .typegen"
},
"dependencies": {
"@nuxt/fonts": "0.11.4",
"@nuxt/icon": "1.15.0",
"@nuxt/image": "1.10.0",
"@nuxt/ui": "3.2.0",
"@tanstack/vue-query": "^5.75.5",
"@vueuse/core": "^13.1.0",
"axios": "^1.10.0",
"dayjs": "^1.11.13",
"decimal.js": "^10.5.0",
"nuxt": "^3.17.6",
"typescript": "^5.6.3",
"vue": "^3.5.17",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@antfu/eslint-config": "^4.13.2",
"@nuxt/devtools": "latest",
"eslint": "^9.27.0",
"eslint-plugin-format": "^1.0.1",
"sass": "^1.71.0",
"swagger-typescript-api": "^13.0.3"
},
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

14
pages/index.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div>
productsData
<pre>
{{ productsData }}
</pre>
</div>
</template>
<script setup lang="ts">
import { useGetProductList } from '~/api/queries'
const { data: productsData } = useGetProductList()
</script>

11
pages/test.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
boroda
</template>
<style scoped>
</style>

45
plugins/vue-query.ts Normal file
View File

@ -0,0 +1,45 @@
import type {
DehydratedState,
VueQueryPluginOptions,
} from '@tanstack/vue-query'
// Nuxt 3 app aliases
import { defineNuxtPlugin, useState } from '#imports'
import {
dehydrate,
hydrate,
QueryClient,
VueQueryPlugin,
} from '@tanstack/vue-query'
export default defineNuxtPlugin((nuxt) => {
const vueQueryState = useState<DehydratedState | null>('vue-query')
// Modify your Vue Query global settings here
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
refetchOnMount: false,
},
mutations: {
retry: false,
},
},
})
const options: VueQueryPluginOptions = { queryClient }
nuxt.vueApp.use(VueQueryPlugin, options)
if (import.meta.server) {
nuxt.hooks.hook('app:rendered', () => {
vueQueryState.value = dehydrate(queryClient)
})
}
if (import.meta.client) {
nuxt.hooks.hook('app:created', () => {
hydrate(queryClient, vueQueryState.value)
})
}
})

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-Agent: *
Disallow:

3
server/tsconfig.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "../.nuxt/tsconfig.server.json"
}

4
tsconfig.json Normal file
View File

@ -0,0 +1,4 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json"
}

9114
yarn.lock Normal file

File diff suppressed because it is too large Load Diff