Show Navigation

Using the Vue.js Grails Profile

This guide introduces the Vue.js profile for Grails.

Authors: Zachary Klein

Grails Version: 3.3.3

1 Training

Grails Training - Developed and delivered by the folks who created and actively maintain the Grails framework!.

2 Getting Started

In this guide you are going to create an application using the Vue profile for Grails. This profile will generate a multi-project build, which includes a Grails application, and a Vue.js front-end app that access the RESTful API provided by Grails.

This profile will generate two applications, server and client. server will be a Grails 3 application built using the rest-api profile, which includes support for creating domain resources, restful controllers, and JSON views.

client is a standalone Vue.js app generated with the Vue-CLI (using the webpack template). The client app includes a complete UI implemented using Vue-Router and the the UIV (Bootstrap) library, and is configured to communicate with the Grails backend via REST. The client project also includes a functioning test suite (unit & e2e tests) and scripts for building and testing the app - see the vue-cli template documentation for more information.

2.1 What you will need

To complete this guide you will need the following:

  • 10 minutes or less

  • Grails 3.2.1 or greater installed

  • JDK 1.7 or greater installed with JAVA_HOME configured appropriately

3 Generate the Application

To get started with this profile, specify it when generating your app:

$ grails create-app myApp --profile=vue

You can also generate your project using the Application Forge, either from the web interface or using the following curl command:

curl -O start.grails.org/myApp.zip -d version=3.3.3 -d profile=vue

Take a look at the directory structure - you will see a typical Gradle multi-project build, with separate client and server projects.

drwxr-xr-x  9 zak  staff   306 Nov  1 13:15 client
drwxr-xr-x  3 zak  staff   102 Nov  1 13:10 gradle
-rwxr--r--  1 zak  staff  4971 Nov  1 13:10 gradlew
-rwxr--r--  1 zak  staff  2314 Nov  1 13:10 gradlew.bat
drwxr-xr-x  8 zak  staff   272 Nov  1 13:12 server
-rw-r--r--  1 zak  staff    26 Nov  1 13:10 settings.gradle

The server project is our Grails application. The profile will generate a Grails app using the rest-api profile, which provides support for creating domain classes as restful resources, CORS enabled by default, as well as JSON and Markup views.

client is our Vue app.

-rw-r--r--   1 zak  staff  44412 Nov  1 13:10 README.md
-rw-r--r--   1 zak  staff    669 Nov  1 13:10 build.gradle
-rw-r--r--   1 zak  staff    404 Nov  1 13:10 package.json
drwxr-xr-x   4 zak  staff    136 Nov  1 13:10 public
drwxr-xr-x  10 zak  staff    340 Nov  1 13:10 src

The client project structure (with the exception of build.gradle, which is specific to the profile) is all courtesy of Vue-CLI’s webpack template, and includes an excellent README file. In short, the src/ directory is where the Vue source code is kept, with subdirectories for /components , /assets, and config.

The static directory is for public resources that you wish to make available from your Vue app without being bundled by webpack. There is also a root index.html file which is used to generate the Vue app’s home page. Again, see the Vue-CLI template documentation for more details.

If you edit the file config/dev.env.js, you will see that the profile has added an additional configuration property to the template defaults:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  SERVER_URL: '"http://localhost:8080"' (1)
})
1 SERVER_URL points to the default address of the server Grails application, and is used as the base URL for REST calls from the Vue app.

You can change the existing configuration properties or add new ones to this file; they will apply to the "development" environment (note that the client environments are based on the scripts in client/package.json, and are not related to Grails' environments).

4 Running the Application

This profile also defines a set of custom Gradle tasks, including a bootRun task to startup the client app. You can either start up the server and client apps separately:

./gradlew server:bootRun

This will start the Grails application, which will be available at http://localhost:8080.

in another terminal
./gradlew client:start

This will start the dev server for the Vue application, which will be available at http://localhost:3000.

The client build.gradle file also includes a bootRun (for consistency with the server project), which means you can take advantage of Gradle’s parallel execution to run both client and server apps in a single command:

./gradlew bootRun -parallel

There are several more client tasks which "wrap" the npm scripts in package.json, for building and testing the Vue app. You can run them with the Gradle wrapper, or run the scripts directly if you have npm installed.

$ ./gradlew client:test
$ ./gradlew client:build
from the client directory:
$ npm test
$ npm run build

Again, please see the template documentation for more information on leveraging these scripts and the other features provided by Vue-CLI.

Rember to check Grails Vue Profile documentation to learn more.

5 Help with Grails

Object Computing, Inc. (OCI) sponsored the creation of this Guide. A variety of consulting and support services are available.

OCI is Home to Grails

Meet the Team