Yassaaa Comments - Answer Overflow

Yassaaa

Explore posts from servers

NNuxt JCHJava Community | Help. Code. Learn.

•Created by Yassaaa on 4/7/2025 in #❓・help

I just need help from the nuxt ai

@kapa.ai that was not it... take a look at my nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite'
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
    modules: [
        'nuxt-svgo',
        '@nuxt/eslint',
        '@vueuse/nuxt',
        '@nuxt/image',
        '@nuxt/icon',
        '@pinia/nuxt',
        'pinia-plugin-persistedstate'
    ],

    devtools: {
        enabled: true
    },

    app: {
        head: {
            title: 'Nuxt + TailwindV4 Template',
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            meta: [
                { name: 'format-detection', content: 'no' }
            ]
        },
        pageTransition: {
            name: 'page',
            mode: 'out-in'
        },
        layoutTransition: {
            name: 'layout',
            mode: 'out-in'
        }
    },

    css: [
        '@/assets/css/main.css'
    ],

    router: {
        options: {
            scrollBehaviorType: 'smooth'
        }
    },

    future: {
        compatibilityVersion: 4
    },

    experimental: {
        typedPages: true
    },

    compatibilityDate: '2025-03-01',

    vite: {
        plugins: [
            tailwindcss()
        ]
    },

    eslint: {
        checker: true,
        config: {
            stylistic: true
        }
    },

    svgo: {
        autoImportPath: '@/assets/'
    }
})

import tailwindcss from '@tailwindcss/vite'
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
    modules: [
        'nuxt-svgo',
        '@nuxt/eslint',
        '@vueuse/nuxt',
        '@nuxt/image',
        '@nuxt/icon',
        '@pinia/nuxt',
        'pinia-plugin-persistedstate'
    ],

    devtools: {
        enabled: true
    },

    app: {
        head: {
            title: 'Nuxt + TailwindV4 Template',
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            meta: [
                { name: 'format-detection', content: 'no' }
            ]
        },
        pageTransition: {
            name: 'page',
            mode: 'out-in'
        },
        layoutTransition: {
            name: 'layout',
            mode: 'out-in'
        }
    },

    css: [
        '@/assets/css/main.css'
    ],

    router: {
        options: {
            scrollBehaviorType: 'smooth'
        }
    },

    future: {
        compatibilityVersion: 4
    },

    experimental: {
        typedPages: true
    },

    compatibilityDate: '2025-03-01',

    vite: {
        plugins: [
            tailwindcss()
        ]
    },

    eslint: {
        checker: true,
        config: {
            stylistic: true
        }
    },

    svgo: {
        autoImportPath: '@/assets/'
    }
})

16 replies

NNuxt

•Created by Yassaaa on 4/7/2025 in #❓・help

I just need help from the nuxt ai

@kapa.ai am I maybe getting that error because of my router.options.ts?

import type { RouterOptions } from '@nuxt/schema'

export default {
    scrollBehavior(to, _from, savedPosition)
    {
        return new Promise((resolve, _reject) =>
        {
            setTimeout(() =>
            {
                if (savedPosition != null)
                {
                    resolve(savedPosition)
                }
                else
                {
                    if (to.hash)
                    {
                        resolve({
                            el: to.hash,
                            top: 0
                        })
                    }
                    else
                    {
                        resolve({ top: 0 })
                    }
                }
            }, 100)
        })
    }
} satisfies RouterOptions

import type { RouterOptions } from '@nuxt/schema'

export default {
    scrollBehavior(to, _from, savedPosition)
    {
        return new Promise((resolve, _reject) =>
        {
            setTimeout(() =>
            {
                if (savedPosition != null)
                {
                    resolve(savedPosition)
                }
                else
                {
                    if (to.hash)
                    {
                        resolve({
                            el: to.hash,
                            top: 0
                        })
                    }
                    else
                    {
                        resolve({ top: 0 })
                    }
                }
            }, 100)
        })
    }
} satisfies RouterOptions

16 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

