Vue Layout Template

Posted on  by admin

You block advertising 😢Would you like to buy me a ☕️ instead? Vue.js is flexible enough to serve as a tool for either progressively enhancing certain parts of traditional server-side rendered applications or powering large scale single-page applications, and everything in between.

If you build complex single-page applications, you’ll most likely encounter situations where you need different page layouts for certain parts of your app. Today we’ll take a look at multiple ways of how to handle layouts in Vue.js, and we’ll explore the potential up and downsides of the different approaches.

You can find the code for this article on GitHub, and you can browse the final result hosted on Netlify.

Nowadays, I assume that most of you use the awesome Vue CLI to kickstart new Vue.js projects (if you don’t, you absolutely should check it out). So let’s take a look at what the Vue CLI is preparing for us.

This is the default approach for structuring a basic layout for a Vue Router powered Vue.js application. It works fine as long as you don’t need different layouts throughout your application.

For example, you may have a checkout flow where you don’t want to display a navigation. Or you might have product pages with sidebars and other pages without sidebars and so on.

Let’s take a look at how we can enhance the default approach provided to us by the Vue CLI to handle cases where we have to display different layouts. The most basic and straightforward approach would be to render certain parts of your layout conditionally. So you might add v-if directives to certain parts of your layout and toggle the visibility as you wish.

Like What You Read?

Conclusions

One problem of this approach is, that you have to control the visibility of those elements somewhere in your application. There are multiple ways of doing this and you can read about some of those in one of my recent articles about how to handle global state in Vue.js.

But to be completely honest, I’m not a big fan of this approach. Although it might be the right way to go if you don’t need very complex layouts and you just want to hide some element in certain contexts, this approach can potentially become a maintenance nightmare as your application is growing.

Do you want to learn more about advanced Vue.js techniques?

Next we take a look at how we can use an ordinary component, containing one or multiple slots for the different parts of the layout, as a wrapper for our views. This approach is used by a lot of people (including me) because it offers a ton of flexibility and it also feels not as dirty as the conditional rendering approach.

In the template section of the src/App.vue base component, we only render the . A new src/layouts/LayoutDefault.vue component now renders the layout for us and it provides a default for the content. This is basically the layout for all the regular pages (views) of our application. The src/Home.vue component implements the LayoutDefault wrapper component to wrap its content.

Top Ten Vue Templates

Although, in terms of flexibility, this approach has everything we need, there is one huge downside of wrapping our views in a static layout component: the component is destroyed and re-created every time the route changes. This not only has a negative effect on the performance, because the client has to re-create the layout component (and all the other components nested inside of it) again and again on every route change, but it can also mean you have to fetch certain data, which you use in one of the components of your layout, on every route change.

You can play around with the following demo application to see an example of this in action. Note that the username in the top right will be loaded again and again every time you navigate from one page to another. So static layout wrapper components are very powerful and flexible, but they also come with a cost.

The Vue CLI way

Let’s check out if we can come up with an approach which has all the positive characteristics of static wrapper components but none of the negative ones. Before we get started, let me say that the component system in Vue.js is very, very powerful. One of those very powerful features of the component system are dynamic components.

In the example above, SomeComponent is a variable, which can be dynamically assigned to any component and each time you assign a different component, the template renders the new component in the place where you defined the tag.

Vue Pros and Cons

We can use dynamic components, to build a very flexible yet performant dynamic layout system. First of all, let’s update our App base component to prepare it for dynamic layouts. In order to do so, we wrap the tag with a dynamic component tag. The tag renders whatever component is defined in the layout variable.

Because we want our router views to be able to control which layout component is rendered, we define a synchronous layout property on the tag. This makes it possible to update the layout property from within our views by emitting a update:layout event.

Static layout wrapper components

The is property of the dynamic component can also be set to render a regular HTML element. So what we can do is to set the value of layout to div by default as a fallback if a view has not defined its own layout. But keep in mind that this means such a view is rendered inside a

if its route is accessed directly but it renders as whichever layout was set by the view before if it is not accessed directly but via following a link in you SPA.

So I recommend you to explicitly set a layout in all of your view components. Above you can see that we don’t wrap the template of our Home view inside of the LayoutDefault component anymore, but we load the component and emit it as the new value of the layout property which we’ve defined in the App base component.

How to Easily Build Your Vue App with Flatlogic

This means, as soon as the Home component is created, the dynamic component wrapping the , which renders the Home component, is re-rendered to render the component we’ve emitted in the created() hook. At first glance, this might seem like a more complicated version of the static layout wrapper approach. But let me explain why this approach comes with all the benefits of the static component approach but shares none of the potential problems those can have.

The main difference is, that the layout component is not part of the router view component but wraps around it. This means that the layout component is only re-rendered if the view component uses a different layout than the previous view component. So for example, if all of your pages but the login page, use the same layout, the layout is only re-rendered if the user opens the login page, which should be relatively rare.

Conditional rendering

Next you can see the same demo application as in the static layout wrapper example but now using a dynamic component to load the layout instead. Note that other than in the first example, the name of the currently logged in user in the top right, is not fetched again and again on every route change because only the router view is re-rendered.

