OS Website Template for Vue.js

Blueprint Theme	Windows Theme	MacOS Theme

Table of contents

1. Project Overview
2. Features
3. Technologies
4. Pre-Requisites
5. Setup Instructions
6. Register Windows with Slots (Quick Registration)
7. Register Custom Windows (Advanced Registration)
8. Window API
9. FAQ

Project Overview

This project aims to create an interactive Web OS template for Vue. Included in the template are all necessary logic for individual window components, navbars and app grids. Users are able to register new components (custom or otherwise) easily.

Features

• Interactable and Draggable Windows
• Built-in Navigation Bar (+ logic)
• Window Logic (States, Fullscreen, Minimization etc.)
• Themes (Blueprint, Windows, MacOS)

Technologies

• Vue 2
• Vuex
• InteractJS
• MomentJS

Pre-requisites

• Vue 2 (Novice)
• CSS (Novice)
• Patience with CSS

Setup Instructions

1. Download the latest release from this page's sidebae

2. Make sure you have Vue.js installed

Official Documentation from Vue

3. Rename the folder to vuejs-os-template

4. Cd into project folder and install packages + dependencies

$ cd vuejs-os-template && npm install

4. Serve project

$ npm run serve

Register Windows (slots method)

Registering a window with the slots method will allow you quick access to the pre-made window template. This method is most suited for users who do not require any change in the styling or layout of the window itself.

1. Head to /src/store/index.js

2. Register a new window by pasting the following snippet within the windows state array

{
     windowId: "UniqueWindowID", 
     windowState: "close",
     displayName: "Unique Window",
     windowComponent: 'window',
     windowContent: 'Placeholder',
     windowContentPadding: {
         top: null,
         right: null,
         bottom: null,
         left: null
     },
     position: "absolute",
     positionX: "10vw",
     positionY: "10vh",
     iconImage: "placeholder.png",
     altText: "Placeholder Icon",
     fullscreen: false
 },

3. Change 'windowId' to a unique window ID and 'displayName' to a preferred name for the window.

windowId: "MyNewWindow"

displayName: "New Window"

4. The content displayed within the window is registered to the 'Placeholder' component. Simply create a new content component under /src/components/views folder and replace 'windowContent' with the name of the new content component created.

windowContent: "MyNewWindowContent"

/src/components/views/MyNewWindowContent.vue

<template>
  <p>this is my new window's content!</p>
</template>

5. Head over to /src/App.vue to import and register the new components under the <script> section.

  import MyNewWindowContent from './components/views/MyNewWindowContent'

  components: {
    ...,
    MyNewWindowContent
  }

6. Save all changed or created files and head to localhost to view changes.

Register Windows (Custom Window)

Registering a custom window is also made relatively simple due to each window having a dedicated object state tracking the window to present. You might want to register a custom window if the layout or styling of the window itself needs to be modified (i.e. removal or addition of buttons in window's top bar).

1. Head to /src/store/index.js

2. Register a new window by pasting the following snippet within the windows state array

{
     windowId: "UniqueWindowID", 
     windowState: "close",
     displayName: "Unique Window",
     windowComponent: 'window',
     windowContent: 'Placeholder',
     windowContentPadding: {
         top: null,
         right: null,
         bottom: null,
         left: null
     },
     position: "absolute",
     positionX: "10vw",
     positionY: "10vh",
     iconImage: "placeholder.png",
     altText: "Placeholder Icon",
     fullscreen: false
 },

3. Change 'windowId' to a unique window ID and 'displayName' to a preferred name for the window.

windowId: "MyCustomWindow"

displayName: "Custom Window"

4. The window UI itself is stored under 'windowComponent' and we can now register our own custom window by changing the registered components.

windowComponent: 'SpecialWindow'

5. Create a new window component named SpecialWindow.vue under /src/components/template and copy the contents of Window.vue into this new file.

6. For demonstration purposes, we will simply change the background of the 'top-bar' of the window and add some content replacing the slot section.

Paste this CSS snippet under the style section.

.top-bar {
     background-color: green !important;
}

Replace the slot tags with this snippet of HTML.

<p>This is my new custom window</p>

6. Head over to /src/App.vue to import and register the new components under the <script> section.

  import SpecialWindow from './components/template/SpecialWindow'

  components: {
    ...,
    SpecialWindow
  }

7. Save all changed or created files and head to localhost to view changes.

Switching Themes

Included in the template are three different themes, the default Blueprint theme, a MacOS theme and a Windows theme. Switching between themes is made relatively easy but certain themes may require some minor tweaking.

Blueprint Theme

1. Head over to /src/App.vue, under the script section, import the Blueprint Navbar variant.

import Navbar from './components/blueprint/Navbar'

2. Under the style section of App.vue, import the Blueprint CSS variant.

@import './assets/css/blueprint/app.css';
@import './assets/css/blueprint/window.css';
@import './assets/css/blueprint/appgrid.css';

3. Save all changes and head to localhost to view changes.

Windows Theme

1. Head over to /src/App.vue, under the script section, import the Windows Navbar variant.

import Navbar from './components/windows/Navbar'

2. Under the style section of App.vue, import the Windows CSS variant.

@import './assets/css/windows/app.css';
@import './assets/css/windows/window.css';
@import './assets/css/windows/appgrid.css';

MacOS Theme

1. Head over to /src/App.vue, under the script section, import the MacOS Navbar variant and MacOS Top Navbar.

import Navbar from './components/macos/Navbar'
import TopNavbar from './components/macos/TopNavbar.vue'

2. Register the Top Navbar

components: {
     ...,
     TopNavbar
}```
     
3. Under the style section of App.vue, import the MacOS CSS variant. 
```css
@import './assets/css/macos/app.css';
@import './assets/css/macos/window.css';
@import './assets/css/macos/appgrid.css';

Window API

Name	Description	Type
windowId	Unique ID to identify a window	String
windowState	Tracks window's open, close or minimized state	String
displayName	Label for window in app grid and window header title	String
windowComponent	Window's own UI, can be changed to use a custom window, see custom window registration section	String
windowContent	Tracks window's content component, will be inserted in under slots if making use of standard window, see registration of windows with slots section	String
windowContentPadding	Sets padding of content within the window	String or null
position	Sets CSS position of window	String
positionX	Sets initial X displacement of window	String
positionY	Sets intial Y displacement of window	String
iconImage	Name of icon image of window, icons should be placed in /assets/icons/	String
altText	Icon's alternative text	String
fullscreen	Tracks whether a window is in fullscreen or not	Boolean

FAQ

Can I use this for...

• Yes.

Where are the CSS stored?

• /assets/css/, go wild with it!

Can I contribute or file an issue?

• Sure! Feel free to create an issue or a pull request.

Is a Linux theme coming?

• A Linux theme will eventually arrive when I am free to create it (and if the project gains enough traction).

Why is this not in React?

• I'm familiar with Vue mostly and I enjoy using Vue :D

Can I contact you?

• Of course! Email me and check out my website here.