Overview

This overview is designed to help you become fluent in Vuetify's Vue SSR Template. If you have not already installed the webpack-ssr template, please do so in the Quick start.

Structure

This Vue CLI template was designed for performance, seo optimization and usability. This template is configured out of the box for css, sass and stylus pre-processors.

Folder Structure

/ project
  / assets
  / build
  / components
  / mixins
  / pages
  / router
  / static
  / store

The Build folder contains all of the webpack specific build configurations for your project. Src is where all the development project files reside. Notice that the Webpack-SSR template is out-of-the-box configured to use Vue Router, Vuex, and the Vue Server Renderer. This will allow you to make simple or complex applications that are not only fast/efficient, but SEO friendly.

Application

Navigate to the src folder and open up App.vue. Vuetify is a semantic-focused framework. The code you write should be easy to remember, and easy to manage. To do this, one of the main components of Vuetify is v-app. This component allows you to define your application layout. This is used in conjunction with v-toolbar, v-navigation-drawer, and v-footer.

The markup below tells the application that you have a toolbar and footer. Once defined, the content area will be resized to accommodate. For more information on layouts, navigate to the Layouts section.

<v-app>
  <v-toolbar app>
    <v-toolbar-title>Portfolio</v-toolbar-title>
  </v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app>2017</v-footer>
</v-app>

Static assets

Place all statically served assets in static. This can be accessed by referencing /static/picture.png, for example.

Components

The components folder is where your custom components should be placed. Edit the components/_index.js file to have these files automatically bootstrapped for you.

Routing

The Webpack-SSR template uses the official Vue Router for controlling application flow. Located in /src/router/index.js, all of your application routes and route logic will be defined here. Inside you will also see a function that allows you to setup dynamically imported pages. This is not required, however, it will help break up your application and only load views that are needed, clearing up space in your eventual bundle output.

routes: [
  route('/', 'Welcome'),
  route('/inspire', 'Inspire')
]

These routes can be accessed by creating a link to the specified path, or by using Vue Router's <router-link> component. For more information, review the official Vue Router documentation. The default function assumes you are placing views in the /pages folder containing View on the end of the file. Example HomeView.vue.

State control

State control is managed by the official Vuex library. This Vue plugin follows Facebook's Reflux design pattern. Navigate to /store/index.js. By default, Vuex is setup to prefetch data for the store before your page is initially rendered. To hook into this functionality, create a preFetch method on your view component.

preFetch (store) {
  store.dispatch('GET_USER', 2)
}

This is useful for bootstrapping your application so that any necessary data is available before the initial render.

For more information on State Control and Vuex, view the official documentation.

Vuetify integrates into Vuex to allow for easy debugging and access to stored properties. You can also use watchers to hook into store states and react when they change. More information can be found here.

Meta data

In order to ensure that page specific meta data is viewable when your pages are crawled, you can define your applications page specific information in router/meta.json. This will allow you to set page title, description and keywords for every route. This will automatically be applied for you on page load and change.

Redirects

As applications evolve, routes change. If you want to maintain the authority already garnered from bots that index your page, it is best to assign a 301 redirect to the new location. Located in router/301.json you can define 301 redirects for your pages which will automatically be handled for you on page load.

Web App support

Vuetify SSR has support for native Web Applications on smart phones. Also known as progressive web apps, your websites can be saved on the homescreen of a device, allowing it to be usable offline and receive push notifications. For more information on Web App Manifests, navigate to the Mozilla Developer Network. To see a live example, add the Vuetify documentation on your mobile device's homescreen.