Skip to content

Commit d06f993

Browse files
vchan14vchan14
committed
Dynamic Attributes
1 parent fc6c08b commit d06f993

File tree

15 files changed

+151
-165
lines changed

15 files changed

+151
-165
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"format": "prettier --write src/"
1313
},
1414
"dependencies": {
15+
"@vue/repl": "^4.2.1",
1516
"pinia": "^2.1.7",
1617
"vue": "^3.4.21",
1718
"vue-router": "^4.3.0"
@@ -21,10 +22,13 @@
2122
"@rushstack/eslint-patch": "^1.8.0",
2223
"@vitejs/plugin-vue": "^5.0.4",
2324
"@vue/eslint-config-prettier": "^9.0.0",
25+
"autoprefixer": "^10.4.19",
2426
"eslint": "^8.57.0",
2527
"eslint-plugin-playwright": "^1.5.4",
2628
"eslint-plugin-vue": "^9.23.0",
29+
"postcss": "^8.4.38",
2730
"prettier": "^3.2.5",
31+
"tailwindcss": "^3.4.4",
2832
"vite": "^5.2.8"
2933
}
3034
}

‎src/App.vue

Lines changed: 32 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,44 @@
11
<script setup>
2-
import { RouterLink, RouterView } from 'vue-router'
3-
import HelloWorld from './components/HelloWorld.vue'
2+
import { RouterView } from 'vue-router'
3+
44
</script>
55

66
<template>
7-
<header>
8-
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
9-
10-
<div class="wrapper">
11-
<HelloWorld msg="You did it!" />
7+
<div class="flex flex-row gap-x-2 h-full w-full">
8+
<div class="flex flex-col w-36 p-2">
9+
<button
10+
class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-2 border border-gray-400 rounded shadow"
11+
@click="$router.push('/')"
12+
>
13+
Home
14+
</button>
15+
<button
16+
class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-2 border border-gray-400 rounded shadow"
17+
@click="$router.push('/about')"
18+
>
19+
About
20+
</button>
21+
<button
22+
class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-2 border border-gray-400 rounded shadow"
23+
@click="$router.push('/helloworld')"
24+
>
25+
Hello World
26+
</button>
27+
<button
28+
class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-2 border border-gray-400 rounded shadow"
29+
@click="$router.push('/dynamicattributes')"
30+
>
31+
Dynamic Attributes
32+
</button>
33+
</div>
34+
<div class="w-full">
35+
<RouterView />
1236

13-
<nav>
14-
<RouterLink to="/">Home</RouterLink>
15-
<RouterLink to="/about">About</RouterLink>
16-
</nav>
1737
</div>
18-
</header>
38+
</div>
1939

20-
<RouterView />
2140
</template>
2241

2342
<style scoped>
24-
header {
25-
line-height: 1.5;
26-
max-height: 100vh;
27-
}
28-
29-
.logo {
30-
display: block;
31-
margin: 0 auto 2rem;
32-
}
33-
34-
nav {
35-
width: 100%;
36-
font-size: 12px;
37-
text-align: center;
38-
margin-top: 2rem;
39-
}
40-
41-
nav a.router-link-exact-active {
42-
color: var(--color-text);
43-
}
44-
45-
nav a.router-link-exact-active:hover {
46-
background-color: transparent;
47-
}
48-
49-
nav a {
50-
display: inline-block;
51-
padding: 0 1rem;
52-
border-left: 1px solid var(--color-border);
53-
}
54-
55-
nav a:first-of-type {
56-
border: 0;
57-
}
58-
59-
@media (min-width: 1024px) {
60-
header {
61-
display: flex;
62-
place-items: center;
63-
padding-right: calc(var(--section-gap) / 2);
64-
}
65-
66-
.logo {
67-
margin: 0 2rem 0 0;
68-
}
69-
70-
header .wrapper {
71-
display: flex;
72-
place-items: flex-start;
73-
flex-wrap: wrap;
74-
}
75-
76-
nav {
77-
text-align: left;
78-
margin-left: -1rem;
79-
font-size: 1rem;
8043
81-
padding: 1rem 0;
82-
margin-top: 1rem;
83-
}
84-
}
8544
</style>

