9.8.1 Setting up the Vue application - caligrafy/caligrafy-quill GitHub Wiki

Caligrafy relies on several packages that are needed to leverage the full the capabilities of Vue. All these packages need Node.js to help build and package them in the easiest possible way.

Setup Requirements

Before proceeding with the Caligrafy Vue installation, you need to have Caligrafy Quill installed and set up.

Install Caligrafy
Setting up a Vue application requires Node.js and the NPM package installer. The fastest and easiest way to get both is to use the Node JS installer.

Once you download the package, you can run node --version and npm --version to verify that the package got installed properly. If the download was successful, the above commands should output the version of node and npm that have been installed.

Compatible versions

Caligrafy Quill is compatible with Vue 3 or higher
Vue 3 requires Node.js 16 or higher

Creating a Caligrafy Vue project

Caligrafy and Vue provide an easy way to scaffold your project.

If you have initialized Caligrafy already. You can skip this part.

If you have not done that already, you first need to initialize the framework. The quickest way to do that is to run the following commands in the terminal:
```
php caligrafer.php initialize
```
Learn more about installing Caligrafy

Creating a Vue project

Caligrafy provides you with a command line tool called Caligrafer that can help scaffold a Vue project for you.
```
php caligrafer.php create your_project_name
```
Getting all the dependencies

(This step is optional in case the previous step fails to install the packages)

Your project structure has been created in the public folder. We now need to get all the Vue packages necessary to easily build SPA, SFC, State Management and Routing.
```
cd public/your_project_name
npm install
```

This successfully completes the project creation. We will spend more time in the next chapter explaining the structure and how to create a Single Application Page and Single File Components.

Running the Vue project

In Development

If you want to run your project in development, Caligrafy Vue provides you with a way to quickly serve your project in real-time by running the following command from your project root:

npm run dev

#OR

npm run serve

#OR

npm run host # exposes the public ip for direct access

Upon successful compilation, a URL is provided for you to use. That URL indexes your project directly. Any changes that you make on the source files will be reflected immediately upon saving the files.

In Production

For a Caligrafy Vue project to work properly, you need to host it on an environment that supports Apache/MySql/PHP running on Linux or Windows.

Running in an environment without `Node.js`

If your production environment does not have the ability to have Node.js installed, then you will need to run the production build on your development environment.

npm run build

Upon running the build, a dist folder is created in the project folder. You will need to make sure that this folder is transferred to your production server. In fact, it is the only content that is in your project folder that needs to be transferred along with the rest of the Caligrafy structure.

Running in an environment that has `Node.js`

If your production environment has Node.js and NPM installed, then the project can be compiled on the production environment.

npm install --production
npm run build

Upon running the build, a dist folder is created in the project folder.

Running your project in production

Your host name or site ip should reference the dist folder directly. This is usually done by creating virtual hosts on your Apache Server.

Depending what provider you use for hosting your Apache server (ex: Digital Ocean), creating virtual hosts can vary.

If you have set up a LAMP/MAMP environment for Caligrafy on your local machine, you could mimic a production environment by creating a virtual host that points to the dist folder.

Learn more about Virtual Hosts

Next Section: Routing for Single Page Applications