in nuxt.config.ts:

  nodemailer: {
    from: '"New Contact From Submission" <[email protected]>',
    host: process.env.NUXT_nmHost,
    port: Number(process.env.NUXT_nmPort),
    secure: process.env.NUXT_nmSecure === 'true',
    auth: {
      user: process.env.NUXT_nmUser,
      pass: process.env.NUXT_nmPass,
    },
  },

  nodemailer: {
    from: '"New Contact From Submission" <[email protected]>',
    host: process.env.NUXT_nmHost,
    port: Number(process.env.NUXT_nmPort),
    secure: process.env.NUXT_nmSecure === 'true',
    auth: {
      user: process.env.NUXT_nmUser,
      pass: process.env.NUXT_nmPass,
    },
  },

20 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

If it was not clear I used nuxt-nodemailer module. so ofc you need to make sure you configured it so it can work. 👍

20 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

I hope this answers your question 🙂

20 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

then I created a contact.post.ts in server/api/ code:

import { generateEmailTemplate } from '../../utils/emailTemplate';

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const { sendMail } = useNodeMailer();

  const mailOptions = {
    to: '[email protected]', // you need to use your desired email that you want to send to (for my case was just contact form emails that I receive so I was fine with sending it to one of my emails
    subject: body.subject,
    html: generateEmailTemplate(body),
    replyTo: body.email,
  };

  try {
    await sendMail(mailOptions);
    return { success: true, message: 'E-Mail erfolgreich gesendet.' };
  } catch (error) {
    console.error('Fehler beim Senden der E-Mail:', error);
    return { success: false, message: 'E-Mail konnte nicht gesendet werden.' };
  }
});

import { generateEmailTemplate } from '../../utils/emailTemplate';

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const { sendMail } = useNodeMailer();

  const mailOptions = {
    to: '[email protected]', // you need to use your desired email that you want to send to (for my case was just contact form emails that I receive so I was fine with sending it to one of my emails
    subject: body.subject,
    html: generateEmailTemplate(body),
    replyTo: body.email,
  };

  try {
    await sendMail(mailOptions);
    return { success: true, message: 'E-Mail erfolgreich gesendet.' };
  } catch (error) {
    console.error('Fehler beim Senden der E-Mail:', error);
    return { success: false, message: 'E-Mail konnte nicht gesendet werden.' };
  }
});

20 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

import { styles } from './emailStyles';
import { renderMessageHeader, renderMessageInfo, renderMessageBody } from './emailSections';

export function generateEmailTemplate({
  name,
  email,
  service,
  subject,
  message,
}: {
  name: string;
  email: string;
  service: string;
  subject: string;
  message: string;
}) {
  return `
    <div style="${styles.container}">
      <div style="${styles.wrapper}">
        ${renderMessageHeader()}
        ${renderMessageInfo(name, email, service)}
        ${renderMessageBody(subject, message)}
      </div>
    </div>
  `;
}

import { styles } from './emailStyles';
import { renderMessageHeader, renderMessageInfo, renderMessageBody } from './emailSections';

export function generateEmailTemplate({
  name,
  email,
  service,
  subject,
  message,
}: {
  name: string;
  email: string;
  service: string;
  subject: string;
  message: string;
}) {
  return `
    <div style="${styles.container}">
      <div style="${styles.wrapper}">
        ${renderMessageHeader()}
        ${renderMessageInfo(name, email, service)}
        ${renderMessageBody(subject, message)}
      </div>
    </div>
  `;
}

20 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

// Reusable email-safe styles with mobile responsiveness
export const styles = {
  container: `
    min-height: 100vh;
    padding: 5%;
    background-color: #fff8ef;
    @media (max-width: 768px) {
      padding: 20px;
    }
  `,
  wrapper: `
    border: 4px solid #de943d;
    background-color: #fff8ef;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    @media (max-width: 768px) {
      padding: 20px;
      gap: 15px;
    }
  `,
  // Using a mobile-first approach for the header
  header: `
    text-align: center;
    font-size: 24px !important; /* Base size for mobile */
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: black;
    max-width: 100%;
    @media (min-width: 768px) {
      font-size: 38px !important; /* Larger size for desktop */
    }
  `,
  info: `
    display: flex;
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    align-self: start;
    font-size: 1.1rem;
    color: black;
    width: 100%;
    box-sizing: border-box;
    @media (max-width: 768px) {
      padding: 15px;
      font-size: 1rem;
      gap: 8px;
    }
  `,
  body: `
    background-color: white;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: black;
    width: 100%;
    box-sizing: border-box;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
    @media (max-width: 768px) {
      padding: 15px;
      gap: 15px;
    }
  `,
  subject: `
    font-size: 1.1rem;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 4px solid #de943d;
    @media (max-width: 768px) {
      font-size: 1rem;
      padding-bottom: 6px;
      border-bottom-width: 3px;
    }
  `,
  message: `
    white-space: pre-wrap;
    flex-grow: 1;
    word-break: break-word;
  `,
};

