Custom error nuxt

Error pages in NuxtJS are really useful in Dev, but in Prod, your users don't really care about the e...

Error pages in NuxtJS are really useful in Dev, but in Prod, your users don’t really care about the error details! It’s always better to create a custom error page with a simple message that explains that something went wrong. 

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred - {{ error.statusCode }} </h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    layout: 'error' // you can set a custom layout for the error page
  }
</script>

Enter fullscreen mode

Exit fullscreen mode

In this example, we display a «Page not found» when the error.statusCode is equal to 404, else we display another error message with the status code. (ex: «An error occurred — 500»)

<template>
  <div>
    <div
      id="sky"
      class="fixed z-50 top-0 h-screen w-screen flex justify-center items-center"
    >
      <div
        class="hidden flex-col items-center justify-center bg-gray-900 text-white w-screen h-screen md:flex"
      >
        <div id="stars" class="self-start z-30"></div>
        <div id="stars2" class="self-start z-40"></div>
        <div id="stars3" class="self-start z-20"></div>
        <h1 class="font-mono text-white z-50 text-6xl">
          {{ error.statusCode }} - Ooops... are you lost?
        </h1>
        <nuxt-link
          to="/"
          class="space cursor-pointer z-50 flex-col justify-center items-center flex pt-4 px-8 rounded-md text-purple-800 transform duration-150 ease-in hover:text-white hover:scale-105"
        >
        <!-- DON T FORGET TO CHANGE THE IMG -->
          <img src="/astronaut.png" alt="" />
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'error', // you can set a custom layout for the error page
}
</script>

<style scopped>
body {
  background-color: #263238;
}

.space img {
  -webkit-animation: mover 2s ease-in-out infinite alternate;
  animation: mover 2s ease-in-out infinite alternate;
}

@-webkit-keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}

#sky {
  height: 100%;
  width: 100vw;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  padding: 10% 0;
}

#stars {
  width: 1px;
  height: 1px;
  left: 0;
  background: transparent;
  box-shadow: 1226px 1621px #fff, 1021px 1311px #fff, 589px 396px #fff,
    106px 950px #fff, 1628px 685px #fff, 1982px 1853px #fff, 683px 1196px #fff,
    885px 147px #fff, 140px 572px #fff, 1414px 202px #fff, 1287px 375px #fff,
    812px 233px #fff, 245px 366px #fff, 619px 1786px #fff, 158px 727px #fff,
    1051px 1759px #fff, 1232px 1572px #fff, 304px 515px #fff, 1107px 1063px #fff,
    1409px 293px #fff, 844px 1928px #fff, 1297px 766px #fff, 769px 53px #fff,
    1796px 1499px #fff, 1096px 1588px #fff, 6px 1066px #fff, 954px 1823px #fff,
    449px 1318px #fff, 742px 324px #fff, 1360px 430px #fff, 474px 517px #fff,
    1638px 553px #fff, 65px 362px #fff, 1668px 305px #fff, 618px 1791px #fff,
    1248px 698px #fff, 526px 1505px #fff, 443px 1738px #fff, 968px 744px #fff,
    1509px 1343px #fff, 940px 891px #fff, 1426px 313px #fff, 86px 1904px #fff,
    1852px 914px #fff, 1774px 1138px #fff, 1406px 378px #fff, 82px 384px #fff,
    1195px 1561px #fff, 472px 1994px #fff, 887px 708px #fff, 1078px 680px #fff,
    1715px 140px #fff, 333px 1224px #fff, 1538px 412px #fff, 1476px 644px #fff,
    976px 149px #fff, 938px 1127px #fff, 531px 1088px #fff, 996px 403px #fff,
    279px 1233px #fff, 1761px 1297px #fff, 1126px 1184px #fff, 1417px 375px #fff,
    1085px 1137px #fff, 669px 987px #fff, 1149px 1963px #fff, 1097px 880px #fff,
    1591px 85px #fff, 1858px 884px #fff, 1187px 1483px #fff, 1246px 415px #fff,
    126px 516px #fff, 1824px 672px #fff, 178px 250px #fff, 1675px 146px #fff,
    1827px 816px #fff, 803px 992px #fff, 1703px 1664px #fff, 1658px 970px #fff,
    1607px 1896px #fff, 268px 499px #fff, 465px 395px #fff, 287px 468px #fff,
    980px 1675px #fff, 1959px 1989px #fff, 429px 1263px #fff, 1419px 1703px #fff,
    302px 335px #fff, 1470px 698px #fff, 431px 1784px #fff, 1397px 1168px #fff,
    585px 143px #fff, 1163px 455px #fff, 1007px 1355px #fff, 764px 1147px #fff,
    1528px 1835px #fff, 1298px 1629px #fff, 438px 971px #fff, 1940px 1307px #fff,
    1767px 1080px #fff, 1700px 1582px #fff, 911px 709px #fff, 1733px 1916px #fff,
    1650px 1153px #fff, 1491px 1908px #fff, 1221px 1065px #fff, 389px 749px #fff,
    576px 602px #fff, 84px 1595px #fff, 1887px 1748px #fff, 1293px 1674px #fff,
    1372px 986px #fff, 834px 1280px #fff, 241px 777px #fff, 1122px 1540px #fff,
    908px 1032px #fff, 1715px 14px #fff, 732px 1014px #fff, 1888px 766px #fff,
    1433px 1174px #fff, 1273px 1889px #fff, 337px 301px #fff, 1449px 1878px #fff,
    946px 1411px #fff, 965px 181px #fff, 1508px 537px #fff, 977px 1648px #fff,
    696px 1932px #fff, 601px 305px #fff, 1734px 186px #fff, 1962px 1776px #fff,
    965px 791px #fff, 1563px 422px #fff, 1427px 822px #fff, 1540px 599px #fff,
    1246px 1681px #fff, 1271px 1136px #fff, 1411px 641px #fff,
    1108px 1981px #fff, 961px 1884px #fff, 788px 631px #fff, 172px 783px #fff,
    1729px 455px #fff, 1682px 1051px #fff, 911px 1455px #fff, 1652px 489px #fff,
    880px 94px #fff, 59px 747px #fff, 417px 223px #fff, 332px 1397px #fff,
    699px 659px #fff, 693px 728px #fff, 1232px 208px #fff, 1514px 774px #fff,
    1070px 633px #fff, 1768px 165px #fff, 1261px 1666px #fff, 35px 1979px #fff,
    54px 1408px #fff, 820px 745px #fff, 1732px 147px #fff, 1282px 1121px #fff,
    1640px 1px #fff, 1932px 632px #fff, 895px 31px #fff, 1751px 266px #fff,
    746px 54px #fff, 1197px 986px #fff, 1032px 658px #fff, 234px 1526px #fff,
    1267px 1176px #fff, 1280px 357px #fff, 1333px 381px #fff, 1739px 1375px #fff,
    888px 1325px #fff, 704px 550px #fff, 20px 359px #fff, 987px 1218px #fff,
    794px 1724px #fff, 774px 590px #fff, 1024px 227px #fff, 1487px 400px #fff,
    1446px 627px #fff, 984px 1342px #fff, 966px 703px #fff, 105px 1673px #fff,
    1225px 1267px #fff, 119px 1202px #fff, 1458px 273px #fff, 1057px 1167px #fff,
    116px 735px #fff, 665px 1021px #fff, 476px 1830px #fff, 145px 906px #fff,
    502px 596px #fff, 1629px 645px #fff, 728px 1972px #fff, 342px 605px #fff,
    1331px 179px #fff, 707px 1684px #fff, 388px 1757px #fff, 805px 73px #fff,
    659px 180px #fff, 848px 915px #fff, 182px 1550px #fff, 1955px 155px #fff,
    973px 1546px #fff, 1061px 1579px #fff, 52px 687px #fff, 1104px 1352px #fff,
    408px 1386px #fff, 1888px 1692px #fff, 956px 1018px #fff, 1355px 1568px #fff,
    1505px 1550px #fff, 1182px 705px #fff, 959px 1050px #fff, 498px 1432px #fff,
    301px 647px #fff, 443px 334px #fff, 1402px 461px #fff, 147px 1270px #fff,
    391px 1572px #fff, 1017px 341px #fff, 68px 1770px #fff, 235px 860px #fff,
    505px 816px #fff, 1312px 986px #fff, 1079px 1293px #fff, 324px 611px #fff,
    1179px 1011px #fff, 277px 434px #fff, 1767px 252px #fff, 1775px 1487px #fff,
    1705px 19px #fff, 326px 721px #fff, 378px 70px #fff, 895px 1736px #fff,
    1570px 365px #fff, 513px 615px #fff, 1092px 147px #fff, 1318px 1932px #fff,
    1592px 1734px #fff, 699px 918px #fff, 111px 388px #fff, 1067px 890px #fff,
    1169px 332px #fff, 358px 481px #fff, 1630px 750px #fff, 179px 1787px #fff,
    355px 489px #fff, 852px 821px #fff, 868px 364px #fff, 386px 1700px #fff,
    799px 1420px #fff, 1472px 644px #fff, 1552px 905px #fff, 48px 1998px #fff,
    1850px 51px #fff, 416px 678px #fff, 759px 1046px #fff, 1451px 1951px #fff,
    101px 1610px #fff, 1469px 912px #fff, 1214px 1292px #fff, 1368px 1018px #fff,
    484px 470px #fff, 816px 322px #fff, 1821px 1326px #fff, 327px 1936px #fff,
    752px 550px #fff, 1215px 1924px #fff, 180px 122px #fff, 784px 1924px #fff,
    1597px 336px #fff, 248px 1429px #fff, 4px 181px #fff, 1801px 1613px #fff,
    1581px 1719px #fff, 640px 1391px #fff, 960px 302px #fff, 1483px 1207px #fff,
    520px 1119px #fff, 25px 1754px #fff, 545px 317px #fff, 1573px 751px #fff,
    1415px 2px #fff, 101px 761px #fff, 679px 291px #fff, 1785px 676px #fff,
    1256px 136px #fff, 855px 197px #fff, 1399px 1973px #fff, 1243px 429px #fff,
    1281px 571px #fff, 839px 531px #fff, 789px 1980px #fff, 877px 783px #fff,
    1526px 1850px #fff, 644px 1283px #fff, 1982px 1953px #fff,
    1109px 1232px #fff, 1532px 643px #fff, 823px 1287px #fff, 667px 34px #fff,
    24px 1469px #fff, 1029px 1130px #fff, 1645px 254px #fff, 1054px 1000px #fff,
    1341px 254px #fff, 184px 188px #fff, 1160px 1521px #fff, 348px 1083px #fff,
    1436px 1796px #fff, 441px 361px #fff, 1239px 575px #fff, 1055px 140px #fff,
    1552px 502px #fff, 607px 864px #fff, 967px 1883px #fff, 1407px 1955px #fff,
    405px 1148px #fff, 604px 992px #fff, 1116px 506px #fff, 13px 832px #fff,
    295px 189px #fff, 964px 1175px #fff, 1988px 52px #fff, 935px 209px #fff,
    17px 142px #fff, 770px 333px #fff, 682px 633px #fff, 510px 466px #fff,
    366px 79px #fff, 199px 954px #fff, 882px 277px #fff, 744px 655px #fff,
    37px 1659px #fff, 1217px 1885px #fff, 1107px 597px #fff, 1060px 1335px #fff,
    773px 601px #fff, 1939px 1632px #fff, 1607px 1774px #fff, 1531px 1550px #fff,
    1042px 60px #fff, 850px 1502px #fff, 1670px 492px #fff, 1357px 1654px #fff,
    1279px 1521px #fff, 633px 1956px #fff, 1122px 1981px #fff, 661px 657px #fff,
    521px 1132px #fff, 1593px 813px #fff, 1204px 1463px #fff, 1112px 1495px #fff,
    1755px 367px #fff, 1685px 1805px #fff, 1982px 196px #fff, 484px 51px #fff,
    1041px 330px #fff, 1487px 563px #fff, 311px 1872px #fff, 330px 976px #fff,
    6px 1754px #fff, 1447px 1182px #fff, 1926px 148px #fff, 1640px 490px #fff,
    1548px 1357px #fff, 1052px 1340px #fff, 1083px 56px #fff, 1890px 339px #fff,
    277px 1609px #fff, 892px 1792px #fff, 1322px 86px #fff, 1509px 1515px #fff,
    1650px 1722px #fff, 334px 497px #fff, 888px 143px #fff, 1325px 259px #fff,
    1330px 1505px #fff, 1374px 645px #fff, 1184px 937px #fff, 911px 1044px #fff,
    32px 1257px #fff, 297px 1884px #fff, 1031px 963px #fff, 411px 916px #fff,
    243px 1305px #fff, 898px 200px #fff, 1550px 156px #fff, 159px 716px #fff,
    240px 1130px #fff, 1046px 1905px #fff, 1405px 1277px #fff, 275px 124px #fff,
    964px 795px #fff, 1270px 1387px #fff, 1391px 1880px #fff, 484px 1027px #fff,
    1681px 1706px #fff, 1665px 697px #fff, 1073px 1078px #fff,
    1808px 1313px #fff, 1669px 1266px #fff, 1965px 747px #fff, 1734px 972px #fff,
    1549px 1434px #fff, 945px 146px #fff, 1211px 1383px #fff, 1921px 1637px #fff,
    271px 1725px #fff, 739px 1725px #fff, 1634px 1827px #fff, 961px 1131px #fff,
    513px 839px #fff, 1553px 1725px #fff, 82px 1667px #fff, 3px 1797px #fff,
    517px 1511px #fff, 1644px 929px #fff, 120px 1638px #fff, 579px 1168px #fff,
    147px 680px #fff, 61px 1146px #fff, 884px 598px #fff, 630px 1324px #fff,
    1709px 1340px #fff, 1332px 1142px #fff, 1990px 1397px #fff,
    854px 1527px #fff, 1293px 634px #fff, 1063px 506px #fff, 1361px 668px #fff,
    926px 347px #fff, 145px 1031px #fff, 1289px 1519px #fff, 1977px 1560px #fff,
    70px 1353px #fff, 653px 1634px #fff, 1182px 340px #fff, 1264px 1127px #fff,
    1246px 40px #fff, 428px 691px #fff, 1531px 1817px #fff, 431px 1906px #fff,
    1406px 1665px #fff, 597px 1588px #fff, 1273px 355px #fff, 995px 1018px #fff,
    1319px 528px #fff, 1454px 715px #fff, 1587px 1052px #fff, 921px 193px #fff,
    1012px 479px #fff, 689px 1019px #fff, 1307px 420px #fff, 1153px 108px #fff,
    1343px 775px #fff, 1236px 1061px #fff, 1117px 1099px #fff, 308px 533px #fff,
    1262px 509px #fff, 830px 24px #fff, 426px 695px #fff, 1148px 1397px #fff,
    1016px 1719px #fff, 1142px 1280px #fff, 1841px 310px #fff,
    1890px 1708px #fff, 1399px 589px #fff, 913px 1291px #fff, 955px 1445px #fff,
    431px 491px #fff, 580px 1002px #fff, 796px 186px #fff, 445px 1634px #fff,
    1543px 1377px #fff, 1853px 57px #fff, 34px 620px #fff, 1056px 923px #fff,
    1027px 134px #fff, 1248px 1252px #fff, 756px 1855px #fff, 143px 654px #fff,
    253px 347px #fff, 181px 943px #fff, 1044px 1774px #fff, 367px 1925px #fff,
    1125px 854px #fff, 1276px 141px #fff, 422px 413px #fff, 1261px 973px #fff,
    1030px 1349px #fff, 1349px 1850px #fff, 552px 1286px #fff, 606px 888px #fff,
    464px 1922px #fff, 1799px 260px #fff, 1984px 788px #fff, 1210px 450px #fff,
    1288px 1530px #fff, 911px 1896px #fff, 689px 4px #fff, 806px 162px #fff,
    1201px 604px #fff, 908px 531px #fff, 137px 1123px #fff, 1165px 496px #fff,
    1567px 1797px #fff, 614px 504px #fff, 1551px 1165px #fff, 1309px 1032px #fff,
    1321px 26px #fff, 1372px 326px #fff, 1762px 1159px #fff, 728px 5px #fff,
    1364px 459px #fff, 1333px 918px #fff, 1082px 1732px #fff, 286px 319px #fff,
    1636px 1220px #fff, 350px 966px #fff, 124px 219px #fff, 184px 1654px #fff,
    1195px 160px #fff, 1690px 737px #fff, 1386px 472px #fff, 1522px 1911px #fff,
    1082px 1129px #fff, 491px 67px #fff, 826px 393px #fff, 643px 632px #fff,
    1934px 1461px #fff, 1325px 316px #fff, 934px 1722px #fff, 1044px 879px #fff,
    1109px 1482px #fff, 1040px 642px #fff, 801px 509px #fff, 1352px 1583px #fff,
    160px 339px #fff, 1111px 1731px #fff, 1650px 1190px #fff, 1804px 1019px #fff,
    745px 604px #fff, 1391px 1108px #fff, 344px 708px #fff, 395px 111px #fff,
    913px 1180px #fff, 537px 1036px #fff, 1048px 1611px #fff, 1926px 155px #fff,
    392px 193px #fff, 1980px 1465px #fff, 1853px 1349px #fff, 204px 1317px #fff,
    1342px 1956px #fff, 785px 1564px #fff, 1478px 612px #fff, 1459px 491px #fff,
    1767px 265px #fff, 1032px 495px #fff, 946px 1196px #fff, 607px 285px #fff,
    887px 1940px #fff, 1618px 962px #fff, 85px 801px #fff, 1828px 525px #fff,
    523px 1927px #fff, 280px 1676px #fff, 551px 1133px #fff, 1888px 936px #fff,
    875px 863px #fff, 395px 1954px #fff, 155px 590px #fff, 1924px 262px #fff,
    1039px 1430px #fff, 1356px 1816px #fff, 978px 671px #fff, 1968px 1044px #fff,
    1693px 15px #fff, 266px 1506px #fff, 1061px 224px #fff, 690px 1132px #fff,
    1149px 313px #fff, 744px 898px #fff, 848px 1851px #fff, 296px 761px #fff,
    55px 624px #fff, 573px 131px #fff, 483px 1869px #fff, 157px 1304px #fff,
    496px 489px #fff, 729px 1730px #fff, 163px 1023px #fff, 1065px 1426px #fff,
    1058px 865px #fff, 1204px 1762px #fff, 73px 527px #fff, 668px 1237px #fff,
    1px 259px #fff, 1027px 107px #fff, 1347px 842px #fff, 720px 819px #fff,
    97px 1047px #fff, 474px 1262px #fff, 1406px 1163px #fff, 1620px 1312px #fff,
    292px 423px #fff, 1579px 1735px #fff, 687px 305px #fff, 1810px 1822px #fff,
    1499px 241px #fff, 1578px 1308px #fff, 770px 1441px #fff, 398px 646px #fff,
    1186px 1423px #fff, 6px 201px #fff, 1684px 1057px #fff, 1252px 1352px #fff,
    1649px 317px #fff, 746px 1777px #fff, 537px 97px #fff, 347px 1613px #fff,
    1709px 1896px #fff, 134px 957px #fff, 755px 340px #fff, 107px 1057px #fff,
    263px 1459px #fff, 1559px 1124px #fff, 1082px 19px #fff, 557px 795px #fff,
    596px 455px #fff, 1877px 1535px #fff, 457px 320px #fff, 532px 270px #fff,
    773px 1991px #fff, 644px 1840px #fff, 777px 1413px #fff, 726px 203px #fff,
    20px 740px #fff, 655px 909px #fff, 396px 1998px #fff, 235px 954px #fff,
    1737px 264px #fff, 670px 1532px #fff, 498px 159px #fff, 540px 1997px #fff,
    1792px 1327px #fff, 880px 1023px #fff, 1917px 1938px #fff, 1859px 148px #fff,
    1147px 1781px #fff, 428px 1876px #fff, 1952px 605px #fff, 655px 80px #fff,
    1500px 1545px #fff, 1656px 644px #fff, 615px 247px #fff, 795px 1881px #fff,
    1750px 586px #fff, 148px 1490px #fff, 1434px 74px #fff, 417px 1969px #fff,
    962px 1526px #fff, 835px 962px #fff, 330px 1767px #fff, 1557px 435px #fff,
    240px 341px #fff, 1857px 1589px #fff, 765px 281px #fff, 1452px 405px #fff,
    1480px 1724px #fff, 950px 1094px #fff, 710px 1388px #fff, 1333px 1919px #fff,
    706px 1589px #fff, 1476px 1465px #fff, 744px 291px #fff, 123px 870px #fff,
    1406px 428px #fff, 727px 1609px #fff, 1149px 1838px #fff, 78px 169px #fff,
    1088px 284px #fff, 670px 399px #fff, 711px 1923px #fff, 42px 1720px #fff,
    667px 570px #fff, 1274px 693px #fff, 1056px 644px #fff, 1937px 793px #fff,
    1200px 602px #fff, 1493px 755px #fff, 545px 870px #fff, 887px 270px #fff,
    1290px 164px #fff, 265px 1185px #fff;
  animation: animStar 50s linear infinite;
}
#stars:after {
  content: ' ';
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1226px 1621px #fff, 1021px 1311px #fff, 589px 396px #fff,
    106px 950px #fff, 1628px 685px #fff, 1982px 1853px #fff, 683px 1196px #fff,
    885px 147px #fff, 140px 572px #fff, 1414px 202px #fff, 1287px 375px #fff,
    812px 233px #fff, 245px 366px #fff, 619px 1786px #fff, 158px 727px #fff,
    1051px 1759px #fff, 1232px 1572px #fff, 304px 515px #fff, 1107px 1063px #fff,
    1409px 293px #fff, 844px 1928px #fff, 1297px 766px #fff, 769px 53px #fff,
    1796px 1499px #fff, 1096px 1588px #fff, 6px 1066px #fff, 954px 1823px #fff,
    449px 1318px #fff, 742px 324px #fff, 1360px 430px #fff, 474px 517px #fff,
    1638px 553px #fff, 65px 362px #fff, 1668px 305px #fff, 618px 1791px #fff,
    1248px 698px #fff, 526px 1505px #fff, 443px 1738px #fff, 968px 744px #fff,
    1509px 1343px #fff, 940px 891px #fff, 1426px 313px #fff, 86px 1904px #fff,
    1852px 914px #fff, 1774px 1138px #fff, 1406px 378px #fff, 82px 384px #fff,
    1195px 1561px #fff, 472px 1994px #fff, 887px 708px #fff, 1078px 680px #fff,
    1715px 140px #fff, 333px 1224px #fff, 1538px 412px #fff, 1476px 644px #fff,
    976px 149px #fff, 938px 1127px #fff, 531px 1088px #fff, 996px 403px #fff,
    279px 1233px #fff, 1761px 1297px #fff, 1126px 1184px #fff, 1417px 375px #fff,
    1085px 1137px #fff, 669px 987px #fff, 1149px 1963px #fff, 1097px 880px #fff,
    1591px 85px #fff, 1858px 884px #fff, 1187px 1483px #fff, 1246px 415px #fff,
    126px 516px #fff, 1824px 672px #fff, 178px 250px #fff, 1675px 146px #fff,
    1827px 816px #fff, 803px 992px #fff, 1703px 1664px #fff, 1658px 970px #fff,
    1607px 1896px #fff, 268px 499px #fff, 465px 395px #fff, 287px 468px #fff,
    980px 1675px #fff, 1959px 1989px #fff, 429px 1263px #fff, 1419px 1703px #fff,
    302px 335px #fff, 1470px 698px #fff, 431px 1784px #fff, 1397px 1168px #fff,
    585px 143px #fff, 1163px 455px #fff, 1007px 1355px #fff, 764px 1147px #fff,
    1528px 1835px #fff, 1298px 1629px #fff, 438px 971px #fff, 1940px 1307px #fff,
    1767px 1080px #fff, 1700px 1582px #fff, 911px 709px #fff, 1733px 1916px #fff,
    1650px 1153px #fff, 1491px 1908px #fff, 1221px 1065px #fff, 389px 749px #fff,
    576px 602px #fff, 84px 1595px #fff, 1887px 1748px #fff, 1293px 1674px #fff,
    1372px 986px #fff, 834px 1280px #fff, 241px 777px #fff, 1122px 1540px #fff,
    908px 1032px #fff, 1715px 14px #fff, 732px 1014px #fff, 1888px 766px #fff,
    1433px 1174px #fff, 1273px 1889px #fff, 337px 301px #fff, 1449px 1878px #fff,
    946px 1411px #fff, 965px 181px #fff, 1508px 537px #fff, 977px 1648px #fff,
    696px 1932px #fff, 601px 305px #fff, 1734px 186px #fff, 1962px 1776px #fff,
    965px 791px #fff, 1563px 422px #fff, 1427px 822px #fff, 1540px 599px #fff,
    1246px 1681px #fff, 1271px 1136px #fff, 1411px 641px #fff,
    1108px 1981px #fff, 961px 1884px #fff, 788px 631px #fff, 172px 783px #fff,
    1729px 455px #fff, 1682px 1051px #fff, 911px 1455px #fff, 1652px 489px #fff,
    880px 94px #fff, 59px 747px #fff, 417px 223px #fff, 332px 1397px #fff,
    699px 659px #fff, 693px 728px #fff, 1232px 208px #fff, 1514px 774px #fff,
    1070px 633px #fff, 1768px 165px #fff, 1261px 1666px #fff, 35px 1979px #fff,
    54px 1408px #fff, 820px 745px #fff, 1732px 147px #fff, 1282px 1121px #fff,
    1640px 1px #fff, 1932px 632px #fff, 895px 31px #fff, 1751px 266px #fff,
    746px 54px #fff, 1197px 986px #fff, 1032px 658px #fff, 234px 1526px #fff,
    1267px 1176px #fff, 1280px 357px #fff, 1333px 381px #fff, 1739px 1375px #fff,
    888px 1325px #fff, 704px 550px #fff, 20px 359px #fff, 987px 1218px #fff,
    794px 1724px #fff, 774px 590px #fff, 1024px 227px #fff, 1487px 400px #fff,
    1446px 627px #fff, 984px 1342px #fff, 966px 703px #fff, 105px 1673px #fff,
    1225px 1267px #fff, 119px 1202px #fff, 1458px 273px #fff, 1057px 1167px #fff,
    116px 735px #fff, 665px 1021px #fff, 476px 1830px #fff, 145px 906px #fff,
    502px 596px #fff, 1629px 645px #fff, 728px 1972px #fff, 342px 605px #fff,
    1331px 179px #fff, 707px 1684px #fff, 388px 1757px #fff, 805px 73px #fff,
    659px 180px #fff, 848px 915px #fff, 182px 1550px #fff, 1955px 155px #fff,
    973px 1546px #fff, 1061px 1579px #fff, 52px 687px #fff, 1104px 1352px #fff,
    408px 1386px #fff, 1888px 1692px #fff, 956px 1018px #fff, 1355px 1568px #fff,
    1505px 1550px #fff, 1182px 705px #fff, 959px 1050px #fff, 498px 1432px #fff,
    301px 647px #fff, 443px 334px #fff, 1402px 461px #fff, 147px 1270px #fff,
    391px 1572px #fff, 1017px 341px #fff, 68px 1770px #fff, 235px 860px #fff,
    505px 816px #fff, 1312px 986px #fff, 1079px 1293px #fff, 324px 611px #fff,
    1179px 1011px #fff, 277px 434px #fff, 1767px 252px #fff, 1775px 1487px #fff,
    1705px 19px #fff, 326px 721px #fff, 378px 70px #fff, 895px 1736px #fff,
    1570px 365px #fff, 513px 615px #fff, 1092px 147px #fff, 1318px 1932px #fff,
    1592px 1734px #fff, 699px 918px #fff, 111px 388px #fff, 1067px 890px #fff,
    1169px 332px #fff, 358px 481px #fff, 1630px 750px #fff, 179px 1787px #fff,
    355px 489px #fff, 852px 821px #fff, 868px 364px #fff, 386px 1700px #fff,
    799px 1420px #fff, 1472px 644px #fff, 1552px 905px #fff, 48px 1998px #fff,
    1850px 51px #fff, 416px 678px #fff, 759px 1046px #fff, 1451px 1951px #fff,
    101px 1610px #fff, 1469px 912px #fff, 1214px 1292px #fff, 1368px 1018px #fff,
    484px 470px #fff, 816px 322px #fff, 1821px 1326px #fff, 327px 1936px #fff,
    752px 550px #fff, 1215px 1924px #fff, 180px 122px #fff, 784px 1924px #fff,
    1597px 336px #fff, 248px 1429px #fff, 4px 181px #fff, 1801px 1613px #fff,
    1581px 1719px #fff, 640px 1391px #fff, 960px 302px #fff, 1483px 1207px #fff,
    520px 1119px #fff, 25px 1754px #fff, 545px 317px #fff, 1573px 751px #fff,
    1415px 2px #fff, 101px 761px #fff, 679px 291px #fff, 1785px 676px #fff,
    1256px 136px #fff, 855px 197px #fff, 1399px 1973px #fff, 1243px 429px #fff,
    1281px 571px #fff, 839px 531px #fff, 789px 1980px #fff, 877px 783px #fff,
    1526px 1850px #fff, 644px 1283px #fff, 1982px 1953px #fff,
    1109px 1232px #fff, 1532px 643px #fff, 823px 1287px #fff, 667px 34px #fff,
    24px 1469px #fff, 1029px 1130px #fff, 1645px 254px #fff, 1054px 1000px #fff,
    1341px 254px #fff, 184px 188px #fff, 1160px 1521px #fff, 348px 1083px #fff,
    1436px 1796px #fff, 441px 361px #fff, 1239px 575px #fff, 1055px 140px #fff,
    1552px 502px #fff, 607px 864px #fff, 967px 1883px #fff, 1407px 1955px #fff,
    405px 1148px #fff, 604px 992px #fff, 1116px 506px #fff, 13px 832px #fff,
    295px 189px #fff, 964px 1175px #fff, 1988px 52px #fff, 935px 209px #fff,
    17px 142px #fff, 770px 333px #fff, 682px 633px #fff, 510px 466px #fff,
    366px 79px #fff, 199px 954px #fff, 882px 277px #fff, 744px 655px #fff,
    37px 1659px #fff, 1217px 1885px #fff, 1107px 597px #fff, 1060px 1335px #fff,
    773px 601px #fff, 1939px 1632px #fff, 1607px 1774px #fff, 1531px 1550px #fff,
    1042px 60px #fff, 850px 1502px #fff, 1670px 492px #fff, 1357px 1654px #fff,
    1279px 1521px #fff, 633px 1956px #fff, 1122px 1981px #fff, 661px 657px #fff,
    521px 1132px #fff, 1593px 813px #fff, 1204px 1463px #fff, 1112px 1495px #fff,
    1755px 367px #fff, 1685px 1805px #fff, 1982px 196px #fff, 484px 51px #fff,
    1041px 330px #fff, 1487px 563px #fff, 311px 1872px #fff, 330px 976px #fff,
    6px 1754px #fff, 1447px 1182px #fff, 1926px 148px #fff, 1640px 490px #fff,
    1548px 1357px #fff, 1052px 1340px #fff, 1083px 56px #fff, 1890px 339px #fff,
    277px 1609px #fff, 892px 1792px #fff, 1322px 86px #fff, 1509px 1515px #fff,
    1650px 1722px #fff, 334px 497px #fff, 888px 143px #fff, 1325px 259px #fff,
    1330px 1505px #fff, 1374px 645px #fff, 1184px 937px #fff, 911px 1044px #fff,
    32px 1257px #fff, 297px 1884px #fff, 1031px 963px #fff, 411px 916px #fff,
    243px 1305px #fff, 898px 200px #fff, 1550px 156px #fff, 159px 716px #fff,
    240px 1130px #fff, 1046px 1905px #fff, 1405px 1277px #fff, 275px 124px #fff,
    964px 795px #fff, 1270px 1387px #fff, 1391px 1880px #fff, 484px 1027px #fff,
    1681px 1706px #fff, 1665px 697px #fff, 1073px 1078px #fff,
    1808px 1313px #fff, 1669px 1266px #fff, 1965px 747px #fff, 1734px 972px #fff,
    1549px 1434px #fff, 945px 146px #fff, 1211px 1383px #fff, 1921px 1637px #fff,
    271px 1725px #fff, 739px 1725px #fff, 1634px 1827px #fff, 961px 1131px #fff,
    513px 839px #fff, 1553px 1725px #fff, 82px 1667px #fff, 3px 1797px #fff,
    517px 1511px #fff, 1644px 929px #fff, 120px 1638px #fff, 579px 1168px #fff,
    147px 680px #fff, 61px 1146px #fff, 884px 598px #fff, 630px 1324px #fff,
    1709px 1340px #fff, 1332px 1142px #fff, 1990px 1397px #fff,
    854px 1527px #fff, 1293px 634px #fff, 1063px 506px #fff, 1361px 668px #fff,
    926px 347px #fff, 145px 1031px #fff, 1289px 1519px #fff, 1977px 1560px #fff,
    70px 1353px #fff, 653px 1634px #fff, 1182px 340px #fff, 1264px 1127px #fff,
    1246px 40px #fff, 428px 691px #fff, 1531px 1817px #fff, 431px 1906px #fff,
    1406px 1665px #fff, 597px 1588px #fff, 1273px 355px #fff, 995px 1018px #fff,
    1319px 528px #fff, 1454px 715px #fff, 1587px 1052px #fff, 921px 193px #fff,
    1012px 479px #fff, 689px 1019px #fff, 1307px 420px #fff, 1153px 108px #fff,
    1343px 775px #fff, 1236px 1061px #fff, 1117px 1099px #fff, 308px 533px #fff,
    1262px 509px #fff, 830px 24px #fff, 426px 695px #fff, 1148px 1397px #fff,
    1016px 1719px #fff, 1142px 1280px #fff, 1841px 310px #fff,
    1890px 1708px #fff, 1399px 589px #fff, 913px 1291px #fff, 955px 1445px #fff,
    431px 491px #fff, 580px 1002px #fff, 796px 186px #fff, 445px 1634px #fff,
    1543px 1377px #fff, 1853px 57px #fff, 34px 620px #fff, 1056px 923px #fff,
    1027px 134px #fff, 1248px 1252px #fff, 756px 1855px #fff, 143px 654px #fff,
    253px 347px #fff, 181px 943px #fff, 1044px 1774px #fff, 367px 1925px #fff,
    1125px 854px #fff, 1276px 141px #fff, 422px 413px #fff, 1261px 973px #fff,
    1030px 1349px #fff, 1349px 1850px #fff, 552px 1286px #fff, 606px 888px #fff,
    464px 1922px #fff, 1799px 260px #fff, 1984px 788px #fff, 1210px 450px #fff,
    1288px 1530px #fff, 911px 1896px #fff, 689px 4px #fff, 806px 162px #fff,
    1201px 604px #fff, 908px 531px #fff, 137px 1123px #fff, 1165px 496px #fff,
    1567px 1797px #fff, 614px 504px #fff, 1551px 1165px #fff, 1309px 1032px #fff,
    1321px 26px #fff, 1372px 326px #fff, 1762px 1159px #fff, 728px 5px #fff,
    1364px 459px #fff, 1333px 918px #fff, 1082px 1732px #fff, 286px 319px #fff,
    1636px 1220px #fff, 350px 966px #fff, 124px 219px #fff, 184px 1654px #fff,
    1195px 160px #fff, 1690px 737px #fff, 1386px 472px #fff, 1522px 1911px #fff,
    1082px 1129px #fff, 491px 67px #fff, 826px 393px #fff, 643px 632px #fff,
    1934px 1461px #fff, 1325px 316px #fff, 934px 1722px #fff, 1044px 879px #fff,
    1109px 1482px #fff, 1040px 642px #fff, 801px 509px #fff, 1352px 1583px #fff,
    160px 339px #fff, 1111px 1731px #fff, 1650px 1190px #fff, 1804px 1019px #fff,
    745px 604px #fff, 1391px 1108px #fff, 344px 708px #fff, 395px 111px #fff,
    913px 1180px #fff, 537px 1036px #fff, 1048px 1611px #fff, 1926px 155px #fff,
    392px 193px #fff, 1980px 1465px #fff, 1853px 1349px #fff, 204px 1317px #fff,
    1342px 1956px #fff, 785px 1564px #fff, 1478px 612px #fff, 1459px 491px #fff,
    1767px 265px #fff, 1032px 495px #fff, 946px 1196px #fff, 607px 285px #fff,
    887px 1940px #fff, 1618px 962px #fff, 85px 801px #fff, 1828px 525px #fff,
    523px 1927px #fff, 280px 1676px #fff, 551px 1133px #fff, 1888px 936px #fff,
    875px 863px #fff, 395px 1954px #fff, 155px 590px #fff, 1924px 262px #fff,
    1039px 1430px #fff, 1356px 1816px #fff, 978px 671px #fff, 1968px 1044px #fff,
    1693px 15px #fff, 266px 1506px #fff, 1061px 224px #fff, 690px 1132px #fff,
    1149px 313px #fff, 744px 898px #fff, 848px 1851px #fff, 296px 761px #fff,
    55px 624px #fff, 573px 131px #fff, 483px 1869px #fff, 157px 1304px #fff,
    496px 489px #fff, 729px 1730px #fff, 163px 1023px #fff, 1065px 1426px #fff,
    1058px 865px #fff, 1204px 1762px #fff, 73px 527px #fff, 668px 1237px #fff,
    1px 259px #fff, 1027px 107px #fff, 1347px 842px #fff, 720px 819px #fff,
    97px 1047px #fff, 474px 1262px #fff, 1406px 1163px #fff, 1620px 1312px #fff,
    292px 423px #fff, 1579px 1735px #fff, 687px 305px #fff, 1810px 1822px #fff,
    1499px 241px #fff, 1578px 1308px #fff, 770px 1441px #fff, 398px 646px #fff,
    1186px 1423px #fff, 6px 201px #fff, 1684px 1057px #fff, 1252px 1352px #fff,
    1649px 317px #fff, 746px 1777px #fff, 537px 97px #fff, 347px 1613px #fff,
    1709px 1896px #fff, 134px 957px #fff, 755px 340px #fff, 107px 1057px #fff,
    263px 1459px #fff, 1559px 1124px #fff, 1082px 19px #fff, 557px 795px #fff,
    596px 455px #fff, 1877px 1535px #fff, 457px 320px #fff, 532px 270px #fff,
    773px 1991px #fff, 644px 1840px #fff, 777px 1413px #fff, 726px 203px #fff,
    20px 740px #fff, 655px 909px #fff, 396px 1998px #fff, 235px 954px #fff,
    1737px 264px #fff, 670px 1532px #fff, 498px 159px #fff, 540px 1997px #fff,
    1792px 1327px #fff, 880px 1023px #fff, 1917px 1938px #fff, 1859px 148px #fff,
    1147px 1781px #fff, 428px 1876px #fff, 1952px 605px #fff, 655px 80px #fff,
    1500px 1545px #fff, 1656px 644px #fff, 615px 247px #fff, 795px 1881px #fff,
    1750px 586px #fff, 148px 1490px #fff, 1434px 74px #fff, 417px 1969px #fff,
    962px 1526px #fff, 835px 962px #fff, 330px 1767px #fff, 1557px 435px #fff,
    240px 341px #fff, 1857px 1589px #fff, 765px 281px #fff, 1452px 405px #fff,
    1480px 1724px #fff, 950px 1094px #fff, 710px 1388px #fff, 1333px 1919px #fff,
    706px 1589px #fff, 1476px 1465px #fff, 744px 291px #fff, 123px 870px #fff,
    1406px 428px #fff, 727px 1609px #fff, 1149px 1838px #fff, 78px 169px #fff,
    1088px 284px #fff, 670px 399px #fff, 711px 1923px #fff, 42px 1720px #fff,
    667px 570px #fff, 1274px 693px #fff, 1056px 644px #fff, 1937px 793px #fff,
    1200px 602px #fff, 1493px 755px #fff, 545px 870px #fff, 887px 270px #fff,
    1290px 164px #fff, 265px 1185px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 236px 1043px #fff, 784px 298px #fff, 594px 611px #fff,
    1790px 363px #fff, 1099px 831px #fff, 1619px 474px #fff, 903px 652px #fff,
    1472px 978px #fff, 1620px 1445px #fff, 1533px 1396px #fff, 303px 994px #fff,
    318px 1761px #fff, 1755px 263px #fff, 783px 482px #fff, 1224px 216px #fff,
    1625px 1456px #fff, 813px 1703px #fff, 1918px 1212px #fff, 1872px 799px #fff,
    280px 793px #fff, 1932px 99px #fff, 1925px 1863px #fff, 1444px 809px #fff,
    879px 484px #fff, 1283px 1275px #fff, 154px 1516px #fff, 1986px 404px #fff,
    526px 774px #fff, 540px 664px #fff, 953px 1818px #fff, 1931px 1100px #fff,
    1105px 92px #fff, 1290px 210px #fff, 1739px 33px #fff, 466px 1203px #fff,
    1821px 139px #fff, 1524px 269px #fff, 777px 1345px #fff, 116px 29px #fff,
    692px 10px #fff, 1165px 1444px #fff, 230px 1666px #fff, 1293px 811px #fff,
    1349px 414px #fff, 1598px 785px #fff, 1058px 1829px #fff, 1995px 1740px #fff,
    947px 614px #fff, 141px 1062px #fff, 1167px 248px #fff, 1366px 1098px #fff,
    811px 1344px #fff, 1723px 872px #fff, 1450px 1137px #fff, 1225px 1762px #fff,
    1766px 144px #fff, 1160px 1662px #fff, 931px 589px #fff, 937px 579px #fff,
    941px 592px #fff, 864px 681px #fff, 41px 995px #fff, 761px 1239px #fff,
    1890px 1598px #fff, 1262px 1800px #fff, 1990px 990px #fff, 1259px 880px #fff,
    1151px 1318px #fff, 352px 1485px #fff, 1345px 876px #fff, 1446px 945px #fff,
    1259px 1789px #fff, 1290px 374px #fff, 1388px 717px #fff, 32px 1673px #fff,
    1204px 862px #fff, 1184px 1186px #fff, 514px 574px #fff, 1625px 279px #fff,
    1491px 1821px #fff, 990px 398px #fff, 1552px 1243px #fff, 1427px 1528px #fff,
    222px 808px #fff, 732px 190px #fff, 12px 1378px #fff, 964px 444px #fff,
    317px 267px #fff, 1193px 161px #fff, 401px 716px #fff, 1399px 901px #fff,
    547px 318px #fff, 1365px 1943px #fff, 1083px 1137px #fff, 689px 251px #fff,
    833px 1431px #fff, 236px 177px #fff, 103px 1987px #fff, 320px 1421px #fff,
    1938px 1277px #fff, 1738px 1755px #fff, 777px 1942px #fff, 480px 1451px #fff,
    905px 1958px #fff, 993px 1429px #fff, 1748px 1796px #fff, 1596px 79px #fff,
    1355px 140px #fff, 1914px 261px #fff, 1027px 1239px #fff, 242px 534px #fff,
    1557px 192px #fff, 1884px 88px #fff, 1602px 296px #fff, 872px 307px #fff,
    998px 1373px #fff, 38px 1192px #fff, 763px 516px #fff, 1463px 925px #fff,
    1554px 147px #fff, 1322px 2000px #fff, 1885px 555px #fff, 1092px 1729px #fff,
    259px 735px #fff, 1852px 295px #fff, 49px 1307px #fff, 1111px 1808px #fff,
    1939px 643px #fff, 440px 1370px #fff, 1386px 657px #fff, 968px 611px #fff,
    1270px 1739px #fff, 870px 392px #fff, 1257px 765px #fff, 1106px 1530px #fff,
    1232px 1910px #fff, 1901px 1368px #fff, 1027px 1105px #fff,
    1787px 368px #fff, 735px 375px #fff, 1475px 825px #fff, 1836px 518px #fff,
    349px 1667px #fff, 1260px 495px #fff, 1799px 1574px #fff, 1018px 682px #fff,
    648px 995px #fff, 935px 577px #fff, 156px 1690px #fff, 602px 1920px #fff,
    1876px 384px #fff, 1561px 1362px #fff, 1446px 632px #fff, 1923px 209px #fff,
    1076px 1611px #fff, 738px 722px #fff, 1484px 1655px #fff, 137px 1339px #fff,
    1721px 541px #fff, 1544px 1082px #fff, 1083px 1601px #fff,
    1475px 1526px #fff, 1653px 1500px #fff, 451px 1136px #fff, 288px 372px #fff,
    290px 810px #fff, 1492px 814px #fff, 1508px 1379px #fff, 730px 1116px #fff,
    505px 929px #fff, 1775px 1887px #fff, 1942px 1091px #fff, 927px 1676px #fff,
    406px 992px #fff, 983px 626px #fff, 1356px 741px #fff, 1609px 936px #fff,
    313px 1244px #fff, 616px 984px #fff, 713px 1281px #fff, 1050px 844px #fff,
    1010px 104px #fff, 1858px 547px #fff, 429px 1678px #fff, 916px 763px #fff,
    418px 378px #fff, 7px 631px #fff, 1702px 1288px #fff, 799px 987px #fff,
    1661px 1081px #fff, 1655px 1846px #fff, 361px 1676px #fff,
    1979px 1521px #fff, 415px 418px #fff, 1641px 1999px #fff, 955px 882px #fff,
    1290px 324px #fff, 930px 1826px #fff, 989px 807px #fff, 461px 917px #fff;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: ' ';
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 236px 1043px #fff, 784px 298px #fff, 594px 611px #fff,
    1790px 363px #fff, 1099px 831px #fff, 1619px 474px #fff, 903px 652px #fff,
    1472px 978px #fff, 1620px 1445px #fff, 1533px 1396px #fff, 303px 994px #fff,
    318px 1761px #fff, 1755px 263px #fff, 783px 482px #fff, 1224px 216px #fff,
    1625px 1456px #fff, 813px 1703px #fff, 1918px 1212px #fff, 1872px 799px #fff,
    280px 793px #fff, 1932px 99px #fff, 1925px 1863px #fff, 1444px 809px #fff,
    879px 484px #fff, 1283px 1275px #fff, 154px 1516px #fff, 1986px 404px #fff,
    526px 774px #fff, 540px 664px #fff, 953px 1818px #fff, 1931px 1100px #fff,
    1105px 92px #fff, 1290px 210px #fff, 1739px 33px #fff, 466px 1203px #fff,
    1821px 139px #fff, 1524px 269px #fff, 777px 1345px #fff, 116px 29px #fff,
    692px 10px #fff, 1165px 1444px #fff, 230px 1666px #fff, 1293px 811px #fff,
    1349px 414px #fff, 1598px 785px #fff, 1058px 1829px #fff, 1995px 1740px #fff,
    947px 614px #fff, 141px 1062px #fff, 1167px 248px #fff, 1366px 1098px #fff,
    811px 1344px #fff, 1723px 872px #fff, 1450px 1137px #fff, 1225px 1762px #fff,
    1766px 144px #fff, 1160px 1662px #fff, 931px 589px #fff, 937px 579px #fff,
    941px 592px #fff, 864px 681px #fff, 41px 995px #fff, 761px 1239px #fff,
    1890px 1598px #fff, 1262px 1800px #fff, 1990px 990px #fff, 1259px 880px #fff,
    1151px 1318px #fff, 352px 1485px #fff, 1345px 876px #fff, 1446px 945px #fff,
    1259px 1789px #fff, 1290px 374px #fff, 1388px 717px #fff, 32px 1673px #fff,
    1204px 862px #fff, 1184px 1186px #fff, 514px 574px #fff, 1625px 279px #fff,
    1491px 1821px #fff, 990px 398px #fff, 1552px 1243px #fff, 1427px 1528px #fff,
    222px 808px #fff, 732px 190px #fff, 12px 1378px #fff, 964px 444px #fff,
    317px 267px #fff, 1193px 161px #fff, 401px 716px #fff, 1399px 901px #fff,
    547px 318px #fff, 1365px 1943px #fff, 1083px 1137px #fff, 689px 251px #fff,
    833px 1431px #fff, 236px 177px #fff, 103px 1987px #fff, 320px 1421px #fff,
    1938px 1277px #fff, 1738px 1755px #fff, 777px 1942px #fff, 480px 1451px #fff,
    905px 1958px #fff, 993px 1429px #fff, 1748px 1796px #fff, 1596px 79px #fff,
    1355px 140px #fff, 1914px 261px #fff, 1027px 1239px #fff, 242px 534px #fff,
    1557px 192px #fff, 1884px 88px #fff, 1602px 296px #fff, 872px 307px #fff,
    998px 1373px #fff, 38px 1192px #fff, 763px 516px #fff, 1463px 925px #fff,
    1554px 147px #fff, 1322px 2000px #fff, 1885px 555px #fff, 1092px 1729px #fff,
    259px 735px #fff, 1852px 295px #fff, 49px 1307px #fff, 1111px 1808px #fff,
    1939px 643px #fff, 440px 1370px #fff, 1386px 657px #fff, 968px 611px #fff,
    1270px 1739px #fff, 870px 392px #fff, 1257px 765px #fff, 1106px 1530px #fff,
    1232px 1910px #fff, 1901px 1368px #fff, 1027px 1105px #fff,
    1787px 368px #fff, 735px 375px #fff, 1475px 825px #fff, 1836px 518px #fff,
    349px 1667px #fff, 1260px 495px #fff, 1799px 1574px #fff, 1018px 682px #fff,
    648px 995px #fff, 935px 577px #fff, 156px 1690px #fff, 602px 1920px #fff,
    1876px 384px #fff, 1561px 1362px #fff, 1446px 632px #fff, 1923px 209px #fff,
    1076px 1611px #fff, 738px 722px #fff, 1484px 1655px #fff, 137px 1339px #fff,
    1721px 541px #fff, 1544px 1082px #fff, 1083px 1601px #fff,
    1475px 1526px #fff, 1653px 1500px #fff, 451px 1136px #fff, 288px 372px #fff,
    290px 810px #fff, 1492px 814px #fff, 1508px 1379px #fff, 730px 1116px #fff,
    505px 929px #fff, 1775px 1887px #fff, 1942px 1091px #fff, 927px 1676px #fff,
    406px 992px #fff, 983px 626px #fff, 1356px 741px #fff, 1609px 936px #fff,
    313px 1244px #fff, 616px 984px #fff, 713px 1281px #fff, 1050px 844px #fff,
    1010px 104px #fff, 1858px 547px #fff, 429px 1678px #fff, 916px 763px #fff,
    418px 378px #fff, 7px 631px #fff, 1702px 1288px #fff, 799px 987px #fff,
    1661px 1081px #fff, 1655px 1846px #fff, 361px 1676px #fff,
    1979px 1521px #fff, 415px 418px #fff, 1641px 1999px #fff, 955px 882px #fff,
    1290px 324px #fff, 930px 1826px #fff, 989px 807px #fff, 461px 917px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1948px 1304px #fff, 255px 1453px #fff, 146px 1809px #fff,
    1216px 205px #fff, 1418px 1507px #fff, 206px 1111px #fff, 734px 1490px #fff,
    1985px 1787px #fff, 188px 1154px #fff, 1447px 113px #fff, 1484px 1176px #fff,
    1495px 1763px #fff, 1597px 453px #fff, 1840px 1052px #fff, 655px 1587px #fff,
    1171px 1430px #fff, 1106px 410px #fff, 97px 1054px #fff, 714px 1158px #fff,
    1877px 1980px #fff, 181px 105px #fff, 1387px 1624px #fff, 485px 1406px #fff,
    1770px 1868px #fff, 1403px 770px #fff, 204px 1690px #fff, 300px 406px #fff,
    103px 364px #fff, 1376px 774px #fff, 1885px 753px #fff, 162px 822px #fff,
    1944px 1848px #fff, 500px 269px #fff, 317px 1205px #fff, 49px 905px #fff,
    1897px 1698px #fff, 1937px 84px #fff, 1831px 1273px #fff, 1244px 1355px #fff,
    731px 737px #fff, 1536px 802px #fff, 628px 394px #fff, 1582px 1266px #fff,
    1583px 668px #fff, 1548px 1611px #fff, 303px 945px #fff, 1749px 980px #fff,
    909px 732px #fff, 645px 808px #fff, 56px 1087px #fff, 1320px 1359px #fff,
    1053px 473px #fff, 1783px 834px #fff, 137px 1176px #fff, 786px 1701px #fff,
    656px 906px #fff, 620px 793px #fff, 1471px 423px #fff, 1046px 108px #fff,
    1849px 1270px #fff, 1152px 1323px #fff, 323px 623px #fff, 304px 1154px #fff,
    678px 1427px #fff, 734px 955px #fff, 1717px 674px #fff, 1974px 1431px #fff,
    859px 1871px #fff, 822px 1386px #fff, 1961px 1081px #fff, 750px 1690px #fff,
    1387px 547px #fff, 776px 907px #fff, 435px 1934px #fff, 542px 321px #fff,
    320px 754px #fff, 622px 1759px #fff, 1758px 597px #fff, 742px 469px #fff,
    638px 1795px #fff, 1578px 1755px #fff, 1881px 1923px #fff, 148px 1001px #fff,
    1333px 1015px #fff, 663px 453px #fff, 166px 730px #fff, 319px 1423px #fff,
    1571px 1401px #fff, 1538px 1363px #fff, 851px 15px #fff, 1884px 590px #fff,
    1016px 778px #fff, 1993px 1060px #fff, 40px 444px #fff, 667px 639px #fff,
    1299px 1074px #fff, 547px 923px #fff, 93px 1476px #fff, 1411px 1712px #fff,
    535px 1825px #fff;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: ' ';
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1948px 1304px #fff, 255px 1453px #fff, 146px 1809px #fff,
    1216px 205px #fff, 1418px 1507px #fff, 206px 1111px #fff, 734px 1490px #fff,
    1985px 1787px #fff, 188px 1154px #fff, 1447px 113px #fff, 1484px 1176px #fff,
    1495px 1763px #fff, 1597px 453px #fff, 1840px 1052px #fff, 655px 1587px #fff,
    1171px 1430px #fff, 1106px 410px #fff, 97px 1054px #fff, 714px 1158px #fff,
    1877px 1980px #fff, 181px 105px #fff, 1387px 1624px #fff, 485px 1406px #fff,
    1770px 1868px #fff, 1403px 770px #fff, 204px 1690px #fff, 300px 406px #fff,
    103px 364px #fff, 1376px 774px #fff, 1885px 753px #fff, 162px 822px #fff,
    1944px 1848px #fff, 500px 269px #fff, 317px 1205px #fff, 49px 905px #fff,
    1897px 1698px #fff, 1937px 84px #fff, 1831px 1273px #fff, 1244px 1355px #fff,
    731px 737px #fff, 1536px 802px #fff, 628px 394px #fff, 1582px 1266px #fff,
    1583px 668px #fff, 1548px 1611px #fff, 303px 945px #fff, 1749px 980px #fff,
    909px 732px #fff, 645px 808px #fff, 56px 1087px #fff, 1320px 1359px #fff,
    1053px 473px #fff, 1783px 834px #fff, 137px 1176px #fff, 786px 1701px #fff,
    656px 906px #fff, 620px 793px #fff, 1471px 423px #fff, 1046px 108px #fff,
    1849px 1270px #fff, 1152px 1323px #fff, 323px 623px #fff, 304px 1154px #fff,
    678px 1427px #fff, 734px 955px #fff, 1717px 674px #fff, 1974px 1431px #fff,
    859px 1871px #fff, 822px 1386px #fff, 1961px 1081px #fff, 750px 1690px #fff,
    1387px 547px #fff, 776px 907px #fff, 435px 1934px #fff, 542px 321px #fff,
    320px 754px #fff, 622px 1759px #fff, 1758px 597px #fff, 742px 469px #fff,
    638px 1795px #fff, 1578px 1755px #fff, 1881px 1923px #fff, 148px 1001px #fff,
    1333px 1015px #fff, 663px 453px #fff, 166px 730px #fff, 319px 1423px #fff,
    1571px 1401px #fff, 1538px 1363px #fff, 851px 15px #fff, 1884px 590px #fff,
    1016px 778px #fff, 1993px 1060px #fff, 40px 444px #fff, 667px 639px #fff,
    1299px 1074px #fff, 547px 923px #fff, 93px 1476px #fff, 1411px 1712px #fff,
    535px 1825px #fff;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}
