{"id":350364,"date":"2023-07-17T15:03:03","date_gmt":"2023-07-17T15:03:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=350364"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=350364","title":{"rendered":"\u041f\u0440\u0430\u0432\u0434\u0430 \u043b\u0438 Astro \u0442\u0430\u043a \u0431\u044b\u0441\u0442\u0440, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Nuxt 3<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n

\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f, \u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0436\u0443\/\u0447\u0438\u0442\u0430\u044e\/\u0441\u043b\u044b\u0448\u0443 \u043f\u0440\u043e astro<\/a>, \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a\u043e\u0439 \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u044b\u0439, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c Astro \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d \u0431\u044b\u0441\u0442\u0440 — \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043d\u0430 \u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0431\u043b\u043e\u0433 \u0441 600 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u043b \u0435\u0433\u043e \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441 Nuxt 3 SSG.<\/p>\n

\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043c\u0435\u0440\u044f\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e pagespeed<\/a>.<\/p>\n

\u0421\u0440\u0430\u0437\u0443 \u0445\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044f \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 — \u043c\u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043a\u0430\u043a \u043e\u0431\u0441\u0442\u043e\u044f\u0442 \u0434\u0435\u043b\u0430 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0435\u0439\u0441\u0430\u0445 + \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c Astro.<\/p>\n

\u0422\u0435\u0441\u0442 1 (\u041f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0439\u0442)<\/h3>\n

\u041d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430 Nuxt 3 \u0438 Astro \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e tailwind \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 600 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438(\u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0441\u0442\u043e\u0432 \u043d\u0430 \u0431\u043b\u043e\u0433\u0435 \u0437\u0430 \u043f\u0430\u0440\u0443 \u043b\u0435\u0442).<\/p>\n

components\/blog\/Card.vue<\/em><\/p>\n

<script lang=\"ts\" setup><\/script>  <template>   <div class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\">     <img alt=\"test image\" height=\"200\" src=\"assets\/images\/test-image.png\" width=\"400\" \/>     <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>     <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and       typesetting industry. Lorem Ipsum has       been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and       scrambled it to make a type specimen book.<\/p>   <\/div> <\/template>  <style lang=\"scss\" scoped><\/style><\/code><\/pre>\n
components\/blog\/Card.astro<\/em><\/p>\n
--- import image from '~\/assets\/images\/test-image.png'; --- <a class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\" href=\"https:\/\/google.com\">     <img alt=\"test image\" height=\"200\" src={image.src} width=\"400\" \/>     <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>     <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and       typesetting industry. Lorem Ipsum has       been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and       scrambled it to make a type specimen book.<\/p> <\/a><\/code><\/pre>\n
\u0417\u0430\u043b\u0438\u043b \u0432\u0441\u0435 \u044d\u0442\u043e \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b:<\/p>\n
\"Astro\"<\/p>\n
Astro<\/figcaption><\/div>\n<\/figure>\n
\"Nuxt<\/p>\n
Nuxt 3<\/figcaption><\/div>\n<\/figure>\n
\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 Astro — 97%-100%, Nuxt 3 — 92%-96%. \u041f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0442\u0430\u043a \u043a\u0430\u043a Astro \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0438\u0441\u0442\u044b\u0439 html(\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0442\u043e \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0443 \u043d\u0438\u0445 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 full speed — zero js), \u043d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0440\u0430\u0439\u043e\u043d\u0435 \u0441\u043e\u0442\u043a\u0438, \u0442\u0443\u0442 \u043f\u043e-\u0441\u0443\u0442\u0438 \u043d\u0435\u0447\u0435\u043c\u0443 \u0441\u043d\u0438\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. Nuxt \u0435\u0449\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0431\u0430\u043d\u0434\u043b \u0441 \u0441\u0430\u043c\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0444\u043e\u0440\u043a\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0438\u0436\u0435.<\/p>\n
\u0422\u0435\u0441\u0442 2 (\u0414\u043e\u0431\u0430\u0432\u0438\u043b 1 js \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443)<\/h3>\n
\u0412 \u044d\u0442\u043e\u043c \u0442\u0435\u0441\u0442\u0435 \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 @sentry\/browser<\/a> — \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0441\u0430\u0439\u0442\u0435.<\/p>\n
\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b \u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435:<\/p>\n
import * as Sentry from \"@sentry\/browser\";  Sentry.init({   dsn: process.env.SENTRY_DSN,   integrations: [new Sentry.BrowserTracing()],   tracesSampleRate: 1.0, });<\/code><\/pre>\n
\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u043b\u0438\u043b \u044d\u0442\u043e \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b:<\/p>\n
\"Astro\"<\/p>\n
Astro<\/figcaption><\/div>\n<\/figure>\n
\"Nuxt<\/p>\n
Nuxt 3<\/figcaption><\/div>\n<\/figure>\n
\u0412\u0438\u0434\u0438\u043c \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, Astro \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 html \u0444\u0430\u0439\u043b + js \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 93%-97% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c. Nuxt 3 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0431\u0430\u043d\u0434\u043b + html + js \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a js \u043a\u043e\u0434\u0430 \u0431\u043e\u043b\u044c\u0448\u0435, \u0438\u043c\u0435\u0435\u0442 84%-88% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c.<\/p>\n
\u0422\u0435\u0441\u0442 3 (\u0421\u0434\u0435\u043b\u0430\u043b \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0430 js)<\/h3>\n
\u0422\u0443\u0442 \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c js \u043a\u043e\u0434\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a Astro \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0441\u0435\u0431\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437, \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 2 \u0442\u0435\u0441\u0442\u0430 Astro, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b js \u043a\u043e\u0434 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 web-components<\/a>, \u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Astro \u0441 Vue<\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Card(\u041f\u043e \u0441\u0443\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Vue \u043a Astro), \u043d\u0443 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u043e\u0434 \u043d\u0430 Nuxt 3.<\/p>\n
components\/blog\/Card.vue<\/em><\/p>\n
<script lang=\"ts\" setup> import { ref } from '#imports';  const selectedSlide = ref<number>(1);  const handlePrevButtonClick = () => {   selectedSlide.value = selectedSlide.value === 1 ? 5 : selectedSlide.value - 1; };  const handleNextButtonClick = () => {   selectedSlide.value = selectedSlide.value === 5 ? 1 : selectedSlide.value + 1; }; <\/script>  <template>   <a class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\">     <div class=\"relative\">       <button class=\"absolute left-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\"               @click=\"handlePrevButtonClick\"       >Prev       <\/button>       <span class=\"absolute top-2 left-[50%] translate-x-[-50%]\">{{ selectedSlide }}<\/span>       <img v-for=\"index in 5\" :key=\"index\" v-show=\"selectedSlide === index\" alt=\"test image\" height=\"200\"            src=\"assets\/images\/test-image.png\"            width=\"400\"       \/>       <button class=\"absolute right-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\"               @click=\"handleNextButtonClick\"       >Next       <\/button>     <\/div>     <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>     <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and       typesetting industry. Lorem Ipsum has       been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and       scrambled it to make a type specimen book.<\/p>   <\/a> <\/template>  <style lang=\"scss\" scoped><\/style><\/code><\/pre>\n
components\/blog\/Card.astro<\/em><\/p>\n
--- import image from '~\/assets\/images\/test-image.png'; --- <astro-card>   <a class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\">       <div class=\"relative\">           <button class=\"prev-button absolute left-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\">Prev<\/button>           <span class=\"selected-slide absolute top-2 left-[50%] translate-x-[-50%]\"><\/span>           {           [1, 2, 3, 4, 5].map((index) =>           (<img alt=\"test image\" height=\"200\"              src={image.src}              width=\"400\"              class:list={[{ hidden: index !== 1 }, `slide-${index}`]}           \/>))           }           <button class=\"next-button absolute right-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\">Next<\/button>       <\/div>       <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>       <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and         typesetting industry. Lorem Ipsum has         been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and         scrambled it to make a type specimen book.<\/p>   <\/a> <\/astro-card>  <script> class AstroCard extends HTMLElement {   constructor() {     super();     let selectedSlide = 1;     let selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);     let selectSlideNumberItem = this.querySelector('.selected-slide');          selectSlideNumberItem.innerText = selectedSlide;      this.querySelector('.prev-button').addEventListener('click', (event) => {       selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('visible');       selectedSlideItem.classList.add('hidden');        selectedSlide = selectedSlide === 1 ? 5 : selectedSlide - 1;        selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('hidden');       selectedSlideItem.classList.add('visible');        selectSlideNumberItem.innerText = selectedSlide;     })       this.querySelector('.next-button').addEventListener('click', (event) => {       selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('visible');       selectedSlideItem.classList.add('hidden');        selectedSlide = selectedSlide === 5 ? 1 : selectedSlide + 1;        selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('hidden');       selectedSlideItem.classList.add('visible');        selectSlideNumberItem.innerText = selectedSlide;     })   } }   customElements.define('astro-card', AstroCard); <\/script>  <style> .hidden {   display: none; }  .visible {   display: block; } <\/style> <\/code><\/pre>\n
\u0417\u0430\u043b\u0438\u0432\u0430\u044e \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
\"Astro<\/p>\n
Astro with Web-Components<\/figcaption><\/div>\n<\/figure>\n
\"Astro<\/p>\n
Astro with Vue component<\/figcaption><\/div>\n<\/figure>\n
\"Nuxt<\/p>\n
Nuxt 3<\/figcaption><\/div>\n<\/figure>\n
Astro \u0441 \u0432\u0435\u0431 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0441\u0435\u0431\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b, 76%-80% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c. Astro \u0441 Vue \u043f\u043e\u0445\u0443\u0436\u0435, \u043d\u043e \u0442\u0443\u0442 \u0443\u0436\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u0449\u0438\u0442\u044c \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u0431\u0430\u043d\u0434\u043b vue, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e js \u043a\u043e\u0434\u0430 \u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 70%-74% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c. Nuxt 3 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a Astro \u0441 Vue 68%-72% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c.<\/p>\n
\u0418\u0442\u043e\u0433\u043e<\/h3>\n
Astro \u0438 \u043f\u0440\u0430\u0432\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043a\u0430\u043a \u0438 \u0437\u0430\u044f\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0442\u044b \u043f\u0438\u0448\u0435\u0448\u044c \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c js, \u043b\u0438\u0431\u043e \u043d\u0430 \u0442\u0432\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0432\u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043d\u0435\u0442 js \u043a\u043e\u0434\u0430(\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0438\/\u0431\u043b\u043e\u0433\u0438), \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 Vue\/React\/Preact — \u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0448\u044c +- \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0430\u043a \u043d\u0430 Nuxt\/Next. \u0411\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0435\u0433\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c, \u043d\u043e, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043f\u043e\u043a\u0430 \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0440\u0430\u043d\u043e\u0432\u0430\u0442\u043e =)<\/p>\n
\u0412\u0441\u0435\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0435\u0433\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430!<\/p>\n
\u0418\u0445 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 astro \u043e\u0441\u0442\u0440\u043e\u0432\u0430\u043c\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0432\u0441\u0435\u043c \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c — \u0442\u044b\u043a<\/a>.<\/p>\n
\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0422\u0433-\u043a\u0430\u043d\u0430\u043b<\/a>, \u0433\u0434\u0435 \u044f \u043f\u0438\u0448\u0443 \u043f\u0440\u043e \u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435, \u0434\u0435\u043b\u044e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c\u0438 \u043a\u043d\u0438\u0436\u043a\u0430\u043c\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0432\u0442\u043e\u0440\u043e\u0432.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
  <\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/748366\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n