‎src/assets/main.css

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,10 @@
11
@import './base.css';
22

33
#app {
4-
max-width: 1280px;
54
margin: 0 auto;
6-
padding: 2rem;
75
font-weight: normal;
8-
}
9-
10-
a,
11-
.green {
12-
text-decoration: none;
13-
color: hsla(160, 100%, 37%, 1);
14-
transition: 0.4s;
15-
padding: 3px;
16-
}
17-
18-
@media (hover: hover) {
19-
a:hover {
20-
background-color: hsla(160, 100%, 37%, 0.2);
21-
}
22-
}
23-
24-
@media (min-width: 1024px) {
25-
body {
26-
display: flex;
27-
place-items: center;
28-
}
29-
30-
#app {
31-
display: grid;
32-
grid-template-columns: 1fr 1fr;
33-
padding: 0 2rem;
34-
}
35-
}
6+
height: 100vh;
7+
width: 100vw;
8+
padding-left: 10px;
9+
padding-top: 10px;
10+
}

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/components/ReplWrapper.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup>
2+
import { Repl, useStore } from '@vue/repl'
3+
import CodeMirror from '@vue/repl/codemirror-editor'
4+
5+
// require a prop called codeString
6+
const props = defineProps({
7+
codeString: {
8+
type: String,
9+
required: true,
10+
},
11+
files: {
12+
type: Object,
13+
default: () => ({}),
14+
},
15+
})
16+
17+
18+
const store = new useStore({})
19+
20+
store.setFiles({
21+
...store.getFiles(),
22+
'App.vue': props.codeString,
23+
})
24+
25+
26+
27+
</script>
28+
29+
<template>
30+
<Repl
31+
:editor="CodeMirror"
32+
:store="store"
33+
/>
34+
</template>

‎src/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* ./src/index.css */
2+
@tailwind base;
3+
@tailwind components;
4+
@tailwind utilities;

‎src/main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { createPinia } from 'pinia'
55

66
import App from './App.vue'
77
import router from './router'
8+
import './index.css'
89

910
const app = createApp(App)
1011

‎src/router/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,16 @@ const router = createRouter({
1616
// this generates a separate chunk (About.[hash].js) for this route
1717
// which is lazy-loaded when the route is visited.
1818
component: () => import('../views/AboutView.vue')
19+
},
20+
{
21+
path: '/helloworld',
22+
name: 'helloworld',
23+
component: () => import('../views/helloworld/HelloWorld.vue')
24+
},
25+
{
26+
path: '/dynamicattributes',
27+
name: 'dynamicattributes',
28+
component: () => import('../views/dynamicattributes/DynamicAttributes.vue')
1929
}
2030
]
2131
})

‎src/views/AboutView.vue

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
<template>
2-
<div class="about">
3-
<h1>This is an about page</h1>
4-
</div>
5-
</template>
1+
<script setup>
2+
import { Repl } from '@vue/repl'
3+
import Monaco from '@vue/repl/monaco-editor'
4+
// import '@vue/repl/style.css'
5+
// ^ no longer needed after 3.0
6+
</script>
67

7-
<style>
8-
@media (min-width: 1024px) {
9-
.about {
10-
min-height: 100vh;
11-
display: flex;
12-
align-items: center;
13-
}
14-
}
15-
</style>
8+
<template>
9+
<Repl
10+
:editor="Monaco"
11+
:preview-options="{
12+
customCode: {
13+
importCode: 'import { ref } from \'vue\'',
14+
useCode: 'const count = ref(0)'
15+
}
16+
}"
17+
/>
18+
</template>

‎src/views/HomeView.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script setup>
2-
import TheWelcome from '../components/TheWelcome.vue'
2+
import { Repl } from '@vue/repl'
3+
import CodeMirror from '@vue/repl/codemirror-editor'
34
</script>
45

56
<template>
6-
<main>
7-
<TheWelcome />
8-
</main>
7+
<Repl :editor="CodeMirror" />
98
</template>

0 commit comments

Comments
 (0)