</style>

Enter fullscreen mode

Exit fullscreen mode

Источник

Learn how to catch errors in different lifecycle.

Handling Errors

Nuxt 3 is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:

  1. Errors during the Vue rendering lifecycle (SSR + SPA)
  2. Errors during API or Nitro server lifecycle
  3. Server and client startup errors (SSR + SPA)

Errors During the Vue Rendering Lifecycle (SSR + SPA)

You can hook into Vue errors using onErrorCaptured.

In addition, Nuxt provides a vue:error hook that will be called if any errors propagate up to the top level.

If you are using an error reporting framework, you can provide a global handler through vueApp.config.errorHandler. It will receive all Vue errors, even if they are handled.

Example With Global Error Reporting Framework

export default defineNuxtPlugin((nuxtApp) => {  nuxtApp.vueApp.config.errorHandler = (error, context) => {    // ...  }})

Server and Client Startup Errors (SSR + SPA)

Nuxt will call the app:error hook if there are any errors in starting your Nuxt application.

This includes:

  • running Nuxt plugins
  • processing app:created and app:beforeMount hooks
  • mounting the app (on client-side), though you should handle this case with onErrorCaptured or with vue:error
  • processing the app:mounted hook

Errors During API or Nitro Server Lifecycle

You cannot currently define a server-side handler for these errors, but can render an error page (see the next section).

Rendering an Error Page

When Nuxt encounters a fatal error, whether during the server lifecycle, or when rendering your Vue application (both SSR and SPA), it will either render a JSON response (if requested with Accept: application/json header) or an HTML error page.

You can customize this error page by adding ~/error.vue in the source directory of your application, alongside app.vue. This page has a single prop — error which contains an error for you to handle.

When you are ready to remove the error page, you can call the clearError helper function, which takes an optional path to redirect to (for example, if you want to navigate to a ‘safe’ page).

Make sure to check before using anything dependent on Nuxt plugins, such as $route or useRouter, as if a plugin threw an error, then it won’t be re-run until you clear the error.

Example

error.vue

<template>  <button @click="handleError">Clear errors</button></template><script setup>const props = defineProps({  error: Object})const handleError = () => clearError({ redirect: '/' })</script>

Error Helper Methods

useError

  • function useError (): Ref<Error | { url, statusCode, statusMessage, message, description, data }>

This function will return the global Nuxt error that is being handled.

createError

  • function createError (err: { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error

You can use this function to create an error object with additional metadata. It is usable in both the Vue and Nitro portions of your app, and is meant to be thrown.

If you throw an error created with createError:

  • on server-side, it will trigger a full-screen error page which you can clear with clearError.
  • on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting fatal: true.

Example

pages/movies/[slug].vue

<script setup>const route = useRoute()const { data } = await useFetch(`/api/movies/${route.params.slug}`)if (!data.value) {  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })}</script>

showError

  • function showError (err: string | Error | { statusCode, statusMessage }): Error

You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or setup() functions. It will trigger a full-screen error page which you can clear with clearError.

It is recommended instead to use throw createError().

clearError

  • function clearError (options?: { redirect?: string }): Promise<void>

This function will clear the currently handled Nuxt error. It also takes an optional path to redirect to (for example, if you want to navigate to a ‘safe’ page).

Rendering Errors Within Your App

Nuxt also provides a <NuxtErrorBoundary> component that allows you to handle client-side errors within your app, without replacing your entire site with an error page.

This component is responsible for handling errors that occur within its default slot. On client-side, it will prevent the error from bubbling up to the top level, and will render the #error slot instead.

The #error slot will receive error as a prop. (If you set error = null it will trigger re-rendering the default slot; you’ll need to ensure that the error is fully resolved first or the error slot will just be rendered a second time.)

If you navigate to another route, the error will be cleared automatically.

Example

pages/index.vue

<template>  <!-- some content -->  <NuxtErrorBoundary @error="someErrorLogger">    <!-- You use the default slot to render your content -->    <template #error="{ error }">      You can display the error locally here.      <button @click="error = null">        This will clear the error.      </button>    </template>  </NuxtErrorBoundary></template>
Источник
title description

Views

The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Document, Layouts, Pages and HTML Head)

The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Document, Layouts, Pages and HTML Head)

nuxt-views-schema

Document

You can customise the main document with nuxt.js

To extend the html template, create a app.html at the root of your project.

The default template is:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

One example if to add conditional CSS classes for IE:

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Layouts

Nuxt.js lets you extend the main layout or create custom layouts by adding them in the layouts directory.

Default Layout

You can extend the main layout by adding a layouts/default.vue file.

Make sure to add the <nuxt/> component when creating a layout to display the page component.

The default layout source code is:

<template>
  <nuxt/>
</template>

Error Page

You can customize the error page by adding a layouts/error.vue file or configuring ErrorPage in nuxt.config.js.

This layout is special since you should not include <nuxt/> inside its template. You must see this layout as a component displayed when an error occurs (404, 500, etc).

The default error page source code is available on GitHub.

Example of a custom error page in layouts/error.vue:

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // you can set a custom layout for the error page
}
</script>

