diff --git a/public/index.html b/public/index.html
index 0dd585e..1dcc09a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,5 +13,7 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-  </body>
+    
+</script>  
+</body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index c119220..24c9628 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,36 @@
 <template>
-  <div id="app"></div>
+<section>
+  <div id="app">
+	
+  	<Declaratif :name="nom" @nomChanged="nom=$event" />
+  	<Condition :bool="bool"/>
+  	<ul>
+  		<Course :courses="tab" :newItem="new1" @listeChanged="new1=$event"/>
+  		
+  	</ul>
+  </div>
+ </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-
-@Component
-export default class App extends Vue {}
+import Declaratif from './components/Declaratif';
+import Condition from './components/Conditon';
+import Course    from  './components/Course';
+@Component({
+	components:{
+		Declaratif,	
+		Condition,
+		Course
+	}
+})	
+export default class App extends Vue {
+	new1: string;
+	nom: string = "TOTO";
+	bool: boolean=false;
+	tab: string[]=["liquide vaisselle","pain","pattes","beurre","lait"]
+	
+}
 </script>
 
 <style>
diff --git a/src/components/Conditon.vue b/src/components/Conditon.vue
new file mode 100644
index 0000000..69946f6
--- /dev/null
+++ b/src/components/Conditon.vue
@@ -0,0 +1,32 @@
+<template>
+<section>
+	
+ 	<p v-if="bool">{{visible}}</p>
+ 	<p v-if="!bool">{{cacher}}</p>
+ 	<button @click="toggle(bool)">Toggle</button>
+ </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue,Prop } from 'vue-property-decorator';
+
+
+@Component	
+export default class Condition extends Vue {
+	bool: boolean=false;
+	cacher: string=""
+	visible: string="je suis cacher"
+	@Prop(Boolean) bool:boolean;
+	toggle(bool): void{
+		if(this.bool)
+			this.bool=false
+		else
+			this.bool=true
+	}
+	
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Course.vue b/src/components/Course.vue
new file mode 100644
index 0000000..08762fa
--- /dev/null
+++ b/src/components/Course.vue
@@ -0,0 +1,43 @@
+<template>
+<section>
+	
+ 	Liste de course. 
+ 	<input type="hidden" :value="courses">
+ 	<li v-for="course in tab">
+			{{course}}
+  		</li>
+  		<input type="text" :value="newItem" @input="ajoutval">
+  		<p id="cacher">{{new1}}</p>
+  		<button @click="ajouter(new1,tab)">ajouter achat</button>
+
+ </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue,Prop } from 'vue-property-decorator';
+
+
+@Component	
+export default class Course extends Vue {
+	tab: string[]=["liquide vaisselle","pain","pattes","beurre","lait"]
+	@Prop(Array) courses: string[];
+	new1: string;
+	@Prop(String) newItem: string;
+	ajoutval(event): void{
+			this.new1=event.target.value
+			this.$emit('listeChanged',this.new1);
+		
+	}
+	ajouter(new1,tab){
+		tab.push(new1);
+	}
+
+	
+}
+</script>
+
+<style>
+#cacher{
+	display:none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Declaratif.vue b/src/components/Declaratif.vue
new file mode 100644
index 0000000..5e8a361
--- /dev/null
+++ b/src/components/Declaratif.vue
@@ -0,0 +1,31 @@
+<template>
+	<section>
+		<input type="text" :value="name" @input="changeNom">
+  		Bonjour {{nom}}
+  	</section>
+</section>
+
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component
+export default  class Declaratif extends Vue{
+	nom:string="TOTO"
+	@Prop(String) name:string
+	
+		changeNom(event): void{
+			this.nom=event.target.value
+			this.$emit('nomChanged',this.nom);
+		
+	}
+}
+
+	
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file