Cef Template - is a Vue application template that has everything you need to create your CEF.
Can be used in SAMP. GTA V version is available at gta5 branch.
yarn install
or npm install
Now, you are ready to write the code.yarn build
or npm run build
yarn dev
or npm run build
dist/index.html
components
fieldinterfaces
// App.vue
<script lang="ts">
import { ref } from 'vue';
import CompositionAPIExample from '@/interfaces/CompositionAPIExample.vue';
export default {
components: { CompositionAPIExample },
setup() {
const interfaces = ref({
CompositionAPIExample: { display: false, }
});
return { interfaces };
},
};
</script>
To control the interface, we have 5 functions added to the window object.
window.getInterface = function(name: string) // Returns an interface object
window.interfaceStatus = function(name: string) // Returns the state of the interface (open/closed)
window.openInterface = function(name: string, args: string) // Opens the interface
window.hideInterface = function(name: string) // Closes the interface
window.interface = function(name: string) // Returns an interface
I will describe only complex control functions, getInterface
, interfaceStatus
and hideInterface
are self-explanatory.
Opens an interface, has an additional args argument.
args
is a JSON string that contains the so-called openParams
.
Let's say your interface has a name
field that you want to specify when you open the interface. You can, of course, just specify a value in the data
field, but suppose you want to specify it when opening the interface, then the code will look like this:
window.openInterface('InterfaceName', '[{"name": "test"}]');
The function will parse the arguments and apply them by key to the fields in data.
Will return an object for which you can directly change the fields, if we consider the previous example, then we could change the name
field like this:
window.interface('InterfaceName').name = 'Test';
As a result, the interface will be re-rendered and its name
field will change.
To use the functions of the window object, we changed the cef.inc
include. We have added our cef_browser_execute
function.
Example code using the function
cef_browser_execute(playerid, "window.openInterface('Test')");
Download our include in the latest release, replace the default one with it, and you can use the functions in the way above.
(Also, you can use default cef.on
etc.)
In vue3, when using the Composition API
, be sure to expose any fields you want to access from outside in defineExpose
. Below I have left examples of the interface using Options
and Composition API
.
Author: Hold404