Vlox it's an extra (aka plugin) designed to work with the CMS ModX to integrate VueJS and let you easily create digital experiences in a simple and straightforward way.
By integrating a powerful development framework focused on content management, and Vue, you'll get most of the complex functionalities, like security management, webservices, out of the box, while being free to build any kind of user interface interactions that you can imagine.
You'll need a Modx installation, if you want, you can dive into the ModX documentation, or just use the docker configuration that we have to launch a fully working infrastructure.
Here you can find details on how to set up a docker configuration on W10 using WSL2
- Run the following command
git clone git@github.com:Trotalo/modxBaseEnviroment.git yourProjectName
DON'T forget to update theyourProjectName
value - Edit the
docker-compose.yml
file and set theYOUR_IP
to your local ip address - Enter yourProjectName folder, and execute the command
docker-compose up
- Go for a coffee, depending on your connection this can take some time, as mysql and apache services are being downloaded and configured
- Once you see
AH00094: Command line: 'apache2 -D FOREGROUND'
in the console, the service will be up and running. - Open
https://YOUR_IP
on your browser, and you should see the ModX welcome page - Click the Go to the manager big green button
- Enter the manager using admin/admin as credentials
At this point you can install vlox in 2 possible ways, first you can just install the extra and start developing your site, or you can configure the project to develop new features or view the vlox code.
###Installing the extra to build my site
- Download the package file
- Enter the ModX manager using the browser and open https://YOUR_IP/manager
- In the top menu, Go to
extras -> installer
this will take you to the Package Management page - Press the arrow next to the Download Extras button, this will open a small menu
- From the menu select the option that reads Upload a package
- Click the choose file button, and use the file browser to locate the
vlox-0.0.1-pl.transport.zip
file that you downloaded on the first step - Once the file is loaded into the window, press Upload then Close
- Now you'll see
vlox
in the list, and a Not Installed message next to it - Click the Install button below the text
vlox
- Press continue to install the package.
- Refresh the page
- Check the new Monster option of the top menu
- Now you are all set to start working
###Install the project to work on vlox
- We need to install the amazing GPM to be able to easily build a ModX extra
- Download the package file
- In the top menu, Go to
extras -> installer
this will take you to the Package Management page - Press the arrow next to the Download Extras button, this will open a small menu
- From the menu select the option that reads Upload a package
- Click the choose file button, and use the file browser to locate the
gitpackagemanagement-0.14.0-alpha9.transport.zip
file that you downloaded on the second step - Once the file is loaded into the window, press Upload then Close
- Now you'll see
gitpackagemanagement
in the list, and a Not Installed message next to it - Click the Install button below the text
gitpackagemanagement
- Press Setup Options to continue
- On the pop-up window type
/var/www/html
in the Packages directory field - Press Install Package
- Open a terminal and go to
yourProjectName
folder - Go to the
www/html
folder - Run the following commands to fix folders permissions for development
sudo chown -R www-data:www-data ../*
sudo chmod -R 0777 * ../*
- Clone the vlox repository by running
git clone git@github.com:modxMonster/vlox.git
- Now we need to install the PHP dependencies, for this you need to retrieve the name of the docker container, for
run
docker ps
- You should see an entry similar to
yourprojectname_web_1
with the name you assigned, copy that entry - Update the yourprojectname value and run the following command, this will run composer inside the container
and install the dependencies
docker exec -ti yourprojectname_web_1 sh -c "cd /var/www/html/vlox/core/components/vlox/controllers && composer install"
- Refresh the page
- Now we need to install the vlox extra, using GPM, go to
Extras -> Git Package Management
- Click the Add package button
- In the popup window type
vlox
inside the Folder text input and press the save option - If you experience any permission errors, run step 15 again.
- Refresh the page
- Check the new Monster option of the top menu
- Now you are all set to start working
###Soo, now what? Once we got our extra installed, up and running, lets create our first block!
- Go to the
Monster -> Kraken
- Press RELEASE THE KRAKEN button
- Press CREATE A NEW BLOCK button
- In the popup window, type
myNewComponent
as the Block name, and you can leave the description empty - We are going to use some bootstrap vue elements to create a responsive header, paste the following code in the HTML section of the page you are on.
<template>
<b-navbar id="headerTrotalo" toggleable="lg" fixed="top" class="wider-block-width">
<b-navbar-brand href="#">
<b-img src="https://png.pngtree.com/png-vector/20210110/ourmid/pngtree-hello-world-svg-design-png-image_2719857.jpg"
class="d-inline-block align-top" alt="yourLogo" fixed="top"></b-img>
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item href="#">Option 1</b-nav-item>
<b-nav-item href="#">Option 2</b-nav-item>
<b-nav-item href="#">Option 3</b-nav-item>
<b-nav-item href="#">Option 4</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
<script>
module.exports = {
name: "[[+componentName]]",
data() {
return {
vloxBlock: [[+blockContent]]
};
},
};
</script>
<style scope>
#headerTrotalo {
background-color: #1C1C1C;
color: white;
border-radius: 0px 0px 10px 10px;
img {
max-height: 50px;
}
.nav-link{
color: white;
}
}
</style>
- Press SAVE&PUBLISH
- Go to the Resources section on the left-hand panel
- Click the plus sign next to the Website text, this will open up the New Document window In ModX, resources equals pages in your website, name your new page
- Select the KrakenTemplate option from the Uses Template drop down
- Click yes on the warning popup
- Click Save on the upper right section of the page
- Click the KrakenBlocks option next to Resource Groups
- Click the ADD BLOCK button
- Select the component that we created
- You see the component inserted on the preview window
- Right-click on the resource you created on step 8
- Click the View option
- A new browser tab will open and show you the final view of the page