Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update to nuxt 3 #1

Merged
merged 2 commits into from Mar 27, 2024
Merged

update to nuxt 3 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae215f7
update to nuxt 3
Mar 27, 2024
c98e30f
use script setup
Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
76 changes: 75 additions & 1 deletion README.md
View file
Open in desktop
@@ -1 +1,75 @@
# biztosAlkuszApp
# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the 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 run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
7 changes: 7 additions & 0 deletions app.vue
View file
Open in desktop
@@ -0,0 +1,7 @@
<template>
<div>
<AppHeader />
<NuxtPage />
<AppFooter />
</div>
</template>
0 static/css/app.css → assets/css/app.css
View file
Open in desktop
File renamed without changes.
181 changes: 100 additions & 81 deletions components/AppFooter.vue
View file
Open in desktop
@@ -1,86 +1,105 @@
<!-- components/Footer.vue -->
<script setup>
const links = [
{ name: 'Főoldal', path: '/' },
{ name: 'Partnerek', path: '/partnerek' },
{ name: 'Szolgáltatások', path: '/szolgaltatasok' },
{ name: 'Dokumentumok', path: '/dokumentumok' },
{ name: 'Ajánlatkérés', path: '/ajanlatkeres' },
{ name: 'Kapcsolat', path: '/kapcsolat' },
]

const form = ref({
firstname: '',
lastname: '',
email: '',
phonenumber: '',
message: '',
})

const sendEmail = () => console.log(form.value)
</script>

<template>
<footer>
<div class="footer-content">
<div class="footer-content__form bg-color-w">
<h5 class="text-transform-uppercase text-center">VEGYÜK FEL A KAPCSOLATOT!</h5>
<div class="contact-form">
<form @submit.prevent="sendEmail">
<div class="contact-form__grid-box grid-2">
<div class="form-group form-group--margin-right">
<input class="form-group__input" placeholder="Vezetéknév *" type="text" id="firstname"
v-model="form.firstname" required>
</div>
<div class="form-group form-group--margin-left">
<input class="form-group__input" placeholder="Keresztnév *" type="text" id="lastname"
v-model="form.lastname" required>
</div>
</div>
<div class="contact-form__grid-box grid-2">
<div class="form-group form-group--margin-right">
<input class="form-group__input" placeholder="E-mail cím *" type="email" id="email"
v-model="form.email" required>
</div>
<div class="form-group form-group--margin-left">
<input class="form-group__input" placeholder="Telefonszám" type="text" id="phonenumber"
v-model="form.phonenumber" required>
</div>
</div>
<div class="form-group">
<textarea class="form-group__textarea" placeholder="Milyen segítségre volna szüksége?"
id="message" v-model="form.message" required></textarea>
</div>
<div class="contact-form__btn-box t-end">
<button class="page-btn text-color-w" type="submit">Küldés
<img class="page-btn__img position-relative" src="/img/btn-arrow.svg"
alt="Biztos Alkuszom"></button>
</div>
</form>
</div>
<footer>
<div class="footer-content">
<div class="footer-content__form bg-color-w">
<h5 class="text-transform-uppercase text-center">VEGYÜK FEL A KAPCSOLATOT!</h5>
<div class="contact-form">
<form @submit.prevent="sendEmail">
<div class="contact-form__grid-box grid-2">
<div class="form-group form-group--margin-right">
<input
class="form-group__input"
placeholder="Vezetéknév *"
type="text"
id="firstname"
v-model="form.firstname"
required
/>
</div>
<div class="form-group form-group--margin-left">
<input
class="form-group__input"
placeholder="Keresztnév *"
type="text"
id="lastname"
v-model="form.lastname"
required
/>
</div>
</div>
<div class="contact-form__grid-box grid-2">
<div class="form-group form-group--margin-right">
<input
class="form-group__input"
placeholder="E-mail cím *"
type="email"
id="email"
v-model="form.email"
required
/>
</div>
<div class="form-group form-group--margin-left">
<input
class="form-group__input"
placeholder="Telefonszám"
type="text"
id="phonenumber"
v-model="form.phonenumber"
required
/>
</div>
</div>
<div class="form-group">
<textarea
class="form-group__textarea"
placeholder="Milyen segítségre volna szüksége?"
id="message"
v-model="form.message"
required
></textarea>
</div>
<div class="footer-content__link-box text-center">
<img src="/img/footer/logo.svg" alt="Biztos Alkuszom" class="footer-content__link-box__img">
<div class="footer-content__link-box__links">
<NuxtLink v-for="link in footerLinks" :key="link.path" :to="link.path" class="footer-link">
{{ link.name }}
</NuxtLink>
</div>
<div class="footer-content__link-box__DigitalSeed bg-color-w">
<NuxtLink class="footer-content__link-box__DigitalSeed__Nuxtlink text-transform-uppercase" to="/">
DIGITAL SEED STUDIO - 2024</NuxtLink>
</div>
<div class="contact-form__btn-box t-end">
<button class="page-btn text-color-w" type="submit">
Küldés <img class="page-btn__img position-relative" src="/img/btn-arrow.svg" alt="Biztos Alkuszom" />
</button>
</div>
</form>
</div>
</footer>
</div>
<div class="footer-content__link-box text-center">
<img src="/img/footer/logo.svg" alt="Biztos Alkuszom" class="footer-content__link-box__img" />
<div class="footer-content__link-box__links">
<NuxtLink v-for="link in links" :key="link.path" :to="link.path" class="footer-link">
{{ link.name }}
</NuxtLink>
</div>
<div class="footer-content__link-box__DigitalSeed bg-color-w">
<NuxtLink class="footer-content__link-box__DigitalSeed__Nuxtlink text-transform-uppercase" to="/">
DIGITAL SEED STUDIO - 2024</NuxtLink
>
</div>
</div>
</div>
</footer>
</template>


