Gridsome & Vuetify


Author: Rachel
November 7, 2019 | 3 mins to read

JAMstack sites have become increasingly popular lately for its speed, performance, and cost, particularly for blogs. Gridsome is a popular Vue.js powered framework for static site generation. Vuetify is a Material Design framework built with Vue that provides powerful reusable components, such as accordions, cards, and progress bars styled using Material Design. Combine the two and you have a very powerful component-packed statically generated application.

This is particularly useful for personal portfolios, blogs, and small business websites. The cost of deployment is free for most such use cases, so there's no ongoing hosting cost. You'll only need to worry about the occasional site update for maintenance.

Layer on a Content Management System (CMS) like Netlify CMS or Forestry.io, and you can easily edit your own site with the right templates packs.

Gridsome

Gridsome makes it easy to bring in data from any CMS, markdown file, and other data sources, such as APIs, databases, etc. into a Vue.js application. It integrates seamlessly with various static web hosts and Content Delivery Networks (CDN), such as Netlify, AWS Amplify, and Amazon S3, making deployment straightforward, easy, and potentially free, if you're under a certain traffic threshold.

Gridsome also abstracts data using GraphQL, allowing retrieval of only the data that's necessary for the page. It produces files that are optimized for speed by providing features such as asset optimization, progressive images, and link prefetching out of the box. It's also easy to make into a Progressive Web App (PWA), so that only the necessary HTML, CSS and Javascript load, while other pages are pre-fetched, allowing fast navigation and offline caching. Gridsome was built to be SEO-friendly, allowing search engines to crawl site content to provide a better SEO ranking before the Vue.js application is loaded.

Vuetify

Vuetify is a comprehensive Material Design Component Framework, built with Vue. It provides a lot of common components found in modern web applications. It also speeds up development for complex websites.

It works well with other frameworks, such as Electron (for desktop application development), and Cordova (for mobile app development). Themes are easy to define, allowing seamless conversion of theme colors to match a specific brand. It also supports accessibility and internationalization.

Common components include: Alert windows, Avatars, Badges, Banners, Navigation Bars, Buttons, Calendars, Chips, Dialog Windows, Expansion Panels, Form Styles/Layouts, Menus, Lists, Paginations, Parallax, Tabs, Steppers, Timelines, and much more! For a comprehensive list of all the components, check our their documentation.

Gridsome + Vuetify Starter

In order to take advantage of the speed/performance of a static site generator and the comprehensive component library offered by Vuetify, I've created a starter using Gridsome and Vuetify components. It's open source and can be found here.

It offers the following out of the box: Header/Footer, Navigation, Home Blog Post, Blog Page, About Page, and a Contact Page. The layout is fairly simple and offers plenty of room for customization and improvement.

Best Use Cases

This starter is great for developing a personal blog, portfolio site, about page, and basic business website. It's practically free if you can handle the edits yourself, and has a low customization cost if you need some design support.

While it's great for developers and designers, if you're a small business owner and don't want to tinker too much with the code, a more established CMS like Wordpress would be a better long-term option. I would recommend reviewing my article on First Website though to better understand whether this may be useful for you if you're in need of a website.

I also invite you to schedule a free consultation, and I'm happy to advise on the best solution based on your needs.

See Also:
Vuetify - Material Design Component Framework  https://www.vuetifyjs.com/en/.