Example of configuring a custom error page in nuxt.config.js:

module.exports = {
  ErrorPage: '~/components/custom-error.vue'
}

Custom Layout

Every file (first level) in the layouts directory will create a custom layout accessible with the layout property in the page component.

Make sure to add the <nuxt/> component when creating a layout to display the page component.

Example of layouts/blog.vue:

<template>
  <div>
    <div>My blog navigation bar here</div>
    <nuxt/>
  </div>
</template>

And then in pages/posts.vue, you can tell Nuxt.js to use your custom layout:

<script>
export default {
  layout: 'blog'
}
</script>

More information about the layout property: API Pages layout

Check the demonstration video to see it in action.

Pages

Every Page component is a Vue component, but Nuxt.js adds special keys to make the development of your universal application the easiest way possible.

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
  head () {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}
</script>

<style>
.red {
  color: red;
}
</style>
Attribute Description
asyncData The most important key, it can be asynchronous and receives the context as argument, please read the async data documentation to learn how it works.
fetch Used to fill the store before rendering the page, it’s like the data method except it doesn’t set the component data. See the API Pages fetch documentation.
head Set specific Meta Tags for the current page, see API Pages head documentation.
layout Specify a layout defined in the layouts directory, see API Pages layouts documentation.
transition Set a specific transition for the page, see API Pages transition.
scrollToTop Boolean, by default: false. Specify if you want the page to scroll to the top before rendering the page, it’s used for nested routes.
validate Validator function for a dynamic route.
middleware Set a middleware for this page, the middleware will be called before rendering the page, see routes middleware.

