1

This is a boilerplate for creating a loadingscreen with vue.js

  • This is not a real resource, more like an example on how to build a loadscreen with vue.js using the vue-cli.
  • The compiled version works, but is goddamn ugly as it just prints out all messages send to it. Which are a lot.
  • The only file that you should need to edit is the App.vue, and main.js in case you want to use an ui-library like vuetify because nobody needs to reinvent a wheel for progressbars. Maybe the assets directory for fonts
  • I added a quick example on how a properly completed project with a loadingscreen looks like.
  • For those unfamilar: You hit npm run build, given you have installed node.js, and it outputs the complete resource to the /dist/ folder. When you add (or remove) files, you will need to edit the public/__resource.lua file.

https://github.com/GHMatti/fivem-vue-loadingscreen-boilerplate

And of course here the example:

https://github.com/GHMatti/fivem-vue-loadingscreen-boilerplate/tree/example-vuetify

The result is a loading screen made in 10 minutes that looks like this:

image
image1920×1080 234 KB

8 Likes
2

cool

+1

1 Like
3

pretty simple and you get a unique look to it.