MyFirstTemplate.adoc

My First Template

This chapter describes how to set up the project and complete the first steps.

1. Requirements

2. Setting up the Project

3. Development Mode

4. Writing Components

Requirements

• node - latest LTS Version: 18.3.0

• A text editor - like VS Code with the Vue language Features plugin. Make sure you disable any other Vue related plugins, because they might interfer with each other.

• A terminal - like VS Code’s integrated terminal

• Git - latest major version: > 2.

• A FirstSpirit Server with the following project imported https://github.com/e-Spirit/smartliving-website

Setting up the Project

1. Open the terminal and if needed, navigate to your preferred directory where the project should be saved.

2. Clone the project using the terminal command git clone https://github.com/e-Spirit/crownpeak-pwa-template.git. The project should be downloaded into a folder called my-nuxt3-pwa.

3. Navigate to the newly created folder with cd my-nuxt3-pwa.

4. Copy the existing .env.template file and paste it with the new name .env or run the command cp .env.template .env. Some values from the env.template file are optional see configuration page.

5. The .env file must contain all the information you need to access your own system. You can get this information from your contact at Crownpeak Technology GmbH. By default, this file is located in the .gitignore and is therefore not persisted. Each required attribute is explained briefly, for a more detailed description please check the configuration page.

6. To install the needed dependencies run the command npm install.

7. After all dependencies are installed, you can start a local development server with npm run dev.

8. After the server is started, it can be accessed at http://localhost:3000 in your browser.

Development Mode

There is a development mode that helps to easily map the content coming from the CaaS.

To enable the development mode, the variable devMode must be set to true in the app.config.ts file. Be aware that you have to restart the server when you change anything in this file. This file is also checked into git. So be sure to change the variable back to false before deploying to production. Alternatively you can set NUXT_PRIVATE_DEV_MODE to true in your .env file.

If you are in development mode and a component on the page has not been developed yet, you will get an unknown component which shows where a component is missing and what information in the component can be addressed.

If you are in development mode and you have already implemented the component, then you will see question marks when hovering over the element.

Clicking on this question mark will provide you with more information about which component is being displayed and what data is available.

Writing Components

In this guide you find instructions on how to write your own custom Vue single file components.