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 Githubissues.
6. Githubissues is a development platform for aggregating issues.