9.8.1 Setting up the Vue application

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 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.

Recommended packages

Caligrafy comes prepackaged with all the Vue dependencies needed to get you started quickly. However, in order to make sure that the Vue build runs successfully, we recommend that you have Vue CLI installed in your environment.

Vue CLI provides you with a way to build Single Page Application (SPA) in the most efficient way.

Learn more about Vue CLI

In order to download Vue CLI, run the following command in your terminal:

sudo npm install -g @vue/cli

If you encounter permission issues upon installation, you need to make sure to change ownership of the global node modules by running the following command:

sudo chown -R $USER /usr/local/lib/node_modules

Creating a Caligrafy Vue project

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

1. 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:

   composer install
   php caligrafer.php initialize

   Learn more about installing Caligrafy

2. 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

3. 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 serve

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