{"id":256806,"date":"2017-07-24T07:32:36","date_gmt":"2017-07-24T14:32:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=256806"},"modified":"2017-07-24T11:50:24","modified_gmt":"2017-07-24T18:50:24","slug":"simple-server-side-rendering-routing-page-transitions-nuxt-js","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/simple-server-side-rendering-routing-page-transitions-nuxt-js\/","title":{"rendered":"Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js"},"content":{"rendered":"

A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started!<\/p>\n

<\/p>\n

Server side rendering<\/h3>\n
You might have heard people talking about server side rendering as of late. We looked at one method to do that with React<\/a> recently. One particularly compelling aspect is the performance benefits. When we render our HTML, CSS, and JavaScript on the server, we often have less JavaScript to parse both initially and on subsequent updates. This article<\/a> does really well going into more depth on the subject. My favorite takeaway is:<\/p>\n
By rendering on the server, you can cache the final shape of your data.<\/p><\/blockquote>\n
Instead of grabbing JSON or other information from the server, parsing it, then using JavaScript to create layouts of that information, we’re doing a lot of those calculations upfront, and only sending down the actual HTML, CSS, and JavaScript that we need. This can reap a lot of benefits with caching, SEO, and speed up our apps and sites.<\/p>\n
What is Nuxt.js?<\/h3>\n
Server side rendering sounds pretty nice, but you’re probably wondering if it’s difficult to set up. I’ve been using Nuxt.js<\/a> for my Vue applications lately and found it surprisingly simple to work with. To be clear: you don’t need to use Nuxt.js in particular to do server side rendering. I’m just a fan of this tool for many reasons. I ran some tests last month and found that Nuxt.js had even higher lighthouse scores<\/a> out of the gate than Vue’s PWA template, which I thought was impressive.<\/p>\n
Nuxt.js is a higher-level framework that you can use with a CLI command that you can use to create universal Vue applications. Here are some, not all, of the benefits:<\/p>\n
\n
Server-Side Rendering<\/li>\n
Automatic Code Splitting<\/li>\n
Powerful Routing System<\/li>\n
Great lighthouse scores out of the gate 🐎<\/li>\n
Static File Serving<\/li>\n
ES6\/ES7 Transpilation<\/li>\n
Hot reloading in Development<\/li>\n
Pre-processors: SASS, LESS, Stylus, etc<\/li>\n
Write Vue Files to create your pages and layouts!<\/li>\n
My personal favorite: easily<\/em> add transitions to your pages<\/li>\n<\/ul>\n
Let’s set up a basic application with some routing to see the benefits for ourselves.<\/p>\n
Getting Set up<\/h3>\n
The first thing we need to do if you haven’t already is download Vue’s CLI. You can do so globally with this command:<\/p>\n
`npm install -g vue-cli\r\n\r\n# ... or ...\r\n \r\nyarn add global vue-cli<\/code><\/pre>\nYou will only need to do this once, not every time you use it.<\/p>\n Next, we’ll use the CLI to scaffold a new project, but we’ll use Nuxt.js as the template:<\/p>\n`vue init nuxt\/starter my-project\r\ncd my-project\r\nyarn # or... npm install\r\nnpm run dev<\/code><\/pre>\nYou’ll see the progress of the app being built and it will give you a dedicated development server to check out: http:\/\/127.0.0.1:3000\/. This is what you’ll see right away (with a pretty cool little animation):<\/p>\n<\/figure>\nLet’s take a look at what’s creating this initial view of our application at this point. We can go to the `pages` directory, and inside see that we have an `index.vue` page. If we open that up, we’ll see all of the markup that it took to create that page. We’ll also see that it’s a `.vue` file, using single file components just like any ordinary `vue` file, with a template tag for the HTML, a script tag for our scripts, where we’re importing a component, and some styles in a style tag. (If you aren’t familiar with these, there’s more info on what those are here<\/a>.) The coolest part of this whole thing is that this `.vue` file doesn’t require any special setup. It’s placed in the `pages` directory, and Nuxt.js will automatically make this server-side rendered page!<\/p>\n Let’s create a new page and set up some routing between them. In `pages\/index.vue`, dump the content that’s already there, and replace it with:<\/p>\n <template>\r\n <div class=\"container\">\r\n <h1>Welcome!<\/h1>\r\n <p><nuxt-link to=\"\/product\">Product page<\/nuxt-link><\/p>\r\n <\/div>\r\n<\/template>\r\n\r\n<style>\r\n.container {\r\n font-family: \"Quicksand\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; \/* 1 \/\r\n padding: 60px;\r\n}\r\n<\/style><\/code><\/pre>\nThen let’s create another page in the pages directory, we’ll call it `product.vue` and put this content inside of it:<\/p>\n <template>\r\n <div class=\"container\">\r\n <h1>This is the product page<\/h1>\r\n <p><nuxt-link to=\"\/\">Home page<\/nuxt-link><\/p>\r\n <\/div>\r\n<\/template><\/code><\/pre>\nRight away, you’ll see this:<\/p>\n <\/iframe><\/p>\n<p>Ta-da! 🏆<br \/>\nRight away, we have server side rendering, routing between pages (if you check out the URL you can see it’s going between the index page and product page), and we even have a sweet little green loader that zips across the top. We didn’t have to do much <em>at all<\/em> to get that going.<\/p>\n<p>You might have noticed in here, there’s a special little element: <code><nuxt-link to=\"\/\"><\/code>. This tag can be used like an <code>a<\/code> tag, where it wraps around a bit of content, and it will set up an internal routing link between our pages. We’ll use <code>to=\"\/page-title-here\"<\/code> instead of an <code>href<\/code>.<\/p>\n<p>Now, let’s add some transitions. We\u2019ll do this in a few stages: simple to complex.<\/p>\n<h3>Creating Page Transitions<\/h3>\n<p>We already have a really cool progress bar that runs across the top of the screen as we\u2019re routing and makes the whole thing feel very zippy. (That\u2019s a technical term). While I like it very much, it won\u2019t really fit the direction we\u2019re headed in, so let\u2019s get rid of it for now. <\/p>\n<p>We’re going to go into our `nuxt.config.js` file and change the lines:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\r\n** Customize the progress-bar color\r\n\/\r\nloading: { color: '#3B8070' },<\/code><\/pre>\n<p>to<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">loading: false,<\/code><\/pre>\n<p>You’ll also notice a few other things in this <code>nuxt.config.js<\/code> file. You’ll see our meta and head tags as well as the content that will be rendered inside of them. That’s because we won’t have a traditional `index.html` file as we do in our normal CLI build, Nuxt.js is going to parse and build our `index.vue` file together with these tags and then render the content for us, on the server. If you need to add CSS files, fonts, or the like, we would use this Nuxt.js config file to do so.<\/p>\n<p>Now that we have all that down, let’s understand what’s available to us to create page transitions. In order to understand what\u2019s happening on the page that we\u2019re plugging into, we need to review how the transition component in Vue works. I’ve written <a href=\"https:\/\/css-tricks.com\/intro-to-vue-5-animations\/\">an article all about this here<\/a>, so if you’d like deeper knowledge on the subject, you can check that out. But what you really need to know is this: under the hood, Nuxt.js will plug into the functionality of Vue’s <code>transition<\/code> component, and gives us some defaults and hooks to work with:<\/p>\n<figure id=\"post-250565\" class=\"align-right media-250565\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/transition.png?ssl=1\" alt=\"transition component hooks\" \/><\/figure>\n<p>You can see here that we have a hook for what we want to happen <strong>right before<\/strong> the animation starts <code>enter<\/code>, <strong>during<\/strong> the animation\/transition <code>enter-active<\/code>, and when it <strong>finishes<\/strong>. We have these same hooks for when something is leaving, prepended with <code>leave<\/code> instead. We can make simple transitions that just interpolate between states, or we could plug a full CSS or JavaScript animation into them. <\/p>\n<p>Usually in a Vue application, we would wrap a component or element in <code><transition><\/code> in order to use this slick little functionality, but Nuxt.js will provide this for us at the get-go. Our hook for the page will begin with, thankfully- <code>page<\/code>. All we have to do to create an animation between pages is add a bit of CSS that plugs into the hooks:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.page-enter-active, .page-leave-active {\r\n transition: all .25s ease-out;\r\n}\r\n.page-enter, .page-leave-active {\r\n opacity: 0;\r\n transform-origin: 50% 50%;\r\n}<\/code><\/pre>\n<p>I’m also going to add an extra bit of styling here so that you can see the page transitions a little easier:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">html, body {\r\n font-family: \"Quicksand\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; \/ 1 *\/\r\n background: #222;\r\n color: white;\r\n width: 100vw;\r\n height: 100vh;\r\n}\r\n\r\na, a:visited {\r\n color: #3edada;\r\n text-decoration: none;\r\n}\r\n\r\n.container {\r\n padding: 60px;\r\n width: 100vw;\r\n height: 100vh;\r\n background: #444;\r\n}<\/code><\/pre>\n<p><iframe loading=\"lazy\" title=\"Simplest Nuxt Page Transition\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/pobLOtcbo_g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Right now we’re using a CSS Transition. This only gives us the ability to designate what to do in the middle of two states. We could do something a little more interesting by having an animation adjust in a way that suggests where something is coming from and going to. For that to happen, we could separate out transitions for page-enter and page-leave-active classes, but it’s a little more DRY to use a CSS animation and specify where things are coming from and going to, and plug into each for <code>.page-enter-active<\/code>, and <code>.page-leave-active<\/code>:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.page-enter-active {\r\n animation: acrossIn .45s ease-out both;\r\n} \r\n\r\n.page-leave-active {\r\n animation: acrossOut .65s ease-in both;\r\n} \r\n\r\n@keyframes acrossIn {\r\n 0% {\r\n transform: translate3d(-100%, 0, 0);\r\n }\r\n 100% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n}\r\n\r\n@keyframes acrossOut {\r\n 0% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n 100% {\r\n transform: translate3d(100%, 0, 0);\r\n }\r\n}<\/code><\/pre>\n<p>Let’s also add a little bit of special styling to the product page so we can see the difference between these two pages:<\/p>\n<pre rel=\"CSS\"><code class=\"language-markup\"><style scoped>\r\n .container {\r\n background: #222;\r\n }\r\n<\/style><\/code><\/pre>\n<p>This scoped tag is pretty cool because it will apply the styles for this page\/vue file only. If you have heard of CSS Modules, you’ll be familiar with this concept.<\/p>\n<p>We would see this (this page is for demo purposes only, that’s probably too much movement for a typical page transition):<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/uFU_GqeZ5sw\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Now, let’s say we have a page with a totally different interaction. For this page, the movement up and down was too much, we just want a simple fade. For this case, we’d need to rename our transition hook to separate it out.<\/p>\n<p>Let\u2019s create another page, we\u2019ll call it the contact page and create it in the pages directory.<\/p>\n<pre rel=\"Vue\"><code class=\"language-markup\"><template>\r\n <div class=\"container\">\r\n <h1>This is the contact page<\/h1>\r\n <p><nuxt-link to=\"\/\">Home page<\/nuxt-link><\/p>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n transition: 'fadeOpacity'\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.fadeOpacity-enter-active, .fadeOpacity-leave-active {\r\n transition: opacity .35s ease-out;\r\n}\r\n\r\n.fadeOpacity-enter, .fadeOpacity-leave-active {\r\n opacity: 0;\r\n}\r\n<\/style><\/code><\/pre>\n<p>Now we can have two-page transitions:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/jGUiAl4ov3M\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>You can see how we could build on these further and create more and more streamlined CSS animations per page. But from here let’s dive into my favorite, JavaScript animations, and create page transitions with a bit more horsepower.<\/p>\n<h3>Javascript Hooks<\/h3>\n<p>Vue’s <code><transition><\/code> component offers some hooks to use JavaScript animation in place of CSS as well. They are as follows, and each hook is optional. The <code>:css=\"false\"<\/code> binding lets Vue know we’re going to use JS for this animation:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-markup\"><transition \r\n @before-enter=\"beforeEnter\"\r\n @enter=\"enter\"\r\n @after-enter=\"afterEnter\"\r\n @enter-cancelled=\"enterCancelled\"\r\n\r\n @before-Leave=\"beforeLeave\"\r\n @leave=\"leave\"\r\n @after-leave=\"afterLeave\"\r\n @leave-cancelled=\"leaveCancelled\"\r\n :css=\"false\">\r\n \r\n <\/transition><\/code><\/pre>\n<p>The other thing we have available to us are transition modes. I’m a big fan of these, as you can state that one animation will wait for the other animation to finish transitioning out before transitioning in. The transition mode we will work with will be called out-in.<\/p>\n<p>We can do something really wild with JavaScript and the transition mode, again, we’re going a little nuts here for the purposes of demo, we would usually do something much more subtle:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/8t1PdiziI_U\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>In order to do something like this, I’ve run <code>yarn add gsap<\/code> because I’m using GreenSock for this animation. In my `index.vue` page, I can remove the existing CSS animation and add this into the <code><script><\/code> tags:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import { TweenMax, Back } from 'gsap'\r\n\r\nexport default {\r\n transition: {\r\n mode: 'out-in',\r\n css: false,\r\n beforeEnter (el) {\r\n TweenMax.set(el, {\r\n transformPerspective: 600,\r\n perspective: 300,\r\n transformStyle: 'preserve-3d'\r\n })\r\n },\r\n enter (el, done) {\r\n TweenMax.to(el, 1, {\r\n rotationY: 360,\r\n transformOrigin: '50% 50%',\r\n ease: Back.easeOut\r\n })\r\n done()\r\n },\r\n leave (el, done) {\r\n TweenMax.to(el, 1, {\r\n rotationY: 0,\r\n transformOrigin: '50% 50%',\r\n ease: Back.easeIn\r\n })\r\n done()\r\n }\r\n }\r\n}<\/code><\/pre>\n<p>All of the code for these demos exist in my <a href=\"https:\/\/github.com\/sdras\/intro-to-vue\" rel=\"noopener\">Intro to Vue repo<\/a> for starter materials if you’re getting ramped up learning Vue.<\/p>\n<p>One thing I want to call out here is that currently there is a bug for transition modes in Nuxt.js. This bug is fixed, but the release hasn’t come out yet. It should be all fixed and up to date in the upcoming 1.0 release, but in the meantime, here is a <a href=\"https:\/\/glitch.com\/edit\/#!\/cooing-car\" rel=\"noopener\">working simple sample demo<\/a>, and the <a href=\"https:\/\/github.com\/nuxt\/nuxt.js\/issues\/566\" rel=\"noopener\">issue to track<\/a>.<\/p>\n<p>With this working code and those JavaScript hooks we can start to get much fancier and create unique effects, with different transitions on every page:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/m0SPGT3Vai8?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Here’s the site that the demo was deployed to if you’d like to see it live: <a href=\"https:\/\/nuxt-type.now.sh\/\" rel=\"noopener\">https:\/\/nuxt-type.now.sh\/<\/a> as well as the repo that houses the code for it: <a href=\"https:\/\/github.com\/sdras\/nuxt-type\" rel=\"noopener\">https:\/\/github.com\/sdras\/nuxt-type<\/a><\/p>\n<h3>Navigation<\/h3>\n<p>In that last demo you might have noticed we had a common navigation across all of the pages what we routed. In order to create this, we can go into the `layouts` directory, and we’ll see a file called `default.vue`. This directory will house the base layouts for all of our pages, “default” being the, uhm, default :)<\/p>\n<p>Right away you’ll see this:<\/p>\n<pre rel=\"Vue\"><code class=\"language-markup\"><template>\r\n <div>\r\n <nuxt\/>\r\n <\/div>\r\n<\/template><\/code><\/pre>\n<p>That special <code><nuxt\/><\/code> tag will be where our `.vue` pages files will be inserted, so in order to create a navigation, we could insert a navigation component like this:<\/p>\n<pre rel=\"Vue\"><code class=\"language-markup\"><template>\r\n <div>\r\n <img class=\"moon\" src=\"~assets\/FullMoon2010.png\" \/>\r\n <Navigation \/>\r\n <nuxt\/>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport Navigation from '~components\/Navigation.vue'\r\n\r\nexport default {\r\n components: {\r\n Navigation\r\n }\r\n}\r\n<\/script><\/code><\/pre>\n<p>I love this because everything is kept nice and organized between our global and local needs.<\/p>\n<p>I then have a component called Navigation in a directory I’ve called `components` (this is pretty standard fare for a Vue app). In this file, you’ll see a bunch of links to the different pages:<\/p>\n<pre rel=\"Vue\"><code class=\"language-markup\"><nav>\r\n <div class=\"title\">\r\n <nuxt-link to=\"\/rufina\">Rufina<\/nuxt-link>\r\n <nuxt-link to=\"\/prata\">Prata<\/nuxt-link>\r\n <nuxt-link exact to=\"\/\">Playfair<\/nuxt-link>\r\n <\/div>\r\n<\/nav><\/code><\/pre>\n<p>You’ll notice I’m using that <code><nuxt-link><\/code> tag again even though it’s in another directory, and the routing will still work. But that last page has one extra attribute, the exact attribute: <code><nuxt-link exact to=\"\/\">Playfair<\/nuxt-link><\/code> This is because there are many routes that match just the `\/` directory, all of them do, in fact. So if we specify <code>exact<\/code>, Nuxt will know that we only mean the index page in particular.<\/p>\n<h3>Further Resources<\/h3>\n<p>If you’d like more information about Nuxt, <a href=\"https:\/\/nuxtjs.org\/\" rel=\"noopener\">their documentation<\/a> is pretty sweet and has a lot of examples to get you going. If you’d like to learn more about Vue, I’ve just made a course on <a href=\"https:\/\/frontendmasters.com\/courses\/\" rel=\"noopener\">Frontend Masters<\/a> and <a href=\"https:\/\/github.com\/sdras\/intro-to-vue\" rel=\"noopener\">all of the materials are open source here<\/a>, or you can check out our <a href=\"https:\/\/css-tricks.com\/guides\/vue\/\">Guide to Vue<\/a>, or you can go to <a href=\"https:\/\/vuejs.org\/\" rel=\"noopener\">the docs<\/a> which are extremely well-written. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing […]<\/p>\n","protected":false},"author":7699,"featured_media":257010,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1312,1314,625,1313,1073],"class_list":["post-256806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-nuxt","tag-page-transitions","tag-routing","tag-server-side-rendering","tag-vue"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/07\/nuxt.png?fit=1116%2C448&ssl=1","jetpack-related-posts":[{"id":265339,"url":"https:\/\/css-tricks.com\/routing-route-protection-server-rendered-vue-apps-using-nuxt-js\/","url_meta":{"origin":256806,"position":0},"title":"Routing and Route Protection in Server-Rendered Vue Apps Using Nuxt.js","author":"Chris Nwamba","date":"January 25, 2018","format":false,"excerpt":"You might have had some experience trying to render an app built with Vue on a server. The concept and implementation details of Server-Side Rendering (SSR) are challenging for beginners as well as experienced developers. The challenges get more daunting when you have to do things like data fetching, routing\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-nuxt-featured.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-nuxt-featured.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-nuxt-featured.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-nuxt-featured.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-nuxt-featured.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":337926,"url":"https:\/\/css-tricks.com\/sveltekit-is-in-public-beta\/","url_meta":{"origin":256806,"position":1},"title":"SvelteKit is in public beta","author":"Chris Coyier","date":"April 7, 2021","format":false,"excerpt":"Rich Harris: Think of it as\u00a0Next\u00a0for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on. Great move. I find Next.js a real pleasure to work with. I've hit some rough edges trying\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svelte-blobs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svelte-blobs.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svelte-blobs.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svelte-blobs.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svelte-blobs.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":289212,"url":"https:\/\/css-tricks.com\/components-yo\/","url_meta":{"origin":256806,"position":2},"title":"Components, yo.","author":"Chris Coyier","date":"June 14, 2019","format":false,"excerpt":"I see VuePress just went 1.0. Explained simply, it's a static site generator based on Vue. But of course, you work in Vue, which means you work in components. All the modern JavaScript frameworks are component-based. Even when they disagree with each other about specific things (like how Svelte requires\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":325619,"url":"https:\/\/css-tricks.com\/rendering-spectrum\/","url_meta":{"origin":256806,"position":3},"title":"Rendering Spectrum","author":"Chris Coyier","date":"November 24, 2020","format":false,"excerpt":"Here are the big categories of rendering websites: Client: ship a <div id=\"root\"><\/div> and let a JavaScript template render all of it.Static: pre-render the HTML.Server: let a live server process requests and generate the HTML response. They are not mutually exclusive. A website could statically pre-render 75% of it's pages\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":266471,"url":"https:\/\/css-tricks.com\/stimulus\/","url_meta":{"origin":256806,"position":4},"title":"Stimulus","author":"Chris Coyier","date":"February 10, 2018","format":false,"excerpt":"A modest JavaScript framework for the HTML you already have. This will appeal to anyone who is apprehensive about JavaScript being required to generate HTML, yet wants a modern framework to help with modern problems, like state management. I wonder if this would be a good answer for things like\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283672,"url":"https:\/\/css-tricks.com\/the-client-server-rendering-spectrum\/","url_meta":{"origin":256806,"position":5},"title":"The Client\/Server Rendering Spectrum","author":"Chris Coyier","date":"March 6, 2019","format":false,"excerpt":"I've definitely been guilty of thinking about rendering on the web as a two-horse race. There is Server-Side Rendering (SSR, like this WordPress site is doing) and Client-Side Rendering (CSR, like a typical React app). Both are full of advantages and disadvantages. But, of course, the conversation is more nuanced.\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/server-side-rendering.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/server-side-rendering.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/server-side-rendering.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/server-side-rendering.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/server-side-rendering.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=256806"}],"version-history":[{"count":23,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256806\/revisions"}],"predecessor-version":[{"id":257015,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256806\/revisions\/257015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/257010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=256806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=256806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=256806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Getting Set up<\/h3>\nThe first thing we need to do if you haven’t already is download Vue’s CLI. You can do so globally with this command:<\/p>\n