Workflow for Vue 3 deploy to Pages?

[ruud00000]

Select Topic Area

Question

Body

I'm looking for a way to deploy a Vue 3 site to Github pages using GitHub Actions.

I tried instructions on cli.vuejs.org but neither of the methods there described seem to work.

package.json:

    "name": "kegeleninwinterswijk",
    "version": "0.0.2",
    "dependencies": {
        "@vue/cli-service": "^5.0.8",
        "@vue/compiler-sfc": "^3.3.2",
        "core-js": "^3.30.2",
        "vue": "^3.3.2"
    },
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    }
}

vue.config.js:

// https://cli.vuejs.org/guide/deployment.html#github-pages:
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/wkb_testvuepages/'
    : '/'
}

.travis.yml:

language: node_js
node_js:
 - "node"

cache: npm

script: npm run build

deploy:
 provider: pages
 skip_cleanup: true
 github_token: $GITHUB_TOKEN
 local_dir: dist
 on:
   branch: main

Also can't find an example workflow file for Github Actions for Vue.

What should a workflow file for Vue for building and deploying a Vue 3 site to GitHub Pages with GitHub Actions look like?

[airtower-luna]

Does your build produce a static website? If yes, look at the starter workflows for Pages. There isn't one for Vue specifically, but there are some that use other Node-based page generators. You'd just need to change the build part.

If you need Node running on the server (in deployment, not CI) you'll indeed need to find somewhere else to host it.