How to build with Vue

Static application

Vue.js is a user-friendly, versatile, and approachable JavaScript framework for building web applications and user interfaces. Its progressive nature, reactivity system, component-based architecture, and thriving community make it a popular choice for both beginners and experienced developers in the world of front-end web development.

Learn more about Vue.


Before getting started, you must have:


Initializing an Vue project on the edge

Section titled Initializing an Vue project on the edge
  1. Initialize the project:
Terminal window
azion init
  1. Accept the suggested name to your project, or enter the name you choose:
Terminal window
(Hit enter to accept the suggested name in parentheses) Your project's name: (dynamic_caligari)

Output:

Terminal window
Getting templates available
  1. Choose the Vue template:
Terminal window
Getting templates available? Choose a template for your project: (Use arrow keys)
Angular
Astro
Hexo
Next
React
> Vue
Vite
  1. With the template fetched and configured, you can now start a local development server.
Terminal window
Do you want to start a local development server? (y/N)

The following steps are based on the answer you gave.

  1. Install the project dependencies. Input y when the interaction prompts:
Terminal window
Do you want to install project dependencies? This may be required to start local development server (y/N)

Wait until the installation is complete.

Output:

Terminal window
Your Edge Application was built successfully
[Vulcan] [Server] › ✔ success Function running on port http://localhost:3000/
  1. On the browser, go to http://localhost:3000/ and you can now see your Vue project running.

When your project is running locally, you’re still able to deploy it to the edge. To do so:

  1. Stop the terminal execution with control + c.
  2. Access the project folder:
Terminal window
cd [your-project-name]
  1. Deploy the project:
Terminal window
azion deploy
  1. Wait while the project is built and deployed to the Azion Edge Platform.

After the deployment is complete, you’ll receive a domain to access your Vue project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to https://xxxxxxx.map.azionedge.net.

Now, after indicating you don’t want to have a local server running, deploy your Vue project to the edge.

  1. Enter y to the following interaction, indicating you want to deploy the project:
Terminal window
Do you want to deploy your project? (y/N)
  1. Install the project dependencies. Input y when the interaction prompts:
Terminal window
Do you want to install project dependencies? This may be required to deploy your project (y/N)
  1. Wait while the project is built and deployed to the Azion Edge Platform.

After the deployment is complete, you’ll receive a domain to access your Vue project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to https://xxxxxxx.map.azionedge.net.


Contributors