How to Initialize a Vue.js Project with 'vue init' (with examples)

The ‘vue init’ command in Vue.js is a legacy tool previously used for initializing new projects with predefined or custom templates. This command laid the foundation for creating Vue.js projects with set configurations, allowing developers to speed up their development process by quickly scaffolding a new application. Even though it’s considered legacy with the advent of Vue CLI 3 and above, it serves as a starting point for those who need to work with older Vue versions or specific templates that have not been migrated to the new Vue CLI ecosystem.

Use case 1: Create a New Project Using One of the Default Templates

Code:

vue init webpack project_name

Motivation:
When beginning a new Vue.js project, a developer might want a robust and highly configurable setup that includes features such as hot-reloading, CSS extraction, and linting. The webpack template offers this advanced configuration right out of the box. Alternatively, if the developer requires a simpler setup with minimal features, the webpack-simple template is ideal. By using the default templates, developers can save time and effort in setting up their build tools and structures.

Explanation:

• vue init: This command initiates the process of selecting and applying a template for your Vue.js project.
• webpack: The argument specifies that you want to use the default Webpack template, which is suitable for more complex applications that require detailed build configurations.
• project_name: This is the placeholder for your new project’s directory name. It denotes where all the project files will be initialized and reside.

Example output:
Upon running this command, you might see console prompts guiding you through additional project configurations, such as selecting ESLint preferences, specifying the location for your application, and installing essential dependencies.

? Project name my-vue-app
? Project description A Vue.js project
? Author John Doe
? Vue build runtime + compiler: recommended for most users
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
... (other configurations)

After completing the prompts, the process continues with generating your project files.

Use case 2: Create a New Project Using a Local Template

Code:

vue init /path/to/template_directory project_name

Motivation:
Suppose you have previously created a custom Vue project template that includes specific configurations and components used frequently across multiple projects. Instead of repeating the setup process every time, using a local template allows you to quickly kickstart the development of a new project while maintaining consistency in project structure and settings.

Explanation:

• vue init: The command for initializing a project with a specified template.
• /path/to/template_directory: This argument specifies the path to the local directory containing your custom project template. It allows you to leverage local resources rather than relying exclusively on defaults or online repositories.
• project_name: As before, this specifies the target directory where the new project will be initialized.

Example output:
Executing this command utilizes your local template files to create a new project with the designated settings.

? Project name custom-vue-app
? ... (other prompts or additional configurations specific to your local template)

This output exemplifies that the configuration follows any prompts or setups predefined in your local template.

Use case 3: Create a New Project Using a Template from GitHub

Code:

vue init username/repo project_name

Motivation:
Organizations or individual developers often share Vue.js templates on GitHub to promote reuse of best practices or to establish a common starting ground for projects. If an interesting template resides in a GitHub repository, you can quickly fork from it, ensuring alignment with the desired criteria and quality standards set by the template author.

Explanation:

• vue init: The Vue CLI subcommand for project initialization.
• username/repo: This GitHub identifier specifies the username and repository name where the template resides. It indicates to the command line the location from which to pull project configurations.
• project_name: This identifies the directory name for your new Vue.js project.

Example output:
The command accesses the GitHub repository, fetching the template content, and initializes your project accordingly.

? Project name github-vue-project
? ... (further configuration based on the template repository's specifics)

Here, you see how adaptable the initialization command is, pulling in specific configurations stored in version-controlled repositories.

Conclusion:

Despite being a legacy subcommand, vue init provides developers multiple mechanisms to start crafting Vue.js applications using different templates. By leveraging default configurations, local templates, and GitHub repositories, developers can shape projects swiftly, addressing specific needs and fostering faster development cycles. As the Vue.js ecosystem evolves, understanding such legacy tools ensures backward compatibility and a comprehensive understanding of project initialization strategies.