create button component with nuxtjs in javascript

To create a button component with Nuxt.js in JavaScript, you can follow these steps:

1. Create a new Vue component for the button.
2. In the component file, define the template for the button.
3. Add any necessary props and data to customize the button.
4. Style the button using CSS.

Here's an example of how you can create a button component with Nuxt.js in JavaScript:

1. Create a new file called Button.vue in the components directory of your Nuxt.js project.

2. In Button.vue, define the template for the button component:

<template>
  <button class="my-button" @click="onClick">
    {{ label }}
  </button>
</template>
97 chars
6 lines

In this example, the button component receives a label prop to customize the button's text. It also triggers a click event when clicked.

3. Add the necessary JavaScript code to handle the button's functionality. In this case, we'll add a method to handle the button click:

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  },
  methods: {
    onClick() {
      // Add your button's functionality here
      console.log('Button clicked');
    }
  }
};
</script>
237 chars
17 lines

In this example, the button component receives a required label prop of type String. The onClick method logs a message to the console when the button is clicked. You can replace this with your desired functionality.

4. Finally, style the button using CSS. You can add styles either inline within the component or using an external CSS file:

<style scoped>
.my-button {
  /* Add your button styles here */
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>
161 chars
10 lines

In this example, we've added some basic styles to create a blue button with white text and rounded corners.

Now you can use your button component in your Nuxt.js project by importing the Button component and including it in your templates. For example, in a page component:

<template>
  <div>
    <Button label="Click me" />
  </div>
</template>

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

export default {
  components: {
    Button
  }
};
</script>
190 chars
16 lines

Make sure to import the Button component and add it to the components section of your page component.

That's it! You've created a button component with Nuxt.js in JavaScript.