Renderless components are awesome. You can read more about them in one of my previous articles about how to build renderless declarative data fetching components. In our case, we can utilize the power of renderless components to make it easier and more comfortable to use dynamic layout components in our views.

Dynamic layout wrapper components

So let’s refactor our code. Similar to the static layout wrapper approach, we wrap the template of our view in a wrapper component again. But this time, the wrapper component is a renderless component which does not render any markup itself. As you can see above, we’ve moved the code for emitting the layout component we want to use, into a new LayoutDefaultDynamic renderless component.

We’re doing so by calling the $emit method on the $parent (this is a reference to the view component which is utilizing the dynamic layout component). Usually reaching for the $parent is kind of an anti pattern but in this case it’s ok because the LayoutDefaultDynamic component must be used in the context of a view component, so we can be sure that $parent always is a reference to a view component.

Suggested Articles

Refactoring our code to utilize the renderless components technique, makes using dynamic layouts much more intuitive. Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture. Depending on how well your JavaScript code is optimized by webpack and depending on the structure of your application (e.g.

if you have a lot of different layouts or one default layout and some rarely used special layouts), with this approach, you might end up in a situation where the same layouts are loaded again and again on every route change.

Introduction

We can work against that by dynamically importing the layout component only in case it has not been loaded and registered before. As I’ve already said, this approach is not necessarily better than the previous way of not using dynamic imports. It highly depends on your application and how well webpack optimizes your bundles.

I’d recommend you to test both approaches and settle for the one which provides better results in terms of performance, or, if the differences are negligible, whichever you like better. Follow me to get my latest Vue.js articles.

Wrapping it up

When building large scale single-page applications, it is almost inevitable that you need a robust layout system. Using dynamic rendering can be a quick fix but it can become a maintenance hell as complexity is growing and requirements are changing. Static wrapper layouts can be problematic in terms of rendering performance and also can lead to larger bundle sizes.

By using dynamic renderless layout components we can achieve the same flexibility and functionality as with static wrapper layouts but without forcing the client to re-render the complete layout on every route change and with the potential to improve bundle sizes thanks to dynamic imports.

22. Calendlify

As a huge Vue enthusiast, I am always on the hunt for high-quality templates, themes, and resources to speed up my development process. But as you might guess, finding high-quality templates isn't always easy, and sometimes it's even hard to know where to start. There are many options available, and all of them claim to be the best. To help you out, I have compiled a list of top premium and free Vue templates.

This list includes 50+ high-quality resources, each tailored to suit your unique project. All templates come with a full preview so you can get an idea of what it looks like before you start and, they are stretched with features that could help you get your project done faster than ever before.

16. NextKit

Some resources in this list include:. Admin dashboard templates. Web app templates. Website templates. Landing page templates. UI kits and components libraries. With the resources above it will be easier for you to create future-focused interfaces for your projects. If you find that any of these templates work for you, please be sure to share this information with others who may benefit from it as well. Live Demo / Download. Mosaic is a powerful admin dashboard template built with Tailwind CSS, featuring hundreds of pre-built pages and styled layouts in HTML, React, and Vue.

13. Skote

With multiple styles and full-screen sections, it's a perfect fit for admin dashboards, eCommerce, marketplaces, FinTech, and SaaS companies to use as a starting point for their projects. Beautiful charts built with Chart.js. Multiple use cases and products. Tutorials and documentation available . Simple is a Vue and Tailwind CSS landing page template designed to provide all the basic components a developer/founder needs to create a landing page for SaaS products, online services, digital agencies and more.

44. Light Blue Vue Admin

The design of Simple looks very professional and is perfect for businesses that work remotely and need a powerful yet easy-to-use platform. Attractive and modern design. Fully accessible components. Interactive previews. Live Demo / Download. Start Vue Free is a material-inspired VueJS 3 and Bootstrap 5 based Admin and Dashboard theme built by KeenThemes. The theme features a fully responsive layout with a gorgeous design suitable for any type of web applications.

9. Tidy

Start Vue helps you build your project from scratch or helps you convert your existing site into a beautiful web application within minutes! Free version available. Chat app for client support. Product gallery and search panel. Welcome to Open Pro, your new site designed by Cruip.com for showcasing your startup or company. Open Pro was created with startups and developers in mind and comes with a dark design and an easy-to-use interface.

24. Star Admin Pro Vue

It's easier than ever to create landing pages and corporate websites, so get started today. Open-source images. Fully customisable themes and pages. Marketing tools integration. Live Demo / Download. If you’re a coder looking to harness the power of Vue.js for your admin dashboard then look no further than Vuexy.

Conclusion

This premium admin template is the perfect choice for both novices and experienced developers alike. The Vuexy builder allows you to create your complements to demo whether it would be a chart, a CTA button, call to action buttons or labels. You can even design your entire complement which gives you complete creativity. Laravel Starter Kit. Project management apps.

Organised folder structure. Appy will make it easier than ever to set up a landing page to present your mobile app, without asking your user to enter the phone number when it isn't necessary.