// Reusable email-safe styles with mobile responsiveness
export const styles = {
  container: `
    min-height: 100vh;
    padding: 5%;
    background-color: #fff8ef;
    @media (max-width: 768px) {
      padding: 20px;
    }
  `,
  wrapper: `
    border: 4px solid #de943d;
    background-color: #fff8ef;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    @media (max-width: 768px) {
      padding: 20px;
      gap: 15px;
    }
  `,
  // Using a mobile-first approach for the header
  header: `
    text-align: center;
    font-size: 24px !important; /* Base size for mobile */
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: black;
    max-width: 100%;
    @media (min-width: 768px) {
      font-size: 38px !important; /* Larger size for desktop */
    }
  `,
  info: `
    display: flex;
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    align-self: start;
    font-size: 1.1rem;
    color: black;
    width: 100%;
    box-sizing: border-box;
    @media (max-width: 768px) {
      padding: 15px;
      font-size: 1rem;
      gap: 8px;
    }
  `,
  body: `
    background-color: white;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: black;
    width: 100%;
    box-sizing: border-box;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
    @media (max-width: 768px) {
      padding: 15px;
      gap: 15px;
    }
  `,
  subject: `
    font-size: 1.1rem;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 4px solid #de943d;
    @media (max-width: 768px) {
      font-size: 1rem;
      padding-bottom: 6px;
      border-bottom-width: 3px;
    }
  `,
  message: `
    white-space: pre-wrap;
    flex-grow: 1;
    word-break: break-word;
  `,
};

20 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

here is the code in order:

import { styles } from './emailStyles';

export function renderMessageHeader() {
  return `<h2 style="${styles.header}">Neue Anfrage erhalten</h2>`;
}

export function renderMessageInfo(name: string, email: string, service: string) {
  return `
    <div style="${styles.info}">
      <p><strong>Name:</strong> ${name}</p>
      <p><strong>E-mail:</strong> ${email}</p>
      <p><strong>Dienstleistung:</strong> ${service}</p>
    </div>
  `;
}

export function renderMessageBody(subject: string, message: string) {
  return `
    <div style="${styles.body}">
      <div style="${styles.subject}">Betreff: ${subject}</div>
      <p style="${styles.message}">${message}</p>
    </div>
  `;
}

import { styles } from './emailStyles';

export function renderMessageHeader() {
  return `<h2 style="${styles.header}">Neue Anfrage erhalten</h2>`;
}

export function renderMessageInfo(name: string, email: string, service: string) {
  return `
    <div style="${styles.info}">
      <p><strong>Name:</strong> ${name}</p>
      <p><strong>E-mail:</strong> ${email}</p>
      <p><strong>Dienstleistung:</strong> ${service}</p>
    </div>
  `;
}

export function renderMessageBody(subject: string, message: string) {
  return `
    <div style="${styles.body}">
      <div style="${styles.subject}">Betreff: ${subject}</div>
      <p style="${styles.message}">${message}</p>
    </div>
  `;
}

20 replies

NNuxt

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

I dont think that you could use nuxt components in mail tempaltes because those use pure html+css. what I ended up doing in another project was in a utils folder I created: - emailSections.ts - emailStyles.ts - emailTemplate.ts

20 replies

NNuxt

•Created by Yassaaa on 3/29/2025 in #❓・help

Help with Tailwind InteliSense in VSCode IDE

im in the call

31 replies

NNuxt

•Created by Yassaaa on 3/29/2025 in #❓・help

Help with Tailwind InteliSense in VSCode IDE

I don't like anydesk sorry

31 replies

NNuxt