Garry's Mod Vue.js Example

App.vue

<template>
  <div id="app">
    <Vitals ref="vitals" id="vitals"></Vitals>
  </div>
</template>

<script>
import Vitals from './components/Vitals.vue';
export default {
  name: 'app',
  components: {
    Vitals
  }
};
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  background-color: transparent;
  background-size: cover;
  color: black;
  font-family: Roboto;
}
</style>

main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

window.State = store'

Vitals.vue

<template>
    <div class="vitals">
        <div class="health">
            <i class="material-icons md-32">add_box</i>
            <animated-number :value="health" :formatValue="toFixed" :duration="300"/>
        </div>

        <div class="armor" :class="{ none: armor <= 0}">
            <i class="material-icons md-32">security</i>
            <animated-number :value="armor" :formatValue="toFixed" :duration="300"/>
        </div>

        <div class="test">
            <input v-model="test" placeholder="Edit Me" @click="callLua">
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import AnimatedNumber from 'animated-number-vue';
export default {
    name: 'Vitals',
    components: {
        AnimatedNumber
    },
    data: function() {
        return {
            test: '',
        };
    },
    computed: mapState(['health', 'armor']),
    methods: {
        /**
         * Convert a number to a string of fixed digits.
         * @param {number} value
         */
        toFixed(value) {
            return value.toFixed(0);
        },
        callLua() {
            console.log('Player clicked button');
        }
    }
}
</script>

<style lang="scss" scoped>
    @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
    .material-icons.md-32 {
        font-size: 32px;
    }

    .vitals {
        position: absolute;
        left: 16px;
        bottom: 16px;
        display: flex;
        color: #40e038;
        text-shadow: black 1px 1px 7px;

        div {
            line-height: 1;
            font-size: 32px;
            padding: 8px 16px;
            display: flex;

            &.none {
                opacity: 0.2;
            }

            i {
                padding-right: 10px;
            }
        }
    }
</style>

vue.lua

vue = vue or {
	Instances = {}
}

--- Register a new Vue.js HUD window.
-- @param name Name for the new instance
-- @param url The URL of the hosted page to load
-- @param options Extra options for configuring the instance
function vue:Instance(name, url, options)
	options = options or {}

	local INSTANCE = {
		HTML = nil,
		Initialized = false,
		State = {},
		Callbacks = {}
	}

	function INSTANCE:RegisterState(data)
		for key, callback in pairs(data) do
			self.State[key] = nil
			self.Callbacks[key] = callback
		end
	end

	local html = vgui.Create("DHTML")
	html:SetSize(ScrW(), ScrH())
	html:Dock(FILL)
	html:OpenURL(url)
	html:SetAllowLua(true)
	html:SetKeyboardInputEnabled(true)

	local PaintOld = html.Paint

	function html:Paint(w, h)
		if cvars.Number("cl_drawhud", 0) == 0 then
			return true
		end

		PaintOld(self, w, h)
	end

	INSTANCE.HTML = html

	if options.state then
		INSTANCE:RegisterState(options.state)
	end

	INSTANCE.Initialized = true

	table.insert(vue.Instances, INSTANCE)

	return INSTANCE
end

--- Update Vue.js global state through Lua
function vue:Sync()
	for _, instance in pairs(self.Instances) do
		if not instance.Initialized then continue end

		for key, callback in pairs(instance.Callbacks) do
			instance.State[key] = callback()
		end

		for key, value in pairs(instance.State) do
			instance.HTML:QueueJavascript("if (typeof State !== 'undefined') { " .. "State." .. key .. " = " .. value .. "; }")
		end
	end
end

hook.Add("Think", "vue.Think", function()
	vue:Sync()
end)

local DISABLED = { ["CHudHealth"] = true, ["CHudBattery"] = true, ["CHudAmmo"] = true, ["CHudSecondaryAmmo"] = true }

hook.Add("HUDShouldDraw", "vue.HUDShouldDraw", function(name)
	if DISABLED[name] then
		return false
	end
end)

hook.Add("Initialize", "vue.Initialize", function()
	-- COMMENT OUT THIS SECTION IF YOU'RE USING DARKRP
	local FKeyBinds = {
		["gm_showhelp"] = "ShowHelp",
		["gm_showteam"] = "ShowTeam",
		["gm_showspare1"] = "ShowSpare1",
		["gm_showspare2"] = "ShowSpare2"
	}

	local OldPlayerBindPress = GAMEMODE.PlayerBindPress

	function GAMEMODE:PlayerBindPress(ply, bind, pressed)
		OldPlayerBindPress(self, ply, bind, pressed)

		local bnd = string.match(string.lower(bind), "gm_[a-z]+[12]?")
		if bnd and FKeyBinds[bnd] then
			hook.Call(FKeyBinds[bnd], GAMEMODE)
		end
	end

	local GUIToggled = false
	local mouseX, mouseY = ScrW() / 2, ScrH() / 2
	function GAMEMODE:ShowSpare1()
		GUIToggled = not GUIToggled

		if GUIToggled then
			gui.SetMousePos(mouseX, mouseY)
		else
			mouseX, mouseY = gui.MousePos()
		end
		gui.EnableScreenClicker(GUIToggled)
	end

	-- END POTENTIAL COMMENTED OUT SECTION

	vue:Instance("HUD", "http://localhost:8080/#/", {
		state = {
			health = function()
				return LocalPlayer():Health()
			end,
			armor = function()
				return LocalPlayer():Armor()
			end
		}
	})
end)