Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
      • Start with AI
    • Framework Guide
      • Frontends
        • Vite
        • React
        • Vue
        • Other Frameworks
      • Backends
      • Full-stack
        • Next.js
        • Nuxt
        • Astro
        • React Router
        • SvelteKit
      • Custom 404 Page
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Using Github Actions
      • Using CNB Plugin
      • Using IDE PlugIn
      • Using CodeBuddy IDE
    • Domain Management
      • Overview
      • Custom Domain
      • HTTPS Configuration
        • Overview
        • Apply for Free Certificate
        • Using Managed SSL Certificate
      • Configure DNS CNAME Record
    • Observability
      • Overview
      • Metric Analysis
      • Log Analysis
    • Pages Functions
      • Overview
      • Edge Functions
      • Cloud Functions
        • Overview
        • Node Functions
      • Middleware
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • AI
        • Dialogue Large Models Integration
        • Large Models for Images Integration
      • Database
        • Supabase Integration
        • Pages KV Integration
      • Ecommerce
        • Shopify Integration
        • WooCommerce Integration
      • Payment
        • Stripe Integration
        • Integrating Paddle
      • CMS
        • WordPress Integration
        • Contentful Integration
        • Sanity Integration
        • Payload Integration
      • Authentication
        • Supabase Integration
        • Clerk Integration
    • Best Practices
      • Using General Large Model to Quickly Build AI Application
      • Use the DeepSeek model to quickly build a conversational AI site
      • Building an Ecommerce Platform with Shopify
      • Building a SaaS Site Using Supabase and Stripe
      • Building a Company Brand Site Quickly
      • How to Quickly Build a Blog Site
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • Troubleshooting
    • FAQs
    • Contact Us
    • Release Notes
Docs Overview/
Edge Developer Platform/
Pages/
Framework Guide/
Frontends/
Vue/

Vue

Vue.js is a progressive JavaScript framework for building user interfaces. It uses declarative rendering and a component-based development model, achieving efficient updates through responsive data binding and virtual DOM technology. The Vue core library focuses on the view layer with easy integration. Its design balances flexibility and engineering, supporting both Options API and Composition API coding styles, suitable for diverse scenarios from lightweight interaction to large single-page applications.

If you want to quickly try Vue, here are some templates based on Vue deployment:
Vue.js Boilerplate
Vitepress Template
Vite Vue3

You can also use npm create vue@latest my-vue-app to build a Vue project. The projects created will use build settings based on Vite. The following content will introduce how to use the command to build a project and deploy to EdgeOne Pages.

Creating a Vue Application

We use Vite, the official recommendation of Vue. Once created, the project starts up and updates fast with simple and intuitive configuration.
1. Ensure ^20.19.0 || >=22.12.0 version of Node.js is installed.
2. Run in the terminal:
npm create vue@latest my-vue-app
3. Select the required feature based on interactive prompts.

4. Enter the project and start up.
cd my-vue-app
npm install
npm run dev


Deploying a Project

Deploying with Git

You can submit the project to platforms such as GitHub and GitLab, and use our Git deployment.

Deploying with CLI

You can also install the Pages scaffolding tool. For detailed installation and usage, refer to EdgeOne CLI. Once configured, use the edgeone pages deploy command to deploy the project. During deployment, the CLI will first auto-build the project, then upload and publish the build artifacts.