Statamic is not defined in cp.js (When trying to use Vue component in antlers)

[btsutskiridze]

When importing cp.js in layout.antlers.html and I am getting this error in cp.js file

cp.js:17841 Uncaught ReferenceError: Statamic is not defined
    at cp.js:17841:1
    at cp.js:17844:3
    at cp.js:17846:12

ExampleFieldtype.vue:

<template>
    <div class="example-fieldtype-container">heyyy</div>
</template>

<script>
// Learn more at https://statamic.dev/extending/fieldtypes/
export default {
    data() {
        return {};
    },
};
</script>

imports in layout.antlers.html:

....
        <script src="{{ mix src='/js/site.js' }}"></script>
        <script src="{{ mix src='/js/cp.js' }}"></script>
....

cp.js:

import ExampleFieldtype from "./components/fieldtypes/ExampleFieldtype.vue";

Statamic.booting(() => {
    Statamic.$components.register("example-fieldtype", ExampleFieldtype);
});

webpack.mix.js:

...
mix.js("resources/js/site.js", "public/js")
    .js("resources/js/cp.js", "public/js")
    .vue();
...

Can you guys help me find out what the problem is there?

[jasonvarga]

You're trying to use the control panel javascript on the frontend of your site?

[btsutskiridze]

Sorry I am a newbie there and I don't really understand the question.
But I am building site using antlers.html and my main purpose is to render vue.js component in antlers file.
or if you mean cp.js I guess yeah was trying to use that file for frontend as there was example of using vue commented and I was trying to find out how it was working

[btsutskiridze]

Fixed

Well I don't know why the code above is not working (I still appreciate the answer though) but I think it is for other purposes rather than mine.

So my solution is that I just used traditional way of using vue.js and it works just fine

site.js

import { createApp } from "vue";
// import the root component App from a single-file component.
import ExampleFieltype from "./components/fieldtypes/ExampleFieldtype.vue";

const app = createApp();

app.component("example-fieldtype", ExampleFieltype);

app.mount("#app");