More information about the pages properties usage: API Pages

HTML Head

Nuxt.js uses vue-meta to update the headers and html attributes of your application.

Nuxt.js configures vue-meta with these options:

{
  keyName: 'head', // the component option name that vue-meta looks for meta info on.
  attribute: 'data-n-head', // the attribute name vue-meta adds to the tags it observes
  ssrAttribute: 'data-n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
  tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
}

Default Meta Tags

Nuxt.js let you define all default meta for your application inside nuxt.config.js, use the same head property:

Example of a custom viewport with a custom Google font:

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

To know the list of options you can give to head, take a look at vue-meta documentation.

More information about the head method: API Configuration head

Custom Meta Tags for a Page

More information about the head method: API Pages head

To avoid any duplication when used in child component, please give a unique identifier with the hid key, please read more about it.

Источник

Error pages are very important to have and to add them to your Nuxt Js application, it’s very straightforward and easy to implement. What we essentially need is an «error.vue» file inside the layouts folder and the code should be as follow.

Error template

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else-if="error.statusCode === 500">Internal Server error</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    // layout: 'error' // you can set a custom layout for the error page
  }
</script>

The code above should be named «error.vue» and this is a special template that Nuxt has set and it will accept a prop with error as its name. To know more of the available properties, do console log the error object or refer to this documentation of Nuxt Error Page section.

