{"id":318237,"date":"2021-02-18T15:06:49","date_gmt":"2021-02-18T15:06:49","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=318237"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=318237","title":{"rendered":"Nuxt.js app \u043e\u0442 UI-\u043a\u0438\u0442\u0430 \u0434\u043e \u0434\u0435\u043f\u043b\u043e\u044f"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>  \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435, \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u0433 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Nuxt.js \u0441 \u043d\u0443\u043b\u044f. <\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0431\u0430\u0437\u0443, \u043e\u0441\u043d\u043e\u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Nuxt.js:<\/p>\n<ul>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, <\/li>\n<li>assets \u0438 static: \u0441\u0442\u0438\u043b\u0438, \u0448\u0440\u0438\u0444\u0442\u044b, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u0442\u044b,<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432,<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 layouts,<\/li>\n<li>\u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0434\u0435\u043f\u043b\u043e\u0439).<\/li>\n<\/ul>\n<p>  \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c! <br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e Nuxt.js <\/h3>\n<p>  Nuxt \u2014 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Vue. Nuxt.js \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u044f \u0434\u0435\u0442\u0430\u043b\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443, \u043c\u044b \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c \u0432\u0440\u0435\u043c\u044f \u0438 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>  <b>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 Nuxt:<\/b><\/p>\n<ul>\n<li>SPA, SSR \u0438 \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440 \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b; \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u0442 \u043d\u0430\u0441 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u2014 \u044d\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u043c \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0430\u0439\u0442\u0430, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0434\u0435\u043f\u043b\u043e\u0438\u043c \u0438\u0445 \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0430\u0447\u0438 \u0441\u0442\u0430\u0442\u0438\u043a\u0438.<\/li>\n<li>\u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 SEO \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f SSR \u0438\u043b\u0438 \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/li>\n<li>\u0411\u044b\u0441\u0442\u0440\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u0430\u0439\u0442\u0430\u043c\u0438. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 js chunks, css styles \u0438 API \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442 webpack 4, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c Nuxt).<\/li>\n<li>\u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 Google Lighthouse \/ Page Speed. \u041f\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c 100\/100 \u0434\u0430\u0436\u0435 \u043d\u0430 \u0441\u043b\u0430\u0431\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/li>\n<li>CSS Modules, Babel, Postscc \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u0440\u0443\u0442\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <a href=\"https:\/\/github.com\/nuxt\/create-nuxt-app\">create-nuxt-app<\/a>.<\/li>\n<li>\u0417\u0430\u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u0445.<\/li>\n<li>\u0411\u043e\u043b\u0435\u0435 50 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438\u0437 \u043e\u0431\u0448\u0438\u0440\u043d\u043e\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b Vue.js.<\/li>\n<\/ul>\n<p>  \u041e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u0445 Nuxt \u043c\u043e\u0436\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e. \u042d\u0442\u043e \u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u044e\u0431\u0438\u043b \u0437\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0433\u0438\u0431\u043a\u0438\u0435 \u0438 \u043b\u0435\u0433\u043a\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0418\u0442\u0430\u043a, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0430\u0447\u0430\u0442\u044c \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043d\u0430 \u0434\u0435\u043b\u0435.<br \/>  \u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e Nuxt.js \u043d\u0430 <a href=\"https:\/\/ru.nuxtjs.org\/\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435<\/a>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u043b\u043e\u0436\u0435\u043d\u044b <a href=\"https:\/\/ru.nuxtjs.org\/docs\/2.x\/get-started\/installation\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h3>\u0414\u0438\u0437\u0430\u0439\u043d<\/h3>\n<p>  \u041f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0439, \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0430 \u0435\u0449\u0435 \u043b\u0443\u0447\u0448\u0435 UI-\u043a\u0438\u0442, \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0442 \u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u044f\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u043f\u043e\u0431\u043b\u0438\u0437\u043e\u0441\u0442\u0438 \u043d\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u043d\u0430\u0448\u0435\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043c\u044b \u0441\u043f\u0440\u0430\u0432\u0438\u043c\u0441\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e! <\/p>\n<p>  \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u043b\u043e\u0433\u0430 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c, \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u0441 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Nuxt.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043e\u043d\u043b\u0430\u0439\u043d-\u0441\u0435\u0440\u0432\u0438\u0441 Figma. \u0414\u0438\u0437\u0430\u0439\u043d \u0438 UI-\u043a\u0438\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e <a href=\"https:\/\/www.figma.com\/file\/s1B9t0XOmRhtNY8daezIs7\/Nuxt.js-blog\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u043e\u0439 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Nuxt <a href=\"https:\/\/github.com\/nuxt\/create-nuxt-app\">create-nuxt-app<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 cli \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442, \u0443\u043a\u0430\u0437\u0430\u0432 \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435:<\/p>\n<pre><code class=\"bash\">npx create-nuxt-app nuxt-blog<\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430\u043f\u043e\u0432 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u043d\u0430\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0438\u0445 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0446\u0438\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog#selected-options-nuxt-create-app\">Github<\/a>.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441 Typescript.<\/p>\n<p>  \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Vue c Typescript \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0430 API: <a href=\"https:\/\/typescript.nuxtjs.org\/cookbook\/components\/#options-api\">Options API<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/typescript.nuxtjs.org\/cookbook\/components\/#class-api\">Class API<\/a>. <\/p>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043e\u043d\u0438 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u043e\u0434\u043d\u0430\u043a\u043e \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u041b\u0438\u0447\u043d\u043e \u043c\u043d\u0435 \u0431\u043b\u0438\u0436\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Options API, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443: npm run dev. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043d\u0430 localhost:3000.<\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 Nuxt \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <a href=\"https:\/\/github.com\/webpack\/webpack-dev-server\">webpack-dev-server<\/a> \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c <a href=\"https:\/\/webpack.js.org\/concepts\/hot-module-replacement\/\">HMR<\/a>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0438 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0439.<\/p>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0435\u043c\u043e\u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f \u043d\u0435\u0433\u043e. \u041d\u043e \u043a\u0440\u0430\u0439\u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0435 \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0433\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0432\u044b \u043d\u0435 \u043a\u0430\u0441\u0430\u043b\u0438\u0441\u044c \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u044b, \u0442\u043e \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <a href=\"https:\/\/github.com\/facebook\/jest\">Jest<\/a> \u2014 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 Nuxt \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 <a href=\"https:\/\/vue-test-utils.vuejs.org\/ru\/\">vue-test-utils<\/a>.<\/p>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>  Nuxt \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0443\u044e \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>  <code>-- Assets<br \/>  -- Static<br \/>  -- Pages<br \/>  -- Middleware<br \/>  -- Components<br \/>  -- Layouts<br \/>  -- Plugins<br \/>  -- Store<br \/>  -- nuxt.config.js<br \/>  -- ...other files<\/code><\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u043d\u0435\u043b\u044c\u0437\u044f \u043b\u0443\u0447\u0448\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0435\u0451 \u043c\u0435\u043d\u044f\u0442\u044c.<br \/>  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/nuxtjs.org\/docs\/2.x\/get-started\/directory-structure\">\u0441\u0430\u0439\u0442\u0435 Nuxt<\/a>.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  1. \u0423\u0434\u0430\u043b\u0438\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 Nuxt.<br \/>  2. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c pug \u0438 scss \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npm i --save-dev pug pug-plain-loader node-sass sass-loader fibers<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 lang \u0434\u043b\u044f \u0442\u0435\u0433\u043e\u0432 template \u0438 style:<\/p>\n<pre><code class=\"javascript\">&lt;template lang=&quot;pug&quot;&gt;&lt;\/template&gt;  &lt;style lang=&quot;scss&quot;&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>  3. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e stylelint \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 ::v-deep, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043a \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044f scoped. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c.<\/p>\n<pre><code class=\"javascript\">{   rules: {       'at-rule-no-unknown': null,       'selector-pseudo-element-no-unknown': [         true,         {           ignorePseudoElements: ['v-deep'],         },       ],     }, }<\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0430\u0434\u0438, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u044d\u0442\u0430\u043f\u0443.<\/p>\n<h3>\u041f\u043e\u0441\u0442\u044b<\/h3>\n<p>  \u041f\u043e\u0441\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 content\/posts, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0430\u0431\u043e\u0440\u0430 markdown-\u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c 5 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043b\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f 1.md, 2.md \u0438 \u0442. \u0434.<\/p>\n<p>  \u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 content \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b Posts.d.ts, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e \u0432\u0441\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u0441\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">export type Post = {     id: number     title: string   desc: string   file: string   img: string   }<\/code><\/pre>\n<p>  \u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u0435\u0439 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439.<\/p>\n<p>  \u0418\u0434\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0436\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c posts.ts \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"javascript\">import { Post } from '.\/Post'    export default [     {     id: 1,       title: 'Post 1',       desc:         'A short description of the post to keep the user interested.' +         ' Description can be of different lengths, blocks are aligned' +         ' to the height of the block with the longest description',       file: 'content\/posts\/1.md',     img: 'assets\/images\/1.svg',   },      ...    {       id: 5,       title: 'Post 5',       desc:         'A short description of the post to keep the user interested.' +         ' Description can be of different lengths, blocks are aligned' +         ' to the height of the block with the longest description',       file: 'content\/posts\/5.md',     img: 'assets\/images\/5.svg',   },   ] as Post[]<\/code><\/pre>\n<p>  \u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 img \u043c\u044b \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 assets\/images, \u043d\u043e \u0434\u0430\u043d\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043c\u044b \u0435\u0449\u0451 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 .svg \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441 \u0442\u0435\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438, \u0447\u0442\u043e \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432\u044b\u0448\u0435.<\/p>\n<p>  \u042f \u0432\u043e\u0437\u044c\u043c\u0443 5 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 <a href=\"https:\/\/undraw.co\/illustrations\">unDraw<\/a>. \u042d\u0442\u043e\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 svg-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0451 \u0433\u043e\u0442\u043e\u0432\u043e, \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f content \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<p>  <code>content\/<br \/>  -- posts.ts<br \/>  -- Posts.d.ts<br \/>  -- posts\/<br \/>  ---- 1.md<br \/>  ---- 2.md<br \/>  ---- 3.md<br \/>  ---- 4.md<br \/>  ---- 5.md<\/code><\/p>\n<p>  \u0410 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 assets \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f images \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<p>  <code>assets\/<br \/>  -- images\/<br \/>  ---- 1.svg<br \/>  ---- 2.svg<br \/>  ---- 3.svg<br \/>  ---- 4.svg<br \/>  ---- 5.svg<br \/>  ...<\/code><\/p>\n<h3>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432<\/h3>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0444\u0430\u0439\u043b\u044b \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u043e\u0432 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 plugins \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e mixins, \u0430 \u0432 \u043d\u0435\u0439 \u0444\u0430\u0439\u043b getDynamicFile.ts \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"javascript\">import Vue from 'vue'      export const methods = {     getDynamicFile(name: string) {       return require(`@\/${name}`)  },   }      Vue.mixin({     methods,   })<\/code><\/pre>\n<p>  \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f, \u2014 \u044d\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d \u0432 \u0444\u0430\u0439\u043b\u0435 nuxt.config.js:<\/p>\n<pre><code class=\"javascript\">{   plugins: [       '~plugins\/mixins\/getDynamicFile.ts',     ], }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0428\u0440\u0438\u0444\u0442\u044b<\/h3>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u0430\u043f\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u043e\u0432 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0448\u0440\u0438\u0444\u0442\u044b. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u2014 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/Developmint\/nuxt-webfontloader\">Webfontloader<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u0441 <a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0447\u0430\u0449\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0437\u0434\u0435\u0441\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439.<\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d Rubik, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439 <a href=\"https:\/\/scripts.sil.org\/cms\/scripts\/page.php?site_id=nrsi&amp;id=OFL\">Open Font License<\/a>. \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0451 \u0441 \u0442\u043e\u0433\u043e \u0436\u0435 <a href=\"https:\/\/fonts.google.com\/specimen\/Rubik\">Google Fonts<\/a>.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u0441\u043a\u0430\u0447\u0430\u043d\u043d\u043e\u043c \u0430\u0440\u0445\u0438\u0432\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 otf, \u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 web, \u0442\u043e \u043b\u0443\u0447\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0444\u043e\u0440\u043c\u0430\u0442\u044b woff \u0438 woff2.\u041e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u0447\u0435\u043c \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u043e <a href=\"https:\/\/caniuse.com\/woff\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f<\/a> \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0414\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 otf \u0432 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u043e\u043d\u043b\u0430\u0439\u043d-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b \u0432 \u043d\u0443\u0436\u043d\u044b\u0445 \u043d\u0430\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0445 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 static \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e fonts \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0443\u0434\u0430 \u043d\u0430\u0448\u0438 \u0448\u0440\u0438\u0444\u0442\u044b. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u044d\u0442\u043e\u0439 \u0436\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0444\u0430\u0439\u043b fonts.css, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"css\">@font-face {     font-family: &quot;Rubik-Regular&quot;;     font-weight: normal;     font-style: normal;     font-display: swap;     src:   \t  local(&quot;Rubik&quot;),   \t  local(&quot;Rubik-Regular&quot;),   \t  local(&quot;Rubik Regular&quot;),   \t  url(&quot;\/fonts\/Rubik-Regular.woff2&quot;) format(&quot;woff2&quot;),   \t  url(&quot;\/fonts\/Rubik-Regular.woff&quot;) format(&quot;woff&quot;);   }      ...<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\/blob\/master\/static\/fonts\/fonts.css\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<p>  \u0421\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 2 \u0432\u0435\u0449\u0438:<\/p>\n<p>  1. \u041c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c font-display: swap;, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044f, \u043a\u0430\u043a \u0448\u0440\u0438\u0444\u0442, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 font-face, \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u043b\u0438 \u043e\u043d \u0438 \u0433\u043e\u0442\u043e\u0432 \u043b\u0438 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.<br \/>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043d\u0435 \u0437\u0430\u0434\u0430\u0451\u043c \u043f\u0435\u0440\u0438\u043e\u0434 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0437\u0430\u0434\u0430\u0435\u043c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 \u043f\u043e\u0434\u043c\u0435\u043d\u044b. \u0422\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0444\u043e\u043d\u0435 \u0438 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u0448\u0440\u0438\u0444\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043f\u043e \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  2. \u0412 src \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u043e\u0441\u0442\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u0430. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0435\u0433\u043e, \u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 woff2, \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u0443 woff. \u0415\u0441\u0442\u044c \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, IE &lt; 9), \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 fallback \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u044b.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u2014 \u0432 \u0444\u0430\u0439\u043b\u0435 nuxt.config.js \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 head:<\/p>\n<pre><code class=\"javascript\">{   head: {       link: [         {           as: 'style',           rel: 'stylesheet preload prefetch',           href: '\/fonts\/fonts.css',         },       ],     }, }<\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c, \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u0435\u0435, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e preload \u0438 prefetch, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0421\u0440\u0430\u0437\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e static favicon \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u043b\u044e\u0431\u044b\u043c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c \u043e\u043d\u043b\u0430\u0439\u043d-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f static \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <code>static\/<br \/>  -- fonts\/<br \/>  ---- fonts.css<br \/>  ---- Rubik-Bold.woff2<br \/>  ---- Rubik-Bold.woff<br \/>  ---- Rubik-Medium.woff2<br \/>  ---- Rubik-Medium.woff<br \/>  ---- Rubik-Regular.woff2<br \/>  ---- Rubik-Regular.woff<br \/>  -- favicon.ico<\/code><\/p>\n<p>  \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u044d\u0442\u0430\u043f\u0443.<\/p>\n<h3>\u041f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/h3>\n<p>  \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0435\u0434\u0438\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0440\u0430\u0432\u0438\u043b, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 Figma \u0432 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<br \/>  \u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 assets \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e styles, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f styles \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0444\u0430\u0439\u043b variables.scss \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0430\u0448\u0438\u043c\u0438 scss-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>  C\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\/blob\/master\/assets\/styles\/variables.scss\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043b\u044e\u0431\u043e\u043c \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u0412 Nuxt \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c <a href=\"https:\/\/github.com\/nuxt-community\/style-resources-module\">@nuxtjs\/style-resources<\/a>.<\/p>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c:<\/p>\n<pre><code class=\"bash\">npm i @nuxtjs\/style-resources<\/code><\/pre>\n<p>  \u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 nuxt.config.js \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">{   modules: [     '@nuxtjs\/style-resources',   ],    styleResources: {       scss: ['.\/assets\/styles\/variables.scss'],     }, }<\/code><\/pre>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0412 \u043b\u044e\u0431\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432-\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u043e\u0432 \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0441\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0431\u0449\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0451\u043d \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c.<\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 assets\/styles \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e global \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n<p>  1. typography.scss \u2014 \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b-\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0438.<br \/>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u0438 \u043a\u043b\u0430\u0441\u0441\u044b-\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u0438 \u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u0442\u0438\u043b\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f: \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430 \u0438\u043b\u0438 \u041f\u041a.<\/p>\n<p>  2. transitions.scss \u2014 \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043a\u0430\u043a \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0435\u0441\u043b\u0438 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043d\u0430\u043c \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f.<\/p>\n<p>  3. other.scss \u2014 \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0432 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443.<\/p>\n<p>  \u041a\u043b\u0430\u0441\u0441 .page \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  \u041a\u043b\u0430\u0441\u0441 .section \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0438\u0446 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u0430 \u043a\u043b\u0430\u0441\u0441 .content \u2014 \u0434\u043b\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<p>  4. index.scss \u2014 \u043e\u0431\u0449\u0438\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0432\u0441\u0435\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>  \u041f\u043e\u043b\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\/tree\/master\/assets\/styles\/global\">Github<\/a>.<\/p>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u044d\u0442\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0441\u0442\u0430\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432\u043e \u0432\u0441\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 Nuxt \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u0435\u043a\u0446\u0438\u044e css \u0432 \u0444\u0430\u0439\u043b\u0435 nuxt.config.js:<\/p>\n<pre><code class=\"css\">{   css: ['~assets\/styles\/global'], }<\/code><\/pre>\n<p>  \u0421\u0442\u043e\u0438\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u0440\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0438 css-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430:<\/p>\n<p>  1. \u0415\u0441\u043b\u0438 \u0443 \u0442\u0435\u0433\u0430 \u0435\u0441\u0442\u044c \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u044b-\u0445\u0435\u043b\u043f\u0435\u0440\u044b, \u0442\u0430\u043a \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0442\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043a \u0442\u0435\u0433\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, p.some-local-class, \u0430 \u043a\u043b\u0430\u0441\u0441\u044b-\u0445\u0435\u043b\u043f\u0435\u0440\u044b \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 class, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, class=\u00abbody3 medium\u00bb.<\/p>\n<p>  2. \u0415\u0441\u043b\u0438 \u0443 \u0442\u0435\u0433\u0430 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u044b-\u0445\u0435\u043b\u043f\u0435\u0440\u044b \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0442\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043a \u0442\u0435\u0433\u0443.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441\u044b.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c reset.css, \u0447\u0442\u043e\u0431\u044b \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430\u0448\u0430 \u0432\u0451\u0440\u0441\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442:<\/p>\n<pre><code class=\"bash\">npm i reset-css<\/code><\/pre>\n<p>  \u0418 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 nuxt.config.js \u0432 \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0439 \u043d\u0430\u043c \u0441\u0435\u043a\u0446\u0438\u0438 css, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">{   css: [     '~assets\/styles\/global',     'reset-css\/reset.css',   ], }<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c? \u0415\u0441\u043b\u0438 \u0434\u0430, \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u044d\u0442\u0430\u043f\u0443!<\/p>\n<h3>Layouts<\/h3>\n<p>  \u0412 Nuxt Layouts \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u0451\u0440\u0442\u043a\u0430\u043c\u0438 \u043d\u0430\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043e\u0431\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u0449\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443. \u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435, \u0442\u043e \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c layout \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 default.vue.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432 Nuxt \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 404, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 layout, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439.<\/p>\n<p>  Layouts \u0432 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\/tree\/master\/layouts\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<p>  <b>default.vue<\/b><\/p>\n<p>  \u041d\u0430\u0448 default.vue \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   div     nuxt   db-footer &lt;\/template&gt; <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c 2 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<p>  1. nuxt \u2014 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0451\u043d \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>  2. db-footer \u2014 \u044d\u0442\u043e \u043d\u0430\u0448 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Footer (\u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0433\u043e \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <b>error.vue<\/b><\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0439 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 http, Nuxt \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u043d\u0430 layout\/error.vue \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0447\u0435\u0440\u0435\u0437 \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c error \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0435\u043a\u0446\u0438\u044f script, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438:<\/p>\n<pre><code class=\"javascript\">&lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'      type Error = {     statusCode: number     message: string   }      type ErrorText = {     title: string     subtitle: string   }      type ErrorTexts = {     [key: number]: ErrorText     default: ErrorText   }    export default Vue.extend({     name: 'ErrorPage',        props: {       error: {         type: Object as () =&gt; Error,         required: true,       },     },        data: () =&gt; ({       texts: {         404: {           title: '404. Page not found',           subtitle: 'Something went wrong, no such address exists',         },         default: {           title: 'Unknown error',           subtitle: 'Something went wrong, but we`ll try to figure out what`s wrong',         },       } as ErrorTexts,     }),      computed: {       errorText(): ErrorText {         const { statusCode } = this.error         return this.texts[statusCode] || this.texts.default       },     },   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n<p>  1. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0438\u043f\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435.<\/p>\n<p>  2. \u0412 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 data \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0441\u043b\u043e\u0432\u0430\u0440\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0448\u0438\u0431\u043e\u043a, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445.<\/p>\n<p>  3. \u0412 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 errorText \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430. \u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u0435\u0441\u0442\u044c, \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0434\u043b\u044f \u043d\u0435\u0451 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0435\u0442, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   section.section     .content       .ep__container         section-header(           :title=&quot;errorText.title&quot;           :subtitle=&quot;errorText.subtitle&quot;         )          nuxt-link.ep__link(           class=&quot;primary&quot;           to=&quot;\/&quot;         ) Home page   &lt;\/template&gt;<\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b .section \u0438 .content, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 assets\/styles\/global\/other.scss. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 section-header, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0451 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d, \u043d\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432. \u041c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0435\u0433\u043e, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  \u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f layouts \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <code>layouts\/<br \/>  -- default.vue<br \/>  -- error.vue<\/code><\/p>\n<p>  \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h3>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e \u043a\u0438\u0440\u043f\u0438\u0447\u0438\u043a\u0438, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0442\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0432\u044b\u0448\u0435.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e, \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\/tree\/master\/components\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a> \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <b>SectionHeader<\/b><br \/>  \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u0438\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0441\u0435\u043a\u0446\u0438\u044e script \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'    export default Vue.extend({     name: 'SectionHeader',      props: {       title: {         type: String,         required: true,       },       subtitle: {         type: String,         default: '',       },     },   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   section.section     .content       h1.sh__title(         class=&quot;h1&quot;       ) {{ title }}        p.sh__subtitle(         v-if=&quot;subtitle&quot;         class=&quot;body2 regular&quot;       ) {{ subtitle }}   &lt;\/template&gt;<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043e\u0431\u0451\u0440\u0442\u043a\u043e\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438.<\/p>\n<p>  <b>LinkToHome<\/b><\/p>\n<p>  \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430\u0434 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0435\u0434\u0435\u0442 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0432\u0435\u0441\u044c \u0435\u0433\u043e \u043a\u043e\u0434 \u0441\u0440\u0430\u0437\u0443 (\u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439):<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   section.section     .content       nuxt-link.lth__link(         to=&quot;\/&quot;         class=&quot;primary&quot;       )         img.lth__link-icon(           src=&quot;~\/assets\/icons\/home.svg&quot;           alt=&quot;icon-home&quot;         )         | Home   &lt;\/template&gt;      &lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'    export default Vue.extend({     name: 'LinkToHome',   })   &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 home.svg \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 assets\/icons. \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0438\u043a\u043e\u043d\u043a\u0443.<\/p>\n<p>  <b>DbFooter<\/b><\/p>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 DbFooter \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442. \u041e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 copyright \u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0438\u0441\u044c\u043c\u0430.<br \/>  \u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u0441\u0435\u043a\u0446\u0438\u0438 script:<\/p>\n<pre><code class=\"javascript\">&lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'    export default Vue.extend({     name: 'DbFooter',      computed: {       copyright(): string {       const year = new Date().getUTCFullYear()       return ` ${year} \u00b7 All rights reserved`     },     },   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u0412 DbFooter \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0433\u043e\u0434, \u0441\u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   section.section     .content       .footer         a.secondary(         href=&quot;mailto:example@mail.com?subject=Nuxt blog&quot;       ) Contact us         p.footer__copyright(         class=&quot;body3 regular&quot;       ) {{ copyright }}   &lt;\/template&gt;<\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 Contact us \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0447\u0442\u043e\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043c\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043b\u044f \u0434\u0435\u043c\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0441 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>  <b>PostCard<\/b><\/p>\n<p>  \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u043f\u043e\u0441\u0442\u0430 \u043d\u0435 \u043d\u0435\u0441\u0451\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<pre><code class=\"javascript\">&lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'   import { Post } from '~\/content\/Post'    export default Vue.extend({     name: 'PostCard',      props: {       post: {         type: Object as () =&gt; Post,         required: true,       },     },      computed: {       pageUrl(): string {         return `\/post\/${this.post.id}`       },     },   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u0412 \u0441\u0435\u043a\u0446\u0438\u0438 script \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0434\u0438\u043d \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 post, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u0441\u0442\u0435.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e pageUrl \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0435\u0440\u043d\u0451\u0442 \u043d\u0430\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u043e\u0441\u0442\u043e\u043c.<\/p>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   nuxt-link.pc(:to=&quot;pageUrl&quot;)     img.pc__img(       :src=&quot;getDynamicFile(post.img)&quot;       :alt=&quot;`post-image-${post.id}`&quot;     )      p.pc__title(class=&quot;body1 medium&quot;) {{ post.title }}     p.pc__subtitle(class=&quot;body3 regular&quot;) {{ post.desc }}   &lt;\/template&gt;<\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f nuxt-link. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u043e\u0441\u0442 \u0432 \u043d\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b\u0448\u043a\u0438.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d getDynamicFile, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<p>  <b>PostList<\/b><\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u0441\u0442\u043e\u0432 \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u0430\u043c\u0438\u0445 \u043f\u043e\u0441\u0442\u043e\u0432.<\/p>\n<p>  \u0421\u0435\u043a\u0446\u0438\u044f script \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'   import posts from '~\/content\/posts'    export default Vue.extend({     name: 'PostList',        data: () =&gt; ({       posts,     }),   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u041e\u0442\u043c\u0435\u0442\u0438\u043c, \u043f\u043e\u0441\u043b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441 \u043f\u043e\u0441\u0442\u0430\u043c\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 data, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0431\u044b\u043b \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c.<\/p>\n<p>  \u0421\u0430\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   section.section     .content       p.pl__count(class=&quot;body2 regular&quot;)         img.pl__count-icon(           src=&quot;~\/assets\/icons\/list.svg&quot;           alt=&quot;icon-list&quot;         )         | Total {{ posts.length }} posts        .pl__items         post-card(           v-for=&quot;post in posts&quot;           :key=&quot;post.id&quot;           :post=&quot;post&quot;         )   &lt;\/template&gt;<\/code><\/pre>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 list.svg \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e assets\/icons.<\/p>\n<p>  <b>PostFull<\/b><\/p>\n<p>  PostFull \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u0441\u0442\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c <a href=\"https:\/\/github.com\/nuxt-community\/modules\/tree\/master\/packages\/markdownit\">@nuxtjs\/markdownit<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 md \u0432 html.<\/p>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e:<\/p>\n<pre><code class=\"bash\">npm i @nuxtjs\/markdownit<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c @nuxtjs\/markdownit \u0432 \u0441\u0435\u043a\u0446\u0438\u044e modules \u0444\u0430\u0439\u043b\u0430 nuxt.config.js:<\/p>\n<pre><code class=\"javascript\">{   modules:  [     '@nuxtjs\/markdownit',   ], }<\/code><\/pre>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041d\u0430\u0447\u043d\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0441 \u0441\u0435\u043a\u0446\u0438\u0438 script:<\/p>\n<pre><code class=\"javascript\">&lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'   import { Post } from '~\/content\/Post'      export default Vue.extend({     name: 'PostFull',        props: {       post: {         type: Object as () =&gt; Post,         required: true,       },     },   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u0412 \u0441\u0435\u043a\u0446\u0438\u0438 script \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0434\u0438\u043d \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 post, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u0441\u0442\u0435.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0443:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   section.section     .content       img.pf__image(         :src=&quot;getDynamicFile(post.img)&quot;         :alt=&quot;`post-image-${post.id}`&quot;       )        .pf__md(v-html=&quot;getDynamicFile(post.file).default&quot;)   &lt;\/template&gt;<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u043c\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u0430 getDynamicFile \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0442\u0430\u043a \u0438 .md \u0444\u0430\u0439\u043b.<\/p>\n<p>  \u042f \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0444\u0430\u0439\u043b\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 v-html, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u044e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0437\u0430 \u043d\u0430\u0441 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 @nuxtjs\/markdownit. \u041d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e!<\/p>\n<p>  \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e .md \u0444\u0430\u0439\u043b\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 ::v-deep. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\/blob\/master\/components\/PostFull\/index.vue\">Github<\/a>, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f \u0437\u0430\u0434\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0430\u0431\u0437\u0430\u0446\u0435\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0433\u043e\u0442\u043e\u0432\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<p>  \u041a\u0430\u043a \u0432\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u043b\u0438 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442. <\/p>\n<p>  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 pages:<\/p>\n<p>  <code>pages\/<br \/>  -- index.vue<br \/>  -- post\/<br \/>  ---- _id.vue<\/code><\/p>\n<p>  \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b, \u0430 \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<br \/>  \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   .page     section-header(       title=&quot;Nuxt blog&quot;       subtitle=&quot;The best blog you can find on the global internet&quot;     )      post-list   &lt;\/template&gt;      &lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'    export default Vue.extend({     name: 'HomePage',   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 .page, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0432 assets\/styles\/global\/other.scss.<\/p>\n<p>  \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0441\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430 \u0441\u0435\u043a\u0446\u0438\u044e script:<\/p>\n<pre><code class=\"javascript\">&lt;script lang=&quot;ts&quot;&gt;   import Vue from 'vue'   import { Post } from '~\/content\/Post'   import posts from '~\/content\/posts'  export default Vue.extend({     validate({ params }) {       return \/^\\d+$\/.test(params.id)     },        computed: {       currentId(): number {         return Number(this.$route.params.id)       },       currentPost(): Post | undefined {         return posts.find(({ id }) =&gt; id === this.currentId)       },     },   })   &lt;\/script&gt;<\/code><\/pre>\n<p>  \u041c\u044b \u0432\u0438\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 validate. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e Vue, \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c Nuxt \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043e\u0442 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. Validate \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c id \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0448\u043b\u0430, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0448\u0438\u0431\u043a\u0438 error.vue.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b 2 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u0447\u0442\u043e \u043e\u043d\u0438 \u0434\u0435\u043b\u0430\u044e\u0442:<\/p>\n<p>  1. currentId \u2014 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 id \u043f\u043e\u0441\u0442\u0430 (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0440\u043e\u0443\u0442\u0435\u0440\u0430), \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0432 \u0435\u0433\u043e \u0432 number.<\/p>\n<p>  2. currentPost \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u0438\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u0441\u0442\u043e\u0432.<\/p>\n<p>  \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d:<\/p>\n<pre><code class=\"bash\">&lt;template lang=&quot;pug&quot;&gt;   .page   link-to-home      section-header(       :title=&quot;currentPost.title&quot;     )      post-full(       :post=&quot;currentPost&quot;     ) &lt;\/template&gt;<\/code><\/pre>\n<p>  \u0421\u0435\u043a\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.<br \/>  \u041a\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 <a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\/tree\/master\/pages\">Github<\/a>.<\/p>\n<h3>\u0414\u0435\u043f\u043b\u043e\u0439 \u043d\u0430 Hostman<\/h3>\n<p>  \u0423\u0440\u0430! \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e. \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0435\u0433\u043e \u0434\u0435\u043f\u043b\u043e\u0435\u043c.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0447\u043d\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 <a href=\"http:\/\/hostman.com\/\">Hostman<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u043f\u043b\u043e\u044f. <\/p>\n<p>  \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c \u0441\u0430\u0439\u0442\u043e\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 Hostman \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0436\u0430\u0442\u044c \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043a\u043d\u043e\u043f\u043a\u0443 Create, \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430\u0448 Github \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0443\u043a\u0430\u0437\u0430\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043e\u043f\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u0435\u043f\u043b\u043e\u044f.<\/p>\n<p>  \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0434\u043e\u043c\u0435\u043d \u0432 \u0437\u043e\u043d\u0435 *.hostman.site \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c ssl \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u043c \u043e\u0442 Let&#8217;s Encrypt.<\/p>\n<p>  \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043d\u043e\u0432\u043e\u043c \u043f\u0443\u0448\u0435 \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443 (master \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u0435\u043f\u043b\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e!<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0418\u0442\u0430\u043a, \u0447\u0442\u043e \u043c\u044b \u0438\u043c\u0435\u0435\u043c:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.figma.com\/file\/s1B9t0XOmRhtNY8daezIs7\/MVP-on-a-modern-stack-in-1-day?node-id=34%3A0\">\u0414\u0438\u0437\u0430\u0439\u043d<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/mikhail-shpakov\/nuxt-blog\">Github<\/a><\/li>\n<li><a href=\"https:\/\/nuxt-blog.hostman.site\/\">\u0414\u0435\u043c\u043e \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a><\/li>\n<\/ul>\n<p>  \u041c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Nuxt.js. \u041d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430, \u043e\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI-\u043a\u0438\u0442\u0430 \u0434\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0435\u043f\u043b\u043e\u044f.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u0432\u0441\u0435 \u0448\u0430\u0433\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0432\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u0438\u0442\u044c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Nuxt.js. \u0411\u044b\u043b\u043e \u0441\u043b\u043e\u0436\u043d\u043e? \u041a\u0430\u043a \u0432\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u044d\u0442\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c? \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u043b\u0438 \u043f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f, \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/543090\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/543090\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>  \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435, \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u0433 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Nuxt.js \u0441 \u043d\u0443\u043b\u044f. <\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0431\u0430\u0437\u0443, \u043e\u0441\u043d\u043e\u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Nuxt.js:<\/p>\n<ul>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, <\/li>\n<li>assets \u0438 static: \u0441\u0442\u0438\u043b\u0438, \u0448\u0440\u0438\u0444\u0442\u044b, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u0442\u044b,<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432,<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 layouts,<\/li>\n<li>\u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0434\u0435\u043f\u043b\u043e\u0439).<\/li>\n<\/ul>\n<p>  \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c!   <\/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-318237","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/318237","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=318237"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/318237\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=318237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=318237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=318237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}