master
waqarulzafar
parent
a8451851e9
commit
7c2a0f15ad
|
|
@ -0,0 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body{
|
||||
@apply bg-gray-50;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div class="card m-4 p-4 ">
|
||||
<img class="w-100"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props:['title','desc','id']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><NuxtLink to="/">Home</NuxtLink></li>
|
||||
<li><NuxtLink to="/about">About</NuxtLink></li>
|
||||
<li><NuxtLink to="/products/1122">Product 1122</NuxtLink></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header class="shadow-sm bg-white">
|
||||
<nav class="container mx-auto p-4 justify-between flex">
|
||||
<NuxtLink to="/" class="text-bold">Crave Teck</NuxtLink>
|
||||
<ul class="flex gap-4">
|
||||
<li><NuxtLink to="/">Home</NuxtLink></li>
|
||||
<li><NuxtLink to="/about">About</NuxtLink></li>
|
||||
<li><NuxtLink to="/products/1122">Product 1122</NuxtLink></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container p-4 mx-auto">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
@ -1,4 +1,11 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
'nuxt-headlessui'
|
||||
|
||||
],
|
||||
headlessui: {
|
||||
prefix: 'Headless'
|
||||
}
|
||||
})
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -8,6 +8,9 @@
|
|||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nuxt": "3.0.0"
|
||||
"@nuxtjs/i18n": "^8.0.0-beta.7",
|
||||
"@nuxtjs/tailwindcss": "^6.1.3",
|
||||
"nuxt": "3.0.0",
|
||||
"nuxt-headlessui": "^1.0.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,60 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>About</h1>
|
||||
<!--
|
||||
This example requires some changes to your config:
|
||||
|
||||
```
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
// ...
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
],
|
||||
}
|
||||
```
|
||||
-->
|
||||
<div class="bg-white">
|
||||
<div class="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="sr-only">Products</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-01.jpg" alt="Tall slender porcelain bottle with natural clay textured body and cork stopper." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Earthen Bottle</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$48</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg" alt="Olive drab green insulated bottle with flared screw lid and flat top." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Nomad Tumbler</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$35</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg" alt="Person using a pen to cross a task off a productivity paper card." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Focus Paper Refill</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$89</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="group">
|
||||
<div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
||||
<img src="https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-04.jpg" alt="Hand holding black machined steel mechanical pencil with brass tip and top." class="h-full w-full object-cover object-center group-hover:opacity-75">
|
||||
</div>
|
||||
<h3 class="mt-4 text-sm text-gray-700">Machined Mechanical Pencil</h3>
|
||||
<p class="mt-1 text-lg font-medium text-gray-900">$35</p>
|
||||
</a>
|
||||
|
||||
<!-- More products... -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,35 @@
|
|||
<template>
|
||||
<div>
|
||||
<HeadlessCombobox v-model="selectedPerson">
|
||||
<HeadlessComboboxInput class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0" @change="query = $event.target.value" />
|
||||
<HeadlessComboboxOptions class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<HeadlessComboboxOption class="mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" v-for="person in filteredPeople" :key="person" :value="person">
|
||||
{{ person }}
|
||||
</HeadlessComboboxOption>
|
||||
</HeadlessComboboxOptions>
|
||||
</HeadlessCombobox>
|
||||
<h1>Home Page</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const people = [
|
||||
'Wade Cooper',
|
||||
'Arlene McCoy',
|
||||
'Devon Webb',
|
||||
'Tom Cook',
|
||||
'Tanya Fox',
|
||||
'Hellen Schmidt',
|
||||
]
|
||||
const selectedPerson = ref(people[0])
|
||||
const query = ref('')
|
||||
|
||||
const filteredPeople = computed(() =>
|
||||
query.value === ''
|
||||
? people
|
||||
: people.filter((person) => {
|
||||
return person.toLowerCase().includes(query.value.toLowerCase())
|
||||
})
|
||||
)
|
||||
</script>
|
||||
|
|
@ -4,11 +4,6 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout:'default'
|
||||
})
|
||||
|
||||
export default {
|
||||
layout:'default'
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue