You can create a Vue project manually or use the npm Vue portlet template to automate much of the required configuration for you. For convenience, all manual steps are listed below. This tutorial shows how to use Vue JS in your portlets, whether you’re migrating an existing Vue project or building a fresh one. See the npm Vue portlet template reference docs for more information on the portlet’s anatomy or the npm Vue portlet sample for a Vue portlet example that you can test and deploy right now. Get started by creating your OSGi module and configuring its metadata.
Configuring Metadata
Follow these steps to create the module and configure its metadata for Vue:
-
Create an OSGi module. For example, use the npm Vue portlet template.
-
Specify the
Web-ContextPath
BND Header in your project’sbnd.bnd
file. Below is the default configuration for the npm Vue portlet template:Web-ContextPath: /my-npm-vue-portlet
-
Create a
.babelrc
file and add the following presets to it:{ "presets": ["env"] }
-
Optionally add a
.npmbundlerrc
file to your project’s root folder. This file is not required. You can, however, configure this file to customize the liferay-npm-bundler to suit your needs, such as to ignore files. -
Include the following dependency to your
build.gradle
file:compileOnly group: "com.liferay", name: "com.liferay.frontend.js.loader.modules.extender.api", version: "2.0.2"
-
Create a
package.json
in your project if it doesn’t already exist and add the configuration shown below to it. Update the"main"
JS path to point to your app’s main JS file. Note that theliferay-npm-bundler
is added last to the build script. List any additional build processes before this that your project requires:{ "dependencies": { "vue": "2.4.4" }, "description": "Vue.js Portlet", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.7.0", "liferay-npm-bundler": "^2.0.0" }, "main": "js/index.js", "name": "my-npm-vuejs-portlet", "scripts": { "build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler" }, "version": "1.0.0" }
To use ES2015+ syntax in your portlet, you must transpile it for the browser. Babel, included in your build script, takes care of this for you.
Next You can configure the portlet.
Configuring the Portlet
Follow these steps to configure your portlet:
-
Create a Component class that implements the
Portlet.class
service:@Component( immediate = true, property = { "com.liferay.portlet.display-category=category.sample", "com.liferay.portlet.instanceable=true", "javax.portlet.init-param.template-path=/", "javax.portlet.init-param.view-template=/view.jsp", "javax.portlet.name=" + MyNpmVuejsPortletKeys.MyNpmVuejs, "javax.portlet.resource-bundle=content.Language", "javax.portlet.security-role-ref=power-user,user" }, service = Portlet.class ) public class MyNpmVuejsPortlet extends MVCPortlet { ... }
-
If your Vue project includes CSS styling, add the following additional property to specify the location of the main CSS file:
"com.liferay.portlet.header-portlet-css=/css/main.css"
Note that this path is relative to the resources path. If using Sass, drop the
.scss
extension in this property and use.css
instead. For example, if your main CSS file is located insrc/main/resources/META-INF/resources/css/app.scss
, then you would have the following configuration:"com.liferay.portlet.header-portlet-css=/css/app.css"
-
To improve code maintenance, use the NPMResolver APIs to alias your module’s package name. The example below exposes the module’s name as
bootstrapRequire
:@Override public void doView( RenderRequest renderRequest, RenderResponse renderResponse) throws IOException, PortletException { JSPackage jsPackage = _npmResolver.getJSPackage(); renderRequest.setAttribute( MyNpmVuejsWebKeys.BOOTSTRAP_REQUIRE, jsPackage.getResolvedId() + " as bootstrapRequire"); super.doView(renderRequest, renderResponse); } @Reference private NPMResolver _npmResolver;
-
Inside your
init.jsp
, add the following Java scriptlet to access thebootstrapRequire
variable in your portlet’sview.jsp
:<% String bootstrapRequire = (String)renderRequest.getAttribute( MyNpmVuejsWebKeys.BOOTSTRAP_REQUIRE ); %>
Next you can learn how to render your app’s component.
Rendering Your Component
Follow these steps to render your app component:
-
Inside your app’s main JS file (
index.js
for example), use the function below to render your component:import Vue from 'vue/dist/vue.common'; export default function(portletNamespace) { // Application 1 new Vue({ el: `#${portletNamespace}-root`, data: { message: 'Hello from Vue.js!', }, methods: { reverseMessage: function() { this.message = this.message .split('') .reverse() .join(''); }, }, }); }
-
Open your
view.jsp
and add an element container to house your component. Then, add an<aui:script>
and pass your aliased module name as therequire
attribute’s value. Finally, call your module’sdefault
function that you exported in the previous step and pass the portlet namespace. Adding the<portlet:namespace />
to the<div>
’sid
ensures that it is unique to the portlet and doesn’t clash with any existing elements on the page:<%@ include file="/init.jsp" %> <div id="<portlet:namespace />-root"></div> <aui:script require="<%= bootstrapRequire %>"> bootstrapRequire.default('<portlet:namespace />'); </aui:script>
Now you know how to use Vue in your projects!