vue-serve

Serve a .js or .vue file in development mode with zero config

$ vue serve [filename]

vue-serve <entry-file-or-directory> [options]

--port <port>, -p <port>
    Specify the port on which the development server will run (default: 8080).

--host <host>
    Specify the host on which the development server will listen (default: 0.0.0.0).

--open, -o
    Automatically open the application in the browser upon server start.

--copy, -c
    Copy the server URL to the clipboard upon server start.

--mode <mode>, -m <mode>
    Specify the environment mode (e.g., 'development', 'production') for the build (default: development).

--https
    Enable HTTPS for the development server.

--public <url>
    Specify the public network URL for the HMR (Hot Module Replacement) client to connect to.

--css-preprocessor <type>
    Specify the CSS preprocessor to use (e.g., 'sass', 'less', 'stylus', 'postcss').

--name <name>
    Specify a custom project name for the build output when serving a directory.

--entry <file>
    Explicitly specify the entry file when serving a directory; defaults to 'src/main.js' or 'index.vue'.

--inline-vue
    Use the inline Vue production build for components. Useful when building a library.

vue-serve is a command-line utility provided by the Vue CLI (Command Line Interface) that allows developers to quickly serve and preview single Vue components or a directory containing Vue components without the need for a full-fledged Vue project setup. It provides a lightweight development server, enabling features like hot-module replacement (HMR) for instant feedback during development. This command simplifies the process of testing UI components in isolation, demonstrating small prototypes, or rapidly iterating on new features. It's particularly useful for component library development, educational purposes, or any scenario where a complete vue create scaffold feels like overkill, offering a streamlined path to bring your Vue components to life in a browser.

vue-serve is intended primarily for rapid prototyping and local development. It is not suitable for generating production-ready builds or deploying applications. For production, the vue-cli-service build command or a similar webpack-based build process should be used. It also assumes a relatively simple component structure and may not fully support complex project configurations or custom webpack setups without further configuration.

When using vue-serve without specifying a particular file, it will attempt to locate a default entry point like src/App.vue, src/main.js, or index.vue within the specified directory.

vue-serve includes built-in HMR, which automatically reloads and injects updated modules into the running application without a full page refresh, significantly speeding up development feedback loops.

The vue-serve command was introduced as part of the Vue CLI 3.x release, which marked a significant architectural shift towards a more plugin-based system. Its purpose was to provide a quick and convenient way to test individual Vue components or small component collections, addressing a need for faster prototyping without the overhead of creating a full project boilerplate. While the vue create command remains the primary method for new projects, vue-serve offered a streamlined alternative for specific development scenarios.

vue create: Scaffold a new Vue project., vue build: Build a Vue application for production., vue inspect: Inspect the webpack configuration., vue ui: Launch a graphical user interface for managing Vue projects., npm run serve: A common command used in standard Vue CLI projects to start the development server, typically wrapping vue-cli-service serve., webpack-dev-server: The underlying server technology often used by Vue CLI for development servers.