-
-
Notifications
You must be signed in to change notification settings - Fork 2
9.7.1 Understanding the structure
The inclusion of a framework into another makes it necessary to clarify the code structure. If you want to use the Vue module that is included with Caligrafy, it is important to grasp what to code and where to place your code.
The application folder in Caligrafy is the primary folder for server-side logic. Any client-side logic or logic that is compiled and interpreted by the browser must live elsewhere (more on this later).
The core of MVC architecture is inside the application folder. It is in that folder that Models, Views, Controllers and Routes are created.
The public folder in Caligrafy is the primary folder for client-side logic. That is, any html, javascript, CSS for example and any resources (such as images, fonts or other resources) that can be rendered and compiled by the browser should be located in this folder.
Since Vue uses Javascript and Markup (HTML) as the underlying languages then the Vue app that you create must always live in the public folder.
The app folder is an example of a client-side application. It provides the very basic required structure that a client-side application needs to integrate Vue seamlessly. Every app that you create needs to have a scripts subfolder - at the very least - that contains all the javascript modules or components that you need. These scripts will be loaded from the app index file. You can create and structure your client-side app folder at will provided it always contains a scripts subfolder and the app index file.
For all Vue apps the markup files that are usually created as .html files must be created as a .php file.
The reasons behind this decision is 1) to give you more flexibility to access some of the powerful features that are built natively with Caligrafy if you are a PHP developer and 2) to make it easier for Vue developers who may not be familiar with PHP to continue coding with Vue the way they are used to.
Caligrafy does all the handshaking for you and in order for Caligrafy to be able to do this, the markup files created for Vue need to have a .php instead of a .html extension.
Caligrafy takes care of all the handshaking needed between server-side and client-side. In order for the handshake to take place there are 2 steps needed in every Vue app that you create:
In the markup of your Vue app (traditionally .html), the following script needs to be included at the end of the <body> and before any additional script that you want to add to your markup.
<!-- Initialization scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="<?php echo APP_SERVICE_ROOT.'app.js'; ?>"></script>
<script>loadEnvironment(`<?php echo $env; ?>`);</script>
<script>
/* Loading the app client framework
* Any environment variables to be passed on from the server can take place in this here
*/
loadVue({
scripts: ['<javascript file names of your vue script>'],
// this is an array so you can add as many as needed
});
</script>In the .js file or in the script that you include to your markup to instantiate your Vue app, you need to add an env variable to the data object in the app instance:
var app = new Vue({
el: '#app',
data () {
return {
env: env
}
}
// etc...Caligrafy comes prepackaged with an example markup
public/app/index.phpand aVuescriptpublic/app/scripts/main.jsto illustrate how the handshake happens.
You are probably wondering at this stage how the routing happens and how the browser knows how to redirect the requests to the Vue apps that you create. The answer is in the next section.