Suggestion: Add npm run reset for a Clean Slate in Vue Projects

[otabekoff]

Hi Vue Team,

I'm not sure if this is the right place for feature suggestions, so apologies if it's not—please point me in the right direction if so.

I wanted to suggest the implementation of an npm run reset command or similar functionality that would remove or replace all the default code in a newly generated Vue project with simple, minimal components for a fresh start.

Currently, every new project begins with prebuilt or default components that we often have to delete or modify before we can start working on our actual project. This process can be a bit time-consuming. It would be great to have a solution that streamlines this process, allowing us to quickly get started with a clean slate.

What are your thoughts on this?

[otabekoff]

It might be done with some reset.js stuff like this?

const fs = require('fs');
const path = require('path');

// Define paths
const srcPath = path.join(__dirname, 'src');
const exampleAppPath = path.join(srcPath, 'example-app');

// Ensure example-app directory exists
if (!fs.existsSync(exampleAppPath)){
    fs.mkdirSync(exampleAppPath);
}

// Move default files and directories
const itemsToMove = ['views', 'components', 'assets', 'router', 'App.vue'];

itemsToMove.forEach(item => {
    const itemPath = path.join(srcPath, item);
    const newItemPath = path.join(exampleAppPath, item);
    
    if (fs.existsSync(itemPath)) {
        fs.renameSync(itemPath, newItemPath);
    }
});

// Create minimal App.vue
const minimalAppVue = `
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
</style>
`;

fs.writeFileSync(path.join(srcPath, 'App.vue'), minimalAppVue);

// Create minimal router configuration
const minimalRouterIndexJs = `
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: {
      template: '<h1>Hello, world!</h1>'
    }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
`;

const routerDir = path.join(srcPath, 'router');
if (!fs.existsSync(routerDir)){
    fs.mkdirSync(routerDir);
}

fs.writeFileSync(path.join(routerDir, 'index.js'), minimalRouterIndexJs);

// Create minimal main.js
const minimalMainJs = `
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');
`;

fs.writeFileSync(path.join(srcPath, 'main.js'), minimalMainJs);

console.log('Vue project reset to minimal starting code with routing.');

[tobiasdalhof]

Vue's default setup is intended to help new users, and experienced developers can easily create their own starter templates to avoid repetitive cleanup. This approach is more flexible and customizable. What do others think?