Commit 280561e7 authored by MarkThisDot's avatar MarkThisDot
Browse files

Initial commit

# Logs
# Editor directories and files
"recommendations": ["Vue.volar"]
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs]( to learn more.
## Recommended IDE Setup
- [VS Code]( + [Volar](
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
This diff is collapsed.
"name": "wikifunction-docs-vue",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"dependencies": {
"vue": "^3.2.25",
"vue-i18n": "^9.1.10"
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
"vite": "^2.9.9"
<script setup>
import { watch } from "vue";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
watch(locale, () => {
const page = document.querySelector("html");
page.dir = "rtl";
page.lang = locale;
<header class="container header">Wikifunctions</header>
<main class="container">
<div class="hero">
<h1>{{ $t("message.slogan") }}</h1>
A function is like a box that receives an
<b class="blue">input</b> and returns an <b class="red">output</b>.
You rely on functions every day which include using your phone, baking
a cake, using an ATM machine and more.
alt="Illustration of function
input and output"
<h2>What is a Function?</h2>
The function&apos;s job is to get some <b class="blue">input</b>,
process that <b class="blue">input</b> and return an
<b class="red">output</b>. Functions are great because they are reusable
like recipes.
<h2>How it works?</h2>
Imagine you wanted to bake a cake, but you had to remember the list of
steps on how to do it each time. The easier option would be to follow
and reuse a recipe each time you wanted to bake a cake.
<img src="/images/cake-example.png" alt="How to make a cake" />
<h2>Why should we care about functions?</h2>
Functions are reusable and save us time in the day. As you saw with the
cake example, the recipe makes the process of baking a cake go by much
faster and frees up our day to focus on other tasks.
<h2>Explore real world functions with interactive examples</h2>
<!--Monthly salary and Temperature converter would go here-->
2022 &copy;
rel="noopener noreferrer"
* {
box-sizing: border-box;
/*Colors from wiki functions logo*/
:root {
--blue: #086597;
--crimson-red: #950607;
--dark-green: #416853;
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
color: rgba(60, 60, 60, 0.7);
font-size: 1.3rem;
padding: 0;
margin: 0;
h6 {
color: #213547;
img {
object-fit: contain;
width: 100%;
.container {
width: 100%;
margin: 1rem auto;
.header {
font-size: 1.5rem;
.hero {
padding: 4rem 1rem;
display: flex;
flex-direction: column;
font-size: 1.3rem;
gap: 1rem;
.hero h1 {
color: #42b883;
line-height: 64px;
font-size: 3.5rem;
margin-bottom: 2rem;
section {
margin: 4rem 0;
footer {
background-color: #f3f3f3;
color: #666;
text-align: center;
padding: 2rem 0;
margin-top: 4rem;
footer a {
color: inherit;
.blue {
color: var(--blue);
.red {
color: var(--crimson-red);
@media (min-width: 576px) {
.container {
width: 540px;
@media (min-width: 768px) {
.container {
width: 720px;
@media (min-width: 992px) {
.container {
width: 960px;
@media (min-width: 1200px) {
.container {
width: 1140px;
.hero {
flex-direction: row;
<script setup>
import { ref } from 'vue'
msg: String
const count = ref(0)
<h1>{{ msg }}</h1>
Recommended IDE setup:
<a href="" target="_blank">VS Code</a>
<a href="" target="_blank">Volar</a>
<a href="" target="_blank">
Vite Documentation
<a href="" target="_blank">Vue 3 Documentation</a>
<button type="button" @click="count++">count is: {{ count }}</button>
<code>components/HelloWorld.vue</code> to test hot module replacement.
<style scoped>
a {
color: #42b983;
"slogan": "كل شيء في حياتك يعمل بفضل الدوال"
\ No newline at end of file
"slogan": "Everything in your life is powered by Functions"
\ No newline at end of file
import { createApp } from "vue";
import { createI18n } from "vue-i18n";
import App from "./App.vue";
import en from "./i18n/en.json";
import ar from "./i18n/ar.json";
const i18n = createI18n({
locale: "en",
messages: {
en: {
dir: "ltr",
message: en,
ar: {
dir: "rtl",
message: ar,
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment