Vue: Invalid host header

[Obiwan_Pelosi]

Hello, I’m trying to run a vue app on glitch. I imported the files from github and ran npm run serve on the terminal but when i preview, i get an error ‘invalid host header’ .

[khalby786]

Hi @Obiwan_Pelosi,

You need to create a file called vue.config.js at the root of your Vue app and paste the following:

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

Now when you run npm run serve it should work!

Hope this helps!

[EmmyMay]

Hi. How can I use vue js on glitch?

[aboutdavid]

@khalby786 has been summoned

[khalby786]

Welcome to the forum @EmmyMay!

So there’s 2 main ways you can use Vue.js on Glitch, and I’ll explain the pros and cons of each of them.

1. Directly include the <script> tag into your HTML code

This is the easiest and simplest method. You can either download the VueJS scripts (production version and the development version) or you can just include the CDN links, which is what I’d recommend.

<!-- development version, it comes with useful devtools to debug your code -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<!-- production version, the faster version but no code debugging -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Then in a linked JS file or just another <script> tag, you can run Vue code.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

See ~simple-vue for a full example.

2. Use the CLI (which includes .vue) files

Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See the Vue CLI docs for more details.

Basically you can have single-file components, install npm packages which you can use within your Vue app and building your files to simple HTML, CSS and JS using Webpack. The way to use this on Glitch:

1. Open the Glitch terminal, which you can do by click Tools (found it the bottom left corner of the editor) > Terminal

   

2. Install the Vue CLI (Wait for the terminal to load and type the following)

   npm i -g @vue/cli
   # or npm i @vue/cli if it throws errors during installation
   

3. Create a new Vue app

   vue create .
   

   The CLI will ask you some questions which you need to answer.

4. Wait for the file to generate, once it’s done, type refresh into the terminal. Now your files should be showing up in the filetree!

5. In your package.json, add a start script in the scripts section:

   "start": "npm run serve"
   

   The whole scripts section in your package.json should look something like this:

     "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint",
       "start": "npm run serve"
     },
   

Now open your Glitch project in a new window.

You’ll notice that we’re running the Vue development server which is good but not good enough for production. To build your files for production, you can run npm run build in the terminal. You will get a folder called dist, which you need to serve for it to work. To do that, you can use serve. Install serve in the terminal via npm run -g serve and then you can add another script in your package.json:

"build:serve": "serve -s dist"

And that basically should be it. But notice that you have to run a lot of commands in the terminal each time you want to switch between production and development, which is why it’s a good idea to set up a workflow that will make it easier.

Hope this helps!