Vue js homepage footer design

Question

Vue js homepage footer design

I am struggling to add a footer to my Vue.js project homepage. Being an inexperienced beginner in Vue, I am finding it difficult to make it work.

Here is where I need to add the footer

Below is my footer component:

<template>
 <footer>
 </footer>
</template>

<style scoped>

footer
{
display: flex;
background-color: #42b942; 
height: 50px;
width: 100%;
position: fixed;}
</style>

This is the code snippet from App.vue:

    <template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
import footer from '@/components/footer.vue';

    export default {
  name: "footer",
  components: {
    footer
   }
 }
 </script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Could someone guide me on what changes are needed to successfully display the footer on the Vue project homepage?

javascript vue.js footer

Answer 1

Answer №1

Make sure to include the footer component in your app template and avoid naming conflicts with other components.

To ensure the footer appears on all pages, adjust your code like this:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <footer/> <!-- Here we place the footer -->
  </div>
</template>
    
<script>
import footer from '@/components/footer.vue';

export default {
  name: "myApp", // Avoiding conflict with child component by renaming the app
  components: {
    footer
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Answer 2

Make sure to include the footer component in your app template and avoid naming conflicts with other components.

To ensure the footer appears on all pages, adjust your code like this:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <footer/> <!-- Here we place the footer -->
  </div>
</template>
    
<script>
import footer from '@/components/footer.vue';

export default {
  name: "myApp", // Avoiding conflict with child component by renaming the app
  components: {
    footer
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Answer 3

Answer №2

Here is the code from App.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <footer/>
  </div>
</template>

<script>
import footer from '@/components/footer.vue';

export default {
  name: "myApp",
  components: {
    footer
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Answer 4

Here is the code from App.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <footer/>
  </div>
</template>

<script>
import footer from '@/components/footer.vue';

export default {
  name: "myApp",
  components: {
    footer
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Answer 5

Answer №3

In a previous response, you mentioned that your footer.vue file has been modified to include styling for an element called "footer" within the template. However, since there is no actual HTML tag for footer in the template, it seems like the component might appear in App.vue without being recognized as a footer, displaying only the text "amith".

<template> 
  <div> 
   <p>amith</p>
  </div> 
</template> 

<style scoped> 
footer 
{ display: flex; 
background-color: #42b942; 
height: 50px; 
width: 100%; 
position: fixed; 
} 
</style>

Consider changing it to this format:

<template> 
 <footer>
  <div> 
   <p>amith</p>
  </div> 
 </footer>
</template> 

<style scoped> 
footer { 
display: flex; 
background-color: #42b942; 
height: 50px; 
width: 100%; 
position: fixed; 
} 
</style>

Additionally, update the name of the imported footer component to avoid conflicts with existing tags.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <footerComponent /> <!-- Update the footer component name -->
  </div>
</template>
    
<script>
import footerComponent from '@/components/footer.vue';

export default {
  name: "myApp", // Changing app name to prevent conflicts
  components: {
    footerComponent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Answer 6

In a previous response, you mentioned that your footer.vue file has been modified to include styling for an element called "footer" within the template. However, since there is no actual HTML tag for footer in the template, it seems like the component might appear in App.vue without being recognized as a footer, displaying only the text "amith".

<template> 
  <div> 
   <p>amith</p>
  </div> 
</template> 

<style scoped> 
footer 
{ display: flex; 
background-color: #42b942; 
height: 50px; 
width: 100%; 
position: fixed; 
} 
</style>

Consider changing it to this format:

<template> 
 <footer>
  <div> 
   <p>amith</p>
  </div> 
 </footer>
</template> 

<style scoped> 
footer { 
display: flex; 
background-color: #42b942; 
height: 50px; 
width: 100%; 
position: fixed; 
} 
</style>

Additionally, update the name of the imported footer component to avoid conflicts with existing tags.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <footerComponent /> <!-- Update the footer component name -->
  </div>
</template>
    
<script>
import footerComponent from '@/components/footer.vue';

export default {
  name: "myApp", // Changing app name to prevent conflicts
  components: {
    footerComponent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Vue js homepage footer design

Answer №1

Answer №2

Answer №3

Similar questions

Update overall font size to be 62% for a consistent look across the website

Leverage the power of Reactjs to add hover effects to a mapped

JavaScript and jQuery code: Trigger the vjs-fade-out class to toggle when the userActive value in video.js changes

Reduce the length of the text and display it upon hovering with the mouse

Utilize Meteor's ability to import async functions for seamless integration into method calls

Implementing a PayPal Payment Button in Vuejs3 using the Composition API setup function

CKEditor directive in AngularJS does not properly enforce the maxlength attribute in textarea

There are no specified operations outlined in the Node.js Express documentation

Ways to incorporate a custom JavaScript function that is activated by an external server system?

Using ReactJS and Hooks to update state after the .map() function

Envelop a HTML element within another HTML element with the help of jQuery

What is the best way to incorporate a token when making an axios ajax request?

I'm facing a challenge with displaying data on a dynamically created table using VueJS

Trouble uploading an audio blob as a base64 string using Google Drive API with the drive.files.create method - File ID could not be located

Ensuring the Security of Your Vue.js Login Component for Authenticated Users

The declaration for "Control" is not present, possibly being restricted by its protection level

I am facing an issue in JavaScript where one of my two timers is malfunctioning

Improving an HTML list with JavaScript

Utilizing Angular.js to extract data from a deeply nested array of objects in JSON

A JavaScript function that smoothly scrolls an element into view while considering any scrollable or positioned parent elements