tp3

tp3/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

tp3/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

tp3/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

tp3/assets/css/main.scss

@@ -0,0 +1 @@
+@import "bootstrap/scss/bootstrap";

tp3/components/Product/Card.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title">{{ name }}</h5>
+                <h6 class="card-subtitle mb-2 text-muted">{{ price }}</h6>
+                <p class="card-text">{{ description }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    name: {
+        type: String,
+        required: true
+    },
+    price: {
+        type: Number,
+        required: true
+    },
+    description: {
+        type: String,
+        required: true
+    }
+})
+</script>

tp3/components/Product/Container.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <div class="container">
+            <div class="row">
+                <slot />
+        </div>
+        </div>
+    </div>
+</template>

tp3/layouts/default.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <nav class="navbar navbar-expand">
+                        <p>
+                            <a class="navbar-brand" href="#">Logo</a>
+                        </p>
+                        <div class="collapse navbar-collapse">
+                            <ul class="navbar-nav">
+                                <li v-for="(menuItem, i) in menuItems" :key="'menuItem' + i" class="nav-item">
+                                    <a class="nav-link" :href="menuItem.path">{{ menuItem.title }}</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </div>
+        <slot />
+        Footer
+    </div>
+    </template>
+
+<script setup>
+const menuItems = [
+    {
+        path: '/',
+        title: 'Accueil'
+    },
+    {
+        path: '/category/vetements',
+        title: 'Vêtements'
+    },
+    {
+        path: '/category/chaussures',
+        title: 'Chaussures'
+    },
+    {
+        path: '/category/accessoires',
+        title: 'Accessoires'
+    }
+]
+</script>

tp3/nuxt.config.ts

@@ -0,0 +1,28 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig(
+    {
+        app: {
+            head: {
+                meta: [
+                    {
+                        name: 'viewport',
+                        content: 'width=device-width, initial-scale=1'
+                    },
+                    {
+                        charset: 'utf-8'
+                    }
+                ], link: [
+                    {
+                        rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css', integrity: 'sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi', crossorigin: 'anonymous'}
+                ], style: [
+
+                ], script: [
+                    {src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3', crossorigin: 'anonymous'}
+                ]
+            }
+        },
+        css: [
+            '~/assets/css/main.css'
+        ]
+    }
+)

tp3/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "nuxt": "3.0.0-rc.13"
+  },
+  "dependencies": {
+    "bootstrap": "^5.2.2",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0"
+  }
+}

tp3/pages/category/[categoryName].vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <h1>Catégorie : {{ $route.params.categoryName }}</h1>
+        <div class="container">
+            <div class="row">
+                <ProductContainer>
+                    <ProductCard name="test1" price="10" description="description1" class="col-4" />
+                    <ProductCard name="test2" price="20" description="description2" class="col-4" />
+                    <ProductCard name="test3" price="30" description="description3" class="col-4" />
+                </ProductContainer>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const route = useRoute()
+console.log(route.params.categoryName)
+useHead({
+        title: 'Catégorie ' + route.params.categoryName
+    })
+</script>

tp3/pages/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <h1>Salut les pommes</h1>
+    </div>
+</template>
+
+<style>
+
+</style>
+
+<script>
+
+</script>

tp3/plugins/useBootstrap.client.ts

@@ -0,0 +1,4 @@
+import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
+export default defineNuxtPlugin(nuxtApp => {
+    nuxtApp.provide('bootstrap', bootstrap)
+})

tp3/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}