Alternative Tags

  • Creating an error page in Nuxt.js

  • Nuxt Js with 404 and 500 pages, how to customize it?

Источник

Содержание

  1. Error handling
  2. Handling Errors
  3. Errors During the Vue Rendering Lifecycle (SSR + SPA)
  4. Example With Global Error Reporting Framework
  5. Server and Client Startup Errors (SSR + SPA)
  6. Errors During API or Nitro Server Lifecycle
  7. Rendering an Error Page
  8. NuxtJS : Create a custom error page (404, 500, . )
  9. Top comments (2)
  10. 11 Tips That Make You a Better Typescript Programmer
  11. 1 Think in Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead. #2 Understand declared type and narrowed type One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type. Источник Custom Error Pages with nuxt.js If you’ve been working with Nuxt lately you will know how powerful, awesome and east it is to use. It’s by far the best framework for Vue to get up and running for your next SPA. And then bam, you hit a javascript error and you get served with the default gray nuxt error page with the nuxtjs label in the bottom left hand corner. Half of your site is missing and you’re left to refresh the page because all functionality at this point has broken. Searching Google for ‘custom error page in nuxt’ just yeilds github issues that will get you no closer to solving your problem. The best way is just to RTFM. Yes, read the f**king manual. I learnt this the hard way, ha! So, to make this easier for you I’ve outline what you need to do below: Step 1: Handling your Errors As outlined by the nuxt documentation you can call upon error inside asyncData() to return a nice formatted error back to nuxt. Step 2: Create your custom error page Now, this is where it gets a little weird. The nuxt docs outline that you must create a custom layout view however, it’s not a layout. It just has to live there. Do not include inside this template file, treat it exactly as a normal page view. The error object is passed down through props. Remember the call we made to error previously error(< statusCode: 400, message: ‘Post not found’ >); The error object now has statusCode and message available for us to use. Page not found And that’s it, you can test this by going to a route that doesn’t exist in your nuxt app and you should get your new custom error page. Bonus Round If you’re like me, you will want to setup some additional components to manage different error states. This keeps our code nice and clean too. Go forth and catch errors gracefully and make them look amazing! Источник Error page not work on Nuxt Server Error #5904 Comments Version Reproduction link Steps to reproduce Create the layout/error.vue Create the page which will call Axios via Vuex When calling API via Axios, the API return 404/500 What is expected ? The error will pass to the custom Error page. What is actually happening? If user use nuxt-router to change the page (not SSR), the custom error page shown. But if I refresh and view the SSR Page. The NuxtServerError Page will be shown in dev mode (yarn dev) and the default Server Error page when yarn start. Additional comments? Here is my Axios Helper The text was updated successfully, but these errors were encountered: Any reason you don’t use https://github.com/nuxt-community/axios-module/ together with a nuxt plugin, where you have access to the context as well? 🤔 @manniL Hi, Thanks for reply. My main problem is the custom error page not work when serverside rendering , so I choose the $nuxt.error() to force redirect to errorpage. I can use the axios module with nuxt plugin to fix this problem in this case. But in other files such as Vuex , the action cannot use the nuxt in server side too. the this.$nuxt will be undefined when server side rendering. If I use throw error , it will show the default NuxtServerError page. So I want to know is there any functions can redirect to custom error page or override the default server error page. I have the same problem . How to bring custom error page if initialisation fails even before rendering layout? Also, is it possible to go to error page from plugin e.g. in case if plugin failed to initialise? I am trying all these scenarios in SPA mode and yet didn’t manage to get to error page from early failure Thanks for your contribution to Nuxt.js! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open: Verify that you can still reproduce the issue in the latest version of nuxt-edge Comment the steps to reproduce it Issues that are labeled as pending will not be automatically marked as stale. Источник Handling errors while server side rendering your code in Nuxt.js Today I was putting the final touches on a Nuxt.js application and my aim was to set up some nice looking error pages that are other than the default Nuxt ‘server error’. I ran into trouble because I had a few misconceptions about how Nuxt handles errors, and what features you get out of the box to help with this. Naively, I thought that Nuxt would do everything for me One of the reasons I love Nuxt is because of all of the features you get out of the box. But errors are one of those things, where no application can guess what you want to happen, when certain situations arise and it all starts going wrong. It starts to get tricky even more when you are dealing with other technologies like Axios and its default interpretation of certain error codes, for better or for worse. What types of errors am I trying to handle? Firstly, I am writing an application that heavily uses Nuxt for the server side rendering capabilities it has. Every page I have must be able to be generated on the server to be as SEO friendly as any standard web page. When writing lots of code that will all be executed on the server, you will likely run into the first kind of exception/error very quickly. The Nuxt Server Error page, this is what you see when an unhandled exception is generated while the server side render operation is happening When you get your data for your site from an API, using a library like Axios, depending on what you are retrieving you may end up with various response codes from your request. For instance, my API returns a 404 Not Found code if the specific query has returned no results. You are still getting a response, and a message telling you what has happened, but this will trigger an exception in Axios. If you do not handle this, you will get the error page as shown above. 404 is a fairly normal response code, but this one caught me out. One important distinction to make is when you are running your application in npm run dev mode over a production npm run build mode, then you will see errors differently. Nuxt error while in dev mode So that pretty much sets the scene, when you are in SSR mode and you get an error, it all goes south pretty quickly. So when this happens, what can do with the tools Nuxt gives you? What got me confused Most of everything you need is in the Nuxt Error View section of their documentation. This gets you started, but I still got confused around a few parts. Thinking that Nuxt would show my error page for any unhandled exception My first thought was that I was setting up a page that would replace the default Nuxt Server Error that I showed above. So I created the layout layouts/error.vue and populated it with the data snippets and template given in the Nuxt documentation. Rebuilt, I hit refresh on my page I was generating an error on. then nothing had changed. What was wrong? Was my code wrong? Was something wrong with my Nuxt instance? Oh no, does Nuxt not actually handle errors well? Well, what I had missed was this page about the Nuxt error handling method. Here it became clear that the Nuxt Error View is not about handling errors for you, but it is more about giving you a place you can direct your application to when things start going wrong. eg. You must make an explicit call to the Nuxt error handler when YOU detect the error, likely in your .catch() block of the function or action you were running. Ah ha! Once I knew this, I started to test this out in my app. If I call the error method that is available in the context then I should see the result I am after. Success, when I simulated a 404 on my API call, I was shown the error template that I had set up by calling the error method shown in the example above. With this new success, I tried this out in another page I have in my app. I redirected by calling the error() function, but it did not work… This new error made me question what I had learned up until now. I had called the error function in the same way as the previous page, but now it wasn’t working. After a bit of digging around, I realised how the calls really work. Ok, I think I have it now There is a hierarchy that I had to figure out. The most important thing to know is that errors on the server take the most precedence over anything else. Not that they are more important, but they stop the execution of the Nuxt application. If you app encounters an exception, and you do not handle it, then it is going to stop. As a last resort, Nuxt can throw the Nuxt Server Error page. By this point, your Nuxt app has stopped executing. It has a static page it will return to the browser as part of the page request. There is no Nuxt magic at this point either so you cannot call for other resources or reference your Store or the error that caused this in the first place. Everything finally came together for me when I realised that the Nuxt framework does not handle errors for you, but it allows you to handle knows error states yourself whether your app encounters an exception on the server or on the client. This means that when ever you are running commands that can cause an exception, you must make sure you are going to catch and handle the exceptions. In my previous example where the I was catching my initial exception, I was actually missing the subsequent exceptions caused by the lack of the data I was expecting. Because of this, the Nuxt error() function was never able to fire properly in the Nuxt execution cycle, and the async nature of the error() function. Hence, I was still getting the Nuxt Server Error rather than my custom error page. So what to learn from all of this? After figuring out all of my trouble, I now know my priorities: 1. In the JS code, all possible exception must be handled. If you get an uncaught JavaScript error, then Nuxt will crash out of executing even if the exception occurs after you call error() . If your error can be silently handled, eg. no products returned from my API, then handle the 404 status code using a .catch() block in Axios. In my case with my API 404 , I populate my product array with an empty array where my template knows what to show when the array length is zero. This also mean any functions that can generate exceptions, like an Axios call, should be in a try/catch block. 2. Once the exception has been handled, if necessary I can display the Nuxt error() view to give the user some kinds of options for how to proceed. eg. Try again, or goto the home page 3. If there is an exception that I was not expecting or cannot handle, eg. the API is down and did not respond, then I can call error from the catch block in my nuxtServerInit function, or in any of the async function where the Nuxt context is present. Now that we know how to deliver a custom error page when it is needed, we can concentrate on creating an experience that gets our users back on the path they need to be. Given we have the full power of Nuxt in the custom error view, there should be no shortage of helpful suggestions we can give our users. BONUS: You can actually customise the default Nuxt Server Error page As a side note, I found there is a way that you can actually customise the Nuxt Server Error page, this is not really a feasible method for handling most errors, but it is still worth a mention. In your nuxt.config.js you can overwrite the template that is used to display this page. More info on replacing the contents of the error page here. Going one step further, you can overwrite this entire page using a method where you create a new file app/views/error.html in the root Nuxt application directory. Again, I would recommend against this as a ‘solution’ as by this point you are fully out of the Nuxt framework, and you are essentially coding a static HTML file. Can you try to render << this >> to see there is something kind of happening but it is as good as static 😉 For me, this approach does not work as I need to pull my main navigation contents from an API, and feed it into components. If I cannot do this (because I am no longer in the Nuxt framework), then it is not viable for my needs. Источник
  12. #2 Understand declared type and narrowed type
  13. Custom Error Pages with nuxt.js
  14. Step 1: Handling your Errors
  15. Step 2: Create your custom error page
  16. Page not found
  17. Bonus Round
  18. Error page not work on Nuxt Server Error #5904
  19. Comments
  20. Version
  21. Reproduction link
  22. Steps to reproduce
  23. What is expected ?
  24. What is actually happening?
  25. Additional comments?
  26. Handling errors while server side rendering your code in Nuxt.js
  27. What types of errors am I trying to handle?
  28. What got me confused
  29. Thinking that Nuxt would show my error page for any unhandled exception
  30. Ah ha!
  31. Ok, I think I have it now
  32. So what to learn from all of this?
  33. BONUS: You can actually customise the default Nuxt Server Error page