<script>
import axios from 'axios';
import { Footerlinks } from '~/utils/js/links';

export default {
data() {
return {
footerLinks: Footerlinks,
form: {
firstname: '',
lastname: '',
email: '',
phonenumber: '',
message: ''
}
};
},
methods: {
async sendEmail() {
try {
await axios.post('/send-email', this.form);
console.log('Email sikeresen elküldve');
} catch (error) {
console.error('Hiba történt az email küldésekor:', error);
}
}
}
};
</script>
125 changes: 66 additions & 59 deletions components/AppHeader.vue
View file
Open in desktop
@@ -1,61 +1,68 @@
<script setup>
const links = [
{ name: 'Főoldal', path: '/' },
{ name: 'Partnerek', path: '/partnerek' },
{ name: 'Szolgáltatások', path: '/szolgaltatasok' },
{ name: 'Dokumentumok', path: '/dokumentumok' },
{ name: 'Ajánlatkérés', path: '/ajanlatkeres' },
{ name: 'Kapcsolat', path: '/kapcsolat' },
{ name: 'Facebook', path: '/logo', imagePath: '/img/header/facebook.svg' },
]
</script>

<template>
<header class="header">
<div class="header-content d-flex">
<div class="logo-box header-content__logo-box">
<a href="/" class="header-content__logo-box__link">
<img src="/img/header/logo.svg" alt="Biztos Alkuszom" class="header-content__logo-box__link__img">
</a>
</div>
<div class="nav-box header-content__nav-box">
<nav class="menu">
<ul id="menu__list" class="menu__list d-flex">
<li v-for="link in links" :key="link.path" class="menu__list__li">
<NuxtLink :to="link.path"
:class="['menu__item text-color text-transform-uppercase', { 'menu__item--border-left': link.path === '/' }]">
<template v-if="link.imagePath">
<img :src="link.imagePath" :alt="link.name">
</template>
<template v-else>
{{ link.name }}
</template>
</NuxtLink>
</li>
</ul>
</nav>
</div>
</div>
<div class="header-bottom d-flex">
<div class="header-bottom__div">
<h1 class="header-bottom__div__h1 text-color-w text-transform-uppercase">
ÁGOSTON GÁBOR -
<span class="header-bottom__div__span">Az Ön alkusza</span>
</h1>
</div>
<div class="header-bottom__div header-bottom__div-linkbox">
<a href="tel:+36302345866" class="header-bottom__div-linkbox__link text-color-w">
<img src="/img/header/mobile.svg" alt="Biztos Alkuszom"
class="header-bottom__div-linkbox__link__img position-relative">
06 30 234 5866
</a>
<a href="mailto:biztos@alkuszom.info" class="header-bottom__div-linkbox__link text-color-w">
<img src="/img/header/mail.svg" alt="Biztos Alkuszom"
class="header-bottom__div-linkbox__link__img header-bottom__div-linkbox__link__img--margin-left position-relative">
biztos@alkuszom.info
</a>
</div>
</div>
</header>
<header class="header">
<div class="header-content d-flex">
<div class="logo-box header-content__logo-box">
<a href="/" class="header-content__logo-box__link">
<img src="/img/header/logo.svg" alt="Biztos Alkuszom" class="header-content__logo-box__link__img" />
</a>
</div>
<div class="nav-box header-content__nav-box">
<nav class="menu">
<ul id="menu__list" class="menu__list d-flex">
<li v-for="link in links" :key="link.path" class="menu__list__li">
<NuxtLink
:to="link.path"
:class="['menu__item text-color text-transform-uppercase', { 'menu__item--border-left': link.path === '/' }]"
>
<template v-if="link.imagePath">
<img :src="link.imagePath" :alt="link.name" />
</template>
<template v-else>
{{ link.name }}
</template>
</NuxtLink>
</li>
</ul>
</nav>
</div>
</div>
<div class="header-bottom d-flex">
<div class="header-bottom__div">
<h1 class="header-bottom__div__h1 text-color-w text-transform-uppercase">
ÁGOSTON GÁBOR -
<span class="header-bottom__div__span">Az Ön alkusza</span>
</h1>
</div>
<div class="header-bottom__div header-bottom__div-linkbox">
<a href="tel:+36302345866" class="header-bottom__div-linkbox__link text-color-w">
<img
src="/img/header/mobile.svg"
alt="Biztos Alkuszom"
class="header-bottom__div-linkbox__link__img position-relative"
/>
06 30 234 5866
</a>
<a href="mailto:biztos@alkuszom.info" class="header-bottom__div-linkbox__link text-color-w">
<img
src="/img/header/mail.svg"
alt="Biztos Alkuszom"
class="header-bottom__div-linkbox__link__img header-bottom__div-linkbox__link__img--margin-left position-relative"
/>
biztos@alkuszom.info
</a>
</div>
</div>
</header>
</template>

<script>
import { links } from '~/utils/js/links';


export default {
data() {
return {
links,
};
},
};
</script>
Empty file removed components/NuxtLogo.vue
View file
Open in desktop
Empty file.