Vuetify portfolio carousel
### ✅ Example: Portfolio Carousel in Vuetify 3
<template>
<v-container>
<v-carousel height="400">
<v-carousel-item
v-for="(item, i) in portfolioItems"
:key="i"
>
<v-sheet class="d-flex align-center justify-center pa-4" height="100%">
<v-row no-gutters class="fill-height">
<v-col cols="12" md="6">
<v-img :src="item.image" class="rounded-lg" cover height="100%"></v-img>
</v-col>
<v-col cols="12" md="6" class="pa-6 d-flex flex-column justify-center">
<h3 class="text-h5 mb-2">{{ item.title }}</h3>
<p class="text-body-1">{{ item.description }}</p>
</v-col>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-container>
</template>
<script setup>
const portfolioItems = [
{
image: 'https://via.placeholder.com/600x400?text=Project+1',
title: 'Project One',
description: 'This is a description of Project One. It highlights the features and technologies used.',
},
{
image: 'https://via.placeholder.com/600x400?text=Project+2',
title: 'Project Two',
description: 'An overview of Project Two, showcasing the design and functionality.',
},
{
image: 'https://via.placeholder.com/600x400?text=Project+3',
title: 'Project Three',
description: 'Details about Project Three, focusing on performance and scalability.',
},
];
</script>
<style scoped>
.v-carousel .v-carousel-item {
background-color: transparent;
}
</style>—
### 🔧 Notes:
– Uses `v-carousel` from Vuetify 3.
– Each `v-carousel-item` has an image and a text section.
– Fully responsive using Vuetify grid system (`v-row`, `v-col`).
– `v-img` ensures the image covers its container and maintains aspect ratio.
Would you like to add navigation arrows, autoplay, or hover effects?
<script>
import { ref,onMounted } from 'vue';
import {useRouter} from 'vue-router';
import { useLoadingStore } from '@/stores/loading';
const loadingStore = useLoadingStore();
const router = useRouter();
const expandedPosts = ref({});
const show = ref(false)
import {
fetchPortfolioItems,
} from '@/dbstore/firebase/myPortfolio'
interface PortfolioItem {
id: string
title: string
description: string
url: string
image: string
}
const portfolioItems = ref<PortfolioItem[]>([])
const loadItems = async () => {
portfolioItems.value = await fetchPortfolioItems() as PortfolioItem[];
expandedPosts.value = {};
console.log(portfolioItems.value);
}
onMounted(loadItems)
const toggleExpand = (postId: string) => {
expandedPosts.value[postId] = !expandedPosts.value[postId];
};
</script>{{ item.title }}
{{ item.description }}
Image
Title
Description
{{ item.title }}
{{ item.description }}
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
No index signature with a parameter of type 'string' was found on type '{}'
for expandedpost
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
No index signature with a parameter of type 'string' was found on type '{}'is because `expandedPosts` is initialized as an empty object `{}` and TypeScript doesn't know what kind of keys and values it will hold.
—
### ✅ Solution
You need to **define the type of the object**, specifying that keys are strings and values are booleans.
Update your `expandedPosts` like this:
const expandedPosts = ref<Record<string, boolean>>({});This tells TypeScript: "This is an object where keys are strings and values are booleans."
—
### 🔧 Also Fix These:
You're using `post.id` in the template but iterating with `item in portfolioItems`. So inside your `v-for`, replace `post` with `item`.
So update:
<template>
<v-container>
<v-row>
<v-col cols="12" md="4" v-for="item in portfolioItems" :key="item.id">
<v-card class="mx-auto" max-width="344">
<v-img height="200px" :src="item.image" cover></v-img>
<v-card-title>
{{ item.title }}
</v-card-title>
<v-card-actions>
<v-btn color="orange-lighten-2" text="Explore" />
<v-spacer />
<v-btn
:icon="expandedPosts[item.id] ? 'mdi-chevron-up' : 'mdi-chevron-down'"
@click="toggleExpand(item.id)"
/>
</v-card-actions>
<v-expand-transition>
<div v-show="expandedPosts[item.id]">
<v-divider></v-divider>
<v-card-text>
{{ item.description }}
</v-card-text>
</div>
</v-expand-transition>
</v-card>
</v-col>
</v-row>
</v-container>
</template>Let me know if you also want the Explore button to link to `item.url`, or if you'd like to turn this into a carousel version!
Number 10
Whitehaven Beach
Whitsunday Island, Whitsunday Islands
card title overflow not breaking line
—
### ✅ Solution
Override the default `white-space` style to allow wrapping by applying the class `text-wrap` or setting a custom style.
#### ✅ Option 1: Use Vuetify utility class
<v-card-title class="text-wrap">
Top 10 Australian beaches in Queensland that you must visit this summer!
</v-card-title>Vuetify’s `text-wrap` class sets:
white-space: normal;—
#### ✅ Option 2: Add inline style
<v-card-title style="white-space: normal;">
Top 10 Australian beaches in Queensland that you must visit this summer!
</v-card-title>—
### 💡 Optional: Add `line-clamp` if you want to limit the number of lines
<v-card-title class="text-wrap line-clamp-2">
Top 10 Australian beaches in Queensland that you must visit this summer!
</v-card-title>You can customize this with Tailwind or your own CSS class as needed.
Let me know if you'd like to truncate with ellipsis after 1–2 lines instead.
—
## ✅ Option 1: Middleware with User ID Check
Create a custom middleware that checks the authenticated user's ID.
### 🔧 Step 1: Create Middleware
php artisan make:middleware OnlySpecificUser### 🔧 Step 2: Define Logic in `app/Http/Middleware/OnlySpecificUser.php`
use Closure;
use IlluminateSupportFacadesAuth;
public function handle($request, Closure $next)
{
// Replace 1 with the specific user ID you want to allow
if (Auth::check() && Auth::id() === 1) {
return $next($request);
}
abort(403, 'Unauthorized');
}—
### 🔧 Step 3: Register Middleware
In `app/Http/Kernel.php`, add:
'only.specific.user' => AppHttpMiddlewareOnlySpecificUser::class,—
### 🔧 Step 4: Use in Route
Route::get('/admin-secret', [SecretController::class, 'index'])->middleware('only.specific.user');—
## ✅ Option 2: Check Directly in Controller (Simpler, but less reusable)
“`php
public
Here’s how you can do it in **Vue 3 with Vue Router**, assuming you're using **authentication via a store (like Pinia)** or an auth object.
—
## ✅ Step-by-Step Guide
### ✅ 1. Define Protected Route with Meta Info
// router/index.ts or router.js
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth' // adjust to your store path
import Dashboard from '@/views/Dashboard.vue'
import Forbidden from '@/views/Forbidden.vue'
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, onlyUserId: '123' } // restrict to user ID 123
},
{
path: '/forbidden',
component: Forbidden
},
// other routes...
]
const router = createRouter({
history: createWebHistory(),
routes,
})
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
const user = authStore.user // assuming this contains { id, name, email, etc }
if (to.meta.requiresAuth) {
if (!user) {
return next('/login')
}
if (to.meta.onlyUserId && user.id !== to.meta.onlyUserId) {
return next('/forbidden')
}
}
next()
})
export default router—
### ✅ 2. Example Auth Store (Pinia)
// stores/auth.ts
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null as null | { id: string, name: string, email: string }
}),
actions: {
setUser(user) {
this.user = user
},
logout() {
this.user = null
}
}
})—
### ✅ 3. Example: Set Auth User on Login
// In login logic
const authStore = useAuthStore()
authStore.setUser({ id: '123', name: 'Neeraj', email: 'neeraj@example.com' })—
### ✅ 4. Bonus: Forbidden.vue
<template>
<v-container>
<v-alert type="error" text="You are not authorized to view this page." />
</v-container>
</template>—
### 🔐 Summary
This setup:
– Restricts routes based on a specific user ID.
– Redirects unauthorized users to `/forbidden`.
– Uses Pinia to manage authentication state.
Would you prefer to restrict by **role**, **email**, or **custom permissions** instead?