Error handling

Learn how to catch errors in different lifecycle.

Handling Errors

Nuxt 3 is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:

  1. Errors during the Vue rendering lifecycle (SSR + SPA)
  2. Errors during API or Nitro server lifecycle
  3. Server and client startup errors (SSR + SPA)

Errors During the Vue Rendering Lifecycle (SSR + SPA)

You can hook into Vue errors using onErrorCaptured .

In addition, Nuxt provides a vue:error hook that will be called if any errors propagate up to the top level.

If you are using an error reporting framework, you can provide a global handler through vueApp.config.errorHandler . It will receive all Vue errors, even if they are handled.

Example With Global Error Reporting Framework

Server and Client Startup Errors (SSR + SPA)

Nuxt will call the app:error hook if there are any errors in starting your Nuxt application.

  • running Nuxt plugins
  • processing app:created and app:beforeMount hooks
  • mounting the app (on client-side), though you should handle this case with onErrorCaptured or with vue:error
  • processing the app:mounted hook

Errors During API or Nitro Server Lifecycle

You cannot currently define a server-side handler for these errors, but can render an error page (see the next section).

Rendering an Error Page

When Nuxt encounters a fatal error, whether during the server lifecycle, or when rendering your Vue application (both SSR and SPA), it will either render a JSON response (if requested with Accept: application/json header) or an HTML error page.

You can customize this error page by adding

/error.vue in the source directory of your application, alongside app.vue . This page has a single prop — error which contains an error for you to handle.

When you are ready to remove the error page, you can call the clearError helper function, which takes an optional path to redirect to (for example, if you want to navigate to a ‘safe’ page).

Источник

NuxtJS : Create a custom error page (404, 500, . )

Error pages in NuxtJS are really useful in Dev, but in Prod, your users don’t really care about the error details! It’s always better to create a custom error page with a simple message that explains that something went wrong.

The good news is: creating a custom error page in NuxtJS is deadly simple!

Create an «error.vue» file into your layout folder :

Exit fullscreen mode

In this example, we display a «Page not found» when the error.statusCode is equal to 404, else we display another error message with the status code. (ex: «An error occurred — 500»)

BONUS — Want the same error page as the image? Here is the code! 👩‍🚀

DO NOT FORGET TO INSTALL TAILWINDCSS, or this won’t work.
https://tailwindcss.nuxtjs.org/

Exit fullscreen mode

THANKS. I think something may be helpful if you’re using nuxt 3. just add the error.vue file to the root of your project and not the layouts folder.
(also: remove the hidden class from the third div of the above code :))) )

This doesn’t work out of the box — the ‘error’ layout is recursive.

For further actions, you may consider blocking this person and/or reporting abuse

11 Tips That Make You a Better Typescript Programmer

1 Think in

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

Источник

Custom Error Pages with nuxt.js

If you’ve been working with Nuxt lately you will know how powerful, awesome and east it is to use. It’s by far the best framework for Vue to get up and running for your next SPA.

And then bam, you hit a javascript error and you get served with the default gray nuxt error page with the nuxtjs label in the bottom left hand corner.

Half of your site is missing and you’re left to refresh the page because all functionality at this point has broken.

Searching Google for ‘custom error page in nuxt’ just yeilds github issues that will get you no closer to solving your problem. The best way is just to RTFM. Yes, read the f**king manual. I learnt this the hard way, ha!

So, to make this easier for you I’ve outline what you need to do below:

Step 1: Handling your Errors

As outlined by the nuxt documentation you can call upon error inside asyncData() to return a nice formatted error back to nuxt.

Step 2: Create your custom error page

Now, this is where it gets a little weird. The nuxt docs outline that you must create a custom layout view however, it’s not a layout. It just has to live there.

Do not include inside this template file, treat it exactly as a normal page view. The error object is passed down through props.

Remember the call we made to error previously error(< statusCode: 400, message: ‘Post not found’ >); The error object now has statusCode and message available for us to use.

Page not found

And that’s it, you can test this by going to a route that doesn’t exist in your nuxt app and you should get your new custom error page.

Bonus Round

If you’re like me, you will want to setup some additional components to manage different error states. This keeps our code nice and clean too.

Go forth and catch errors gracefully and make them look amazing!

Источник

Error page not work on Nuxt Server Error #5904

Version

Reproduction link

Steps to reproduce

  1. Create the layout/error.vue
  2. Create the page which will call Axios via Vuex
  3. When calling API via Axios, the API return 404/500

What is expected ?

The error will pass to the custom Error page.

What is actually happening?

If user use nuxt-router to change the page (not SSR), the custom error page shown.
But if I refresh and view the SSR Page. The NuxtServerError Page will be shown in dev mode (yarn dev) and the default Server Error page when yarn start.

Here is my Axios Helper

The text was updated successfully, but these errors were encountered:

Any reason you don’t use https://github.com/nuxt-community/axios-module/ together with a nuxt plugin, where you have access to the context as well? 🤔

@manniL Hi, Thanks for reply. My main problem is the custom error page not work when serverside rendering , so I choose the $nuxt.error() to force redirect to errorpage.

