# VueJS based, modular, Cockpit Frontend - COF

**URL:** <https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314>\
**Category:** Showcase\
**Created:** [March 31, 2022, 2:16pm UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314 "2022-03-31T14:16:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jamo](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/jamo/32/1117_2.png) [@Jamo](https://discourse.getcockpit.com/u/Jamo)\
**Post date:** [March 31, 2022, 2:16pm UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/1 "2022-03-31T14:16:02Z")

</div>

Heeey everyone.

Today I’m here to show you what I have coded in the last few months.  
Little disclaimer right from the start: I’m not a professional dev and I’m just coding in my free time.

 ![doku features](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/2X/4/439b3505740d43caf69851496ecf1e8bcd1d9c39.jpeg)

My VueJS based frontend is called COF (The name sucks. I know. It sounds like Cough 😂).  
It currently features 18 (hopefully) fully functional components which you can use in your frontend.

I’m not going to get into all the details about COF here, because you can read all of that over on GitLab.  
If you want some more details about COF feel free to read the [documentation](https://gitlab.com/jmbluethner/cockpit-frontend/-/blob/main/README.md).  
If you want to check it out in person, grab the [latest release](https://gitlab.com/jmbluethner/cockpit-frontend/-/archive/v0.22.7/cockpit-frontend-v0.22.7.zip).

Please read the documentation before attempting to use COF. It’s far from being perfect and it currently lacks important features such as mobile support.  
But nevertheless I think that this might be interesting for some of you.

I’d love to read your feedback in the comments.

Have a great day everyone!

---

<div class="post-metadata">

**Author:** ![aiamk](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/aiamk/32/923_2.png) [@aiamk](https://discourse.getcockpit.com/u/aiamk)\
**Post date:** [April 2, 2022, 1:25pm UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/2 "2022-04-02T13:25:36Z")

</div>

Great job bro, thank you for sharing your project,  
if its possible to share a demo url to test it.

Best Regards.

---

<div class="post-metadata">

**Author:** ![Jamo](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/jamo/32/1117_2.png) [@Jamo](https://discourse.getcockpit.com/u/Jamo)\
**Post date:** [April 4, 2022, 12:17pm UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/3 "2022-04-04T12:17:50Z")

</div>

Hey @aiamk

I’ll try to set up a demo URL soon, but I see some problems doing that.  
In order to present COF in a way that makes sense, I’d have to grant everyone access to the backend. Therefore I have to first configure permissions so that the backend doesn’t get nuked.

I’ll come back to you once there is a public demo.

Best regards 🤘

---

<div class="post-metadata">

**Author:** ![Sebastian](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@Sebastian](https://discourse.getcockpit.com/u/Sebastian)\
**Post date:** [April 6, 2022, 7:13am UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/4 "2022-04-06T07:13:18Z")

</div>

Hi @Jamo,  
I tried to copy from the “getting-started” folder on my cockpit installation but I can’t see anything.  
Is there something I’m missing?

---

<div class="post-metadata">

**Author:** ![Jamo](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/jamo/32/1117_2.png) [@Jamo](https://discourse.getcockpit.com/u/Jamo)\
**Post date:** [April 11, 2022, 7:55am UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/5 "2022-04-11T07:55:37Z")

</div>

Hi @Sebastian  
Thanks for checking out COF! 😊

First off - I’m sorry for not replying for so long. I’m really busy at the moment … Life things 🙄  
You should be abled to use your Cockpit CMS when you copy all the files from `/getting-started` to `/storage/data`. I’ll definetly have to take a look into that.  
Which version of COF did you get? If it isn’t the latest, which is 22.8 as of writing this, please try using the [latest version](https://gitlab.com/jmbluethner/cockpit-frontend/-/archive/v0.22.8/cockpit-frontend-v0.22.8.zip).

**Edit: Problem solved now in [Version 22.9](https://gitlab.com/jmbluethner/cockpit-frontend/-/archive/v0.22.9/cockpit-frontend-v0.22.9.zip)**

I have now fixed the problem you’ve mentioned regarding the `getting-started` data. Now you can use the import statement from cockpits CLI to import the basic structure. Unfortunately, this doesn’t include COF’s custom components. But as said - It at least gives you a solid starting point.  
I’ve updated the [readme](https://gitlab.com/jmbluethner/cockpit-frontend/-/blob/main/README.md) accordingly. You can find the new information at `Frontend Setup / Getting Started > Installation`

Let me know if that helped.

Best regards

---

<div class="post-metadata">

**Author:** ![Jamo](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/jamo/32/1117_2.png) [@Jamo](https://discourse.getcockpit.com/u/Jamo)\
**Post date:** [April 11, 2022, 11:07am UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/6 "2022-04-11T11:07:59Z")

</div>

I made a mistake in the initial post. The link to the latest release is fixed to an already surpassed version. Please make sure to [go here](https://gitlab.com/jmbluethner/cockpit-frontend/-/tags) for the latest version.

---

<div class="post-metadata">

**Author:** ![Sebastian](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@Sebastian](https://discourse.getcockpit.com/u/Sebastian)\
**Post date:** [April 12, 2022, 4:15pm UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/7 "2022-04-12T16:15:27Z")

</div>

Thanks @Jamo and congratulations on your work.  
I will let you know.

---

<div class="post-metadata">

**Author:** ![Jamo](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/jamo/32/1117_2.png) [@Jamo](https://discourse.getcockpit.com/u/Jamo)\
**Post date:** [August 27, 2024, 1:09pm UTC](https://discourse.getcockpit.com/t/vuejs-based-modular-cockpit-frontend-cof/2314/8 "2024-08-27T13:09:42Z")

</div>

Unfortunately, for whatever reason, I can’t edit the OP.

**Please take note of the fact that COF was developed for an old version of Cockpit! A lot has changed since the last major release, and COF isn’t working anymore!**