How to serve robots.txt for a Vue app

VueJS v3 build command copies anything in /public to your final dist/. So use the public/ folder for any additional files that you want in your final distribution.

If I am assuming correctly, you are building your app using the npm run build command from the webpack template creating a /dist folder which you deploy to Firebase. If that is the case you can just add a robots.txt file to that dist folder next to the index. That should work.

However, if better SEO is your aim, it can be better to prerender the page or use Server Side Rendering depending on the complexity of your application.

MEVN case

MEVN stands for MongoDB, Express, Vue.js and Node.js.

If you have Vue.js as the frontend, and Node.js as the backend and RESTful API server, you can have your robots.txt put in Vue.js /static/ folder. Here is the Vue.js project structure for your reference.

Then you can simply configure the Express routing the following way to serve the robots.txt file:

app.use('/robots.txt', express.static(path.join(__dirname, 'dist/static/robots.txt')));

(Note: The dist folder is newly generated every time you build your Vue.js project: npm run build. And this approach would free you from adding the robots.txt file to the dist folder every time after the build.)