Table of Contents
Introduction
This walkthrough will guide you on how to get started with your first JSS Vue.js application using the JSS CLI. The JSS CLI is a powerful tool that allows you to create and run applications with JSS for Vue.js. This guide will walk you through the steps to install the JSS CLI, familiarize yourself with the available templates for JavaScript apps built with JSS, create your application, and run it.
Familiarize yourself with the available templates
Before diving into creating your first JSS for Vue.js application, it’s important to familiarize yourself with the available templates for JavaScript apps built with JSS. These templates provide a starting point for your application and will help you understand the structure and organization of a JSS for Vue.js application.
You can find more information about the available templates on the JSS website here.
Install the JSS CLI
To create and run applications with JSS for Vue.js, you will need to install the JSS CLI. The JSS CLI is a command-line tool that provides a set of commands for creating, developing, and deploying JSS for Vue.js applications.
To install the JSS CLI, open your terminal and run the following command:
npm install -g @jss/sitecore-jss-cli
This command will install the JSS CLI globally on your system, allowing you to use it from any directory.
Create your application
Once you have installed the JSS CLI, you can create your JSS for Vue.js application. To create a new application, navigate to the directory where you want to create your application and run the following command:
jss create myvueapp vue
Replace myvueapp with the name you want to give to your application. This command will create a new directory with the specified name and scaffold a new JSS for Vue.js application inside it.
Run your application
After creating your application, you can run it to see how it looks and functions. To start your application, navigate to the root directory of your application and run one of the following scripts in your terminal:
- If you do not have a Sitecore instance available and want to start the application in disconnected mode, run the following command:
npm run start:disconnected
- If you have a Sitecore instance and want to develop against it, you can start the application in connected mode by running the following command:
npm run start:connected
These scripts are defined in the package.json file of your JSS for Vue.js application and will start a development server that serves your application locally.
Conclusion
This walkthrough has provided a step-by-step guide on how to get started with your first JSS for Vue.js application using the JSS CLI. We covered how to install the JSS CLI, familiarize yourself with the available templates, create your application, and run it. Now you can start building your own JSS for Vue.js applications and leverage the power and flexibility of Vue.js with the JSS framework.
For more information and detailed documentation about JSS for Vue.js, visit the official JSS website here.