\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f, \u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0436\u0443\/\u0447\u0438\u0442\u0430\u044e\/\u0441\u043b\u044b\u0448\u0443 \u043f\u0440\u043e astro<\/a>, \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a\u043e\u0439 \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u044b\u0439, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c Astro \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d \u0431\u044b\u0441\u0442\u0440 — \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043d\u0430 \u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0431\u043b\u043e\u0433 \u0441 600 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u043b \u0435\u0433\u043e \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441 Nuxt 3 SSG.<\/p>\n
\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043c\u0435\u0440\u044f\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e pagespeed<\/a>.<\/p>\n
\u0421\u0440\u0430\u0437\u0443 \u0445\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044f \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 — \u043c\u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043a\u0430\u043a \u043e\u0431\u0441\u0442\u043e\u044f\u0442 \u0434\u0435\u043b\u0430 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0435\u0439\u0441\u0430\u0445 + \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c Astro.<\/p>\n
\u0422\u0435\u0441\u0442 1 (\u041f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0439\u0442)<\/h3>\n
\u041d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430 Nuxt 3 \u0438 Astro \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e tailwind \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 600 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438(\u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0441\u0442\u043e\u0432 \u043d\u0430 \u0431\u043b\u043e\u0433\u0435 \u0437\u0430 \u043f\u0430\u0440\u0443 \u043b\u0435\u0442).<\/p>\n
components\/blog\/Card.vue<\/em><\/p>\n
<script lang=\"ts\" setup><\/script>  <template>   <div class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\">     <img alt=\"test image\" height=\"200\" src=\"assets\/images\/test-image.png\" width=\"400\" \/>     <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>     <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and       typesetting industry. Lorem Ipsum has       been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and       scrambled it to make a type specimen book.<\/p>   <\/div> <\/template>  <style lang=\"scss\" scoped><\/style><\/code><\/pre>\n
components\/blog\/Card.astro<\/em><\/p>\n
--- import image from '~\/assets\/images\/test-image.png'; --- <a class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\" href=\"https:\/\/google.com\">     <img alt=\"test image\" height=\"200\" src={image.src} width=\"400\" \/>     <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>     <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and       typesetting industry. Lorem Ipsum has       been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and       scrambled it to make a type specimen book.<\/p> <\/a><\/code><\/pre>\n
\u0417\u0430\u043b\u0438\u043b \u0432\u0441\u0435 \u044d\u0442\u043e \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b:<\/p>\n
\n
Astro<\/figcaption><\/div>\n<\/figure>\n
\n
Nuxt 3<\/figcaption><\/div>\n<\/figure>\n
\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 Astro — 97%-100%, Nuxt 3 — 92%-96%. \u041f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0442\u0430\u043a \u043a\u0430\u043a Astro \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0438\u0441\u0442\u044b\u0439 html(\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0442\u043e \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0443 \u043d\u0438\u0445 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 full speed — zero js), \u043d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0440\u0430\u0439\u043e\u043d\u0435 \u0441\u043e\u0442\u043a\u0438, \u0442\u0443\u0442 \u043f\u043e-\u0441\u0443\u0442\u0438 \u043d\u0435\u0447\u0435\u043c\u0443 \u0441\u043d\u0438\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. Nuxt \u0435\u0449\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0431\u0430\u043d\u0434\u043b \u0441 \u0441\u0430\u043c\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0444\u043e\u0440\u043a\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0438\u0436\u0435.<\/p>\n
\u0422\u0435\u0441\u0442 2 (\u0414\u043e\u0431\u0430\u0432\u0438\u043b 1 js \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443)<\/h3>\n
\u0412 \u044d\u0442\u043e\u043c \u0442\u0435\u0441\u0442\u0435 \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 @sentry\/browser<\/a> — \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0441\u0430\u0439\u0442\u0435.<\/p>\n
\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b \u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435:<\/p>\n
import * as Sentry from \"@sentry\/browser\";  Sentry.init({   dsn: process.env.SENTRY_DSN,   integrations: [new Sentry.BrowserTracing()],   tracesSampleRate: 1.0, });<\/code><\/pre>\n
\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u043b\u0438\u043b \u044d\u0442\u043e \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b:<\/p>\n
\n
Astro<\/figcaption><\/div>\n<\/figure>\n
\n
Nuxt 3<\/figcaption><\/div>\n<\/figure>\n
\u0412\u0438\u0434\u0438\u043c \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, Astro \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 html \u0444\u0430\u0439\u043b + js \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 93%-97% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c. Nuxt 3 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0431\u0430\u043d\u0434\u043b + html + js \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a js \u043a\u043e\u0434\u0430 \u0431\u043e\u043b\u044c\u0448\u0435, \u0438\u043c\u0435\u0435\u0442 84%-88% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c.<\/p>\n
\u0422\u0435\u0441\u0442 3 (\u0421\u0434\u0435\u043b\u0430\u043b \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0430 js)<\/h3>\n
\u0422\u0443\u0442 \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c js \u043a\u043e\u0434\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a Astro \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0441\u0435\u0431\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437, \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 2 \u0442\u0435\u0441\u0442\u0430 Astro, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b js \u043a\u043e\u0434 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 web-components<\/a>, \u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Astro \u0441 Vue<\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Card(\u041f\u043e \u0441\u0443\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Vue \u043a Astro), \u043d\u0443 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u043e\u0434 \u043d\u0430 Nuxt 3.<\/p>\n
components\/blog\/Card.vue<\/em><\/p>\n
<script lang=\"ts\" setup> import { ref } from '#imports';  const selectedSlide = ref<number>(1);  const handlePrevButtonClick = () => {   selectedSlide.value = selectedSlide.value === 1 ? 5 : selectedSlide.value - 1; };  const handleNextButtonClick = () => {   selectedSlide.value = selectedSlide.value === 5 ? 1 : selectedSlide.value + 1; }; <\/script>  <template>   <a class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\">     <div class=\"relative\">       <button class=\"absolute left-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\"               @click=\"handlePrevButtonClick\"       >Prev       <\/button>       <span class=\"absolute top-2 left-[50%] translate-x-[-50%]\">{{ selectedSlide }}<\/span>       <img v-for=\"index in 5\" :key=\"index\" v-show=\"selectedSlide === index\" alt=\"test image\" height=\"200\"            src=\"assets\/images\/test-image.png\"            width=\"400\"       \/>       <button class=\"absolute right-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\"               @click=\"handleNextButtonClick\"       >Next       <\/button>     <\/div>     <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>     <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and       typesetting industry. Lorem Ipsum has       been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and       scrambled it to make a type specimen book.<\/p>   <\/a> <\/template>  <style lang=\"scss\" scoped><\/style><\/code><\/pre>\n
components\/blog\/Card.astro<\/em><\/p>\n
--- import image from '~\/assets\/images\/test-image.png'; --- <astro-card>   <a class=\"flex flex-col gap-6 bg-[#c6c6c6] rounded-[16px] p-8\">       <div class=\"relative\">           <button class=\"prev-button absolute left-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\">Prev<\/button>           <span class=\"selected-slide absolute top-2 left-[50%] translate-x-[-50%]\"><\/span>           {           [1, 2, 3, 4, 5].map((index) =>           (<img alt=\"test image\" height=\"200\"              src={image.src}              width=\"400\"              class:list={[{ hidden: index !== 1 }, `slide-${index}`]}           \/>))           }           <button class=\"next-button absolute right-0 top-[50%] translate-y-[-50%] p-4 bg-[#7a75e2] rounded-[8px]\">Next<\/button>       <\/div>       <h2 class=\"font-bold text-[20px] leading-6\">Article Title<\/h2>       <p class=\"font-medium text-base leading-5\">Article Description Lorem Ipsum is simply dummy text of the printing and         typesetting industry. Lorem Ipsum has         been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and         scrambled it to make a type specimen book.<\/p>   <\/a> <\/astro-card>  <script> class AstroCard extends HTMLElement {   constructor() {     super();     let selectedSlide = 1;     let selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);     let selectSlideNumberItem = this.querySelector('.selected-slide');          selectSlideNumberItem.innerText = selectedSlide;      this.querySelector('.prev-button').addEventListener('click', (event) => {       selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('visible');       selectedSlideItem.classList.add('hidden');        selectedSlide = selectedSlide === 1 ? 5 : selectedSlide - 1;        selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('hidden');       selectedSlideItem.classList.add('visible');        selectSlideNumberItem.innerText = selectedSlide;     })       this.querySelector('.next-button').addEventListener('click', (event) => {       selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('visible');       selectedSlideItem.classList.add('hidden');        selectedSlide = selectedSlide === 5 ? 1 : selectedSlide + 1;        selectedSlideItem = this.querySelector(`.slide-${selectedSlide}`);       selectedSlideItem.classList.remove('hidden');       selectedSlideItem.classList.add('visible');        selectSlideNumberItem.innerText = selectedSlide;     })   } }   customElements.define('astro-card', AstroCard); <\/script>  <style> .hidden {   display: none; }  .visible {   display: block; } <\/style> <\/code><\/pre>\n
\u0417\u0430\u043b\u0438\u0432\u0430\u044e \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
\n
Astro with Web-Components<\/figcaption><\/div>\n<\/figure>\n
\n
Astro with Vue component<\/figcaption><\/div>\n<\/figure>\n
\n
Nuxt 3<\/figcaption><\/div>\n<\/figure>\n
Astro \u0441 \u0432\u0435\u0431 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0441\u0435\u0431\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b, 76%-80% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c. Astro \u0441 Vue \u043f\u043e\u0445\u0443\u0436\u0435, \u043d\u043e \u0442\u0443\u0442 \u0443\u0436\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u0449\u0438\u0442\u044c \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u0431\u0430\u043d\u0434\u043b vue, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e js \u043a\u043e\u0434\u0430 \u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 70%-74% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c. Nuxt 3 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a Astro \u0441 Vue 68%-72% \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c.<\/p>\n
\u0418\u0442\u043e\u0433\u043e<\/h3>\n
Astro \u0438 \u043f\u0440\u0430\u0432\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043a\u0430\u043a \u0438 \u0437\u0430\u044f\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0442\u044b \u043f\u0438\u0448\u0435\u0448\u044c \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c js, \u043b\u0438\u0431\u043e \u043d\u0430 \u0442\u0432\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0432\u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043d\u0435\u0442 js \u043a\u043e\u0434\u0430(\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0438\/\u0431\u043b\u043e\u0433\u0438), \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 Vue\/React\/Preact — \u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0448\u044c +- \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0430\u043a \u043d\u0430 Nuxt\/Next. \u0411\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0435\u0433\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c, \u043d\u043e, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043f\u043e\u043a\u0430 \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0440\u0430\u043d\u043e\u0432\u0430\u0442\u043e =)<\/p>\n
\u0412\u0441\u0435\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0435\u0433\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430!<\/p>\n
\u0418\u0445 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 astro \u043e\u0441\u0442\u0440\u043e\u0432\u0430\u043c\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0432\u0441\u0435\u043c \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c — \u0442\u044b\u043a<\/a>.<\/p>\n
\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0422\u0433-\u043a\u0430\u043d\u0430\u043b<\/a>, \u0433\u0434\u0435 \u044f \u043f\u0438\u0448\u0443 \u043f\u0440\u043e \u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435, \u0434\u0435\u043b\u044e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c\u0438 \u043a\u043d\u0438\u0436\u043a\u0430\u043c\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0432\u0442\u043e\u0440\u043e\u0432.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
  <\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/748366\/<\/a>
<\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-350364","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/350364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=350364"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/350364\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=350364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=350364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=350364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}