I can use the axios module with nuxt plugin to fix this problem in this case. But in other files such as Vuex , the action cannot use the nuxt in server side too. the this.$nuxt will be undefined when server side rendering. If I use throw error , it will show the default NuxtServerError page.

So I want to know is there any functions can redirect to custom error page or override the default server error page.

I have the same problem . How to bring custom error page if initialisation fails even before rendering layout? Also, is it possible to go to error page from plugin e.g. in case if plugin failed to initialise? I am trying all these scenarios in SPA mode and yet didn’t manage to get to error page from early failure

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

  1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
  2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

Источник

Handling errors while server side rendering your code in Nuxt.js

Today I was putting the final touches on a Nuxt.js application and my aim was to set up some nice looking error pages that are other than the default Nuxt ‘server error’. I ran into trouble because I had a few misconceptions about how Nuxt handles errors, and what features you get out of the box to help with this.

Naively, I thought that Nuxt would do everything for me

One of the reasons I love Nuxt is because of all of the features you get out of the box. But errors are one of those things, where no application can guess what you want to happen, when certain situations arise and it all starts going wrong.

It starts to get tricky even more when you are dealing with other technologies like Axios and its default interpretation of certain error codes, for better or for worse.

What types of errors am I trying to handle?

Firstly, I am writing an application that heavily uses Nuxt for the server side rendering capabilities it has. Every page I have must be able to be generated on the server to be as SEO friendly as any standard web page.

When writing lots of code that will all be executed on the server, you will likely run into the first kind of exception/error very quickly.

The Nuxt Server Error page, this is what you see when an unhandled exception is generated while the server side render operation is happening

When you get your data for your site from an API, using a library like Axios, depending on what you are retrieving you may end up with various response codes from your request. For instance, my API returns a 404 Not Found code if the specific query has returned no results. You are still getting a response, and a message telling you what has happened, but this will trigger an exception in Axios. If you do not handle this, you will get the error page as shown above. 404 is a fairly normal response code, but this one caught me out.

One important distinction to make is when you are running your application in npm run dev mode over a production npm run build mode, then you will see errors differently.

Nuxt error while in dev mode

So that pretty much sets the scene, when you are in SSR mode and you get an error, it all goes south pretty quickly.

So when this happens, what can do with the tools Nuxt gives you?

What got me confused

Most of everything you need is in the Nuxt Error View section of their documentation. This gets you started, but I still got confused around a few parts.

Thinking that Nuxt would show my error page for any unhandled exception

My first thought was that I was setting up a page that would replace the default Nuxt Server Error that I showed above. So I created the layout layouts/error.vue and populated it with the data snippets and template given in the Nuxt documentation. Rebuilt, I hit refresh on my page I was generating an error on. then nothing had changed.

What was wrong? Was my code wrong? Was something wrong with my Nuxt instance? Oh no, does Nuxt not actually handle errors well?

Well, what I had missed was this page about the Nuxt error handling method. Here it became clear that the Nuxt Error View is not about handling errors for you, but it is more about giving you a place you can direct your application to when things start going wrong.

eg. You must make an explicit call to the Nuxt error handler when YOU detect the error, likely in your .catch() block of the function or action you were running.

Ah ha!

Once I knew this, I started to test this out in my app. If I call the error method that is available in the context then I should see the result I am after.

Success, when I simulated a 404 on my API call, I was shown the error template that I had set up by calling the error method shown in the example above.

With this new success, I tried this out in another page I have in my app.

I redirected by calling the error() function, but it did not work…

This new error made me question what I had learned up until now. I had called the error function in the same way as the previous page, but now it wasn’t working. After a bit of digging around, I realised how the calls really work.

Ok, I think I have it now

There is a hierarchy that I had to figure out. The most important thing to know is that errors on the server take the most precedence over anything else. Not that they are more important, but they stop the execution of the Nuxt application. If you app encounters an exception, and you do not handle it, then it is going to stop. As a last resort, Nuxt can throw the Nuxt Server Error page. By this point, your Nuxt app has stopped executing. It has a static page it will return to the browser as part of the page request. There is no Nuxt magic at this point either so you cannot call for other resources or reference your Store or the error that caused this in the first place.

Everything finally came together for me when I realised that the Nuxt framework does not handle errors for you, but it allows you to handle knows error states yourself whether your app encounters an exception on the server or on the client.

This means that when ever you are running commands that can cause an exception, you must make sure you are going to catch and handle the exceptions. In my previous example where the I was catching my initial exception, I was actually missing the subsequent exceptions caused by the lack of the data I was expecting. Because of this, the Nuxt error() function was never able to fire properly in the Nuxt execution cycle, and the async nature of the error() function. Hence, I was still getting the Nuxt Server Error rather than my custom error page.

So what to learn from all of this?

After figuring out all of my trouble, I now know my priorities:

1. In the JS code, all possible exception must be handled. If you get an uncaught JavaScript error, then Nuxt will crash out of executing even if the exception occurs after you call error() .

  • If your error can be silently handled, eg. no products returned from my API, then handle the 404 status code using a .catch() block in Axios. In my case with my API 404 , I populate my product array with an empty array where my template knows what to show when the array length is zero.
  • This also mean any functions that can generate exceptions, like an Axios call, should be in a try/catch block.

2. Once the exception has been handled, if necessary I can display the Nuxt error() view to give the user some kinds of options for how to proceed. eg. Try again, or goto the home page

3. If there is an exception that I was not expecting or cannot handle, eg. the API is down and did not respond, then I can call error from the catch block in my nuxtServerInit function, or in any of the async function where the Nuxt context is present.

Now that we know how to deliver a custom error page when it is needed, we can concentrate on creating an experience that gets our users back on the path they need to be. Given we have the full power of Nuxt in the custom error view, there should be no shortage of helpful suggestions we can give our users.

BONUS: You can actually customise the default Nuxt Server Error page

As a side note, I found there is a way that you can actually customise the Nuxt Server Error page, this is not really a feasible method for handling most errors, but it is still worth a mention.

In your nuxt.config.js you can overwrite the template that is used to display this page. More info on replacing the contents of the error page here. Going one step further, you can overwrite this entire page using a method where you create a new file app/views/error.html in the root Nuxt application directory. Again, I would recommend against this as a ‘solution’ as by this point you are fully out of the Nuxt framework, and you are essentially coding a static HTML file. Can you try to render << this >> to see there is something kind of happening but it is as good as static 😉

For me, this approach does not work as I need to pull my main navigation contents from an API, and feed it into components. If I cannot do this (because I am no longer in the Nuxt framework), then it is not viable for my needs.

Источник

Источник

This answer is only relevant for SSR mode.

There are different possible type of errors. I will provide here info about 2 types of them:

  • errors in dynamic routes
  • errors during data fetching (nuxt >= 2.12, fetch hook)

Errors handling for dynamic routes [Option 1]:

According to Nuxt docs about lifecycle there is a special validate hook. It’s main purpose to validate dynamic routes parameters.
Here you can find more detailed description, but in general you need to provide validate implementation which supposed to return true when params are valid and false when they are not.
In case of false nuxt will return 404 response with default error page (you can also throw expected or unexpected errors during validate function execution as well as customize default error page).

Important note here:

This method takes the context object as an argument.

Errors handling for dynamic routes [Option 2]:

Whenever you need to return different status codes for server-side rendered pages in Nuxt, you need to use middleware.

This is the main idea — you have to define your own middleware to verify url here (probably with async logic inside).

import { Context } from "@nuxt/types";
import { isUrlValid } from "~/services/validateRoute";

export default async function (context: Context) {
  if (!(await isUrlValid(context.route.path))) {
    context.error({
      statusCode: 404,
      message: `Invalid route: ${context.route.path}`,
    });
  }
}

And to make it work, it should be linked to the corresponding dynamic route page:

import Vue from "vue";
import Component from "vue-class-component";
@Component({
  middleware: "validateRoute",
})
export default class RedirectPage extends Vue {}

Working app example is here: https://github.com/DamirsCorner/20210521-nuxt-dynamic-route-404

Source: https://www.damirscorner.com/blog/posts/20210521-404PageForNuxtDynamicNestedRoutes.html

Data fetching errors handling:

Nuxt docs says:

If there is an error when fetching data, the normal Nuxt error page
won’t be loaded — and you should not use the Nuxt redirect or error
methods within fetch(). Instead, you will need to handle it within
your component using $fetchState.error.

So, it’s pretty straightforward:

<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching mountains</p>
    <ul v-else>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

From this example you can see that you won’t be able to change response code, since error in that stage will be interpreted as normal situation with 200 response code.

Источник

I bet every Nuxt.js developer has seen this error page at least once:

Default Nuxt Server Error Page

And I’m sure that you’ve asked yourself: How to change this page?
You likely want to brand this error page similar to your client side error pages,
so that your users aren’t as confused whenever a server-side error occurs and
have info available how to proceed further.

Table of Content

  • Testing the server-side error page
  • Changing text
  • Completely replace the error page
  • Conclusion

Testing the server-side error page

Let’s create a new dummy page called error.vue in the pages folder:

export default {
  asyncData() {
    throw new Error(':(')
  }
}

To see the page you have to boot up the project in production mode. Otherwise youch will kick in and give you information about the occurred error.
After going through npm run build && npm start, open the page (f.ex. with localhost:3000/error) and you should see the error page.

Okay… changing time!

Changing text

Do you like the style and only want to change the text there?
No problem! You can do this through your nuxt.config.js.
The text for the default error pages is extracted from the message object.
The important default values can be found below:

export default {
  messages: {
      loading: 'Loading...',
      error_404: 'This page could not be found',
      server_error: 'Server error',
      nuxtjs: 'Nuxt.js',
      back_to_home: 'Back to the home page',
      server_error_details:
        'An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.',
      client_error: 'Error',
      client_error_details:
        'An error occurred while rendering the page. Check developer tools console for details.'
  }
}

I’ve highlighted the lines that influence the text of the default server error page. Let’s change them and see what happens!

export default {
  messages: {
      server_error: 'Oh no! Server error',
      nuxtjs: 'Is this Nuxt.js?',
      back_to_home: 'Cmon, back home!',
      server_error_details: 'Uh uh :| Server errorrrrr',
  }
}

Altered Nuxt Server Error Page showing the heading 'Oh No! Server error' and the message 'Uh uh :| Server errorrrrr'

Looks great so far! But as you may think, this isn’t everything ?

Completely replace the error page

Surprise folks! Similar to an own app.html file, you can also replace the server-side error page.

All you have to do is to create a folder called app in your project root and another one inside it called views.
Now add an error.html file inside the views folder and edit it to customize your error page.

HTML means: No Vue/Nuxt logic, only pure HTML and CSS. You can add javascript (eg. error reporting tools) and so on if you want though.

I’ll add a small unstyled piece of HTML for demo purposes.

/app/views/error.html:

White screen showing the characters 'Oh no :('

There we go!

Conclusion

It was easier than you thought, wasn’t it?
Now it’s your turn! ? I’d love to see some nice error page designs, so if you built a great one and want to share it be sure to send it to me as well.

As usual, I hope the article helped you out somehow.
If you’ve spotted typos, wrong code or have questions, feedback or ideas, please send me a message!

You can reach out on Twitter (@TheAlexLichter) or through email (blog at lichter dot io).
Stay tuned for more content ?

Источник

Понравилась статья? Поделить с друзьями:
  • Custom 400 error
  • Curtis 1232 ошибки
  • Curtis 1230 ошибки
  • Cursor error css
  • Curses error setupterm could not find terminal