[SOLVED] How to install Bootstrap Table in Nuxt 3

How to install Bootstrap Table in Nuxt 3

I'm trying to install Bootstrap Table in my Nuxt 3 project and I've tried to follow the steps here in their vue documentation. However i'm not having any success installing it as there isn't a nuxt 3 installation guide in their documentation. Does anyone know how to install it or maybe even provide some points on how to install it?

Solution

I haven't use bootstrap but I think this is the basic configurations based on the documentation. Vue

npm i jquery bootstrap bootstrap-table

~/plugins/bootstrap.client.js - Don't forget to include .client prefix

If you encounter issues with jquery. Follow this guide.

import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-table/dist/bootstrap-table.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'bootstrap-table/dist/bootstrap-table.min.js';
export default defineNuxtPlugin(() => {
  window.jQuery = window.$ = $;
});

Basic example usage.

<script setup>
const tableRef = ref(null);
onMounted(() => {
  window.jQuery = window.$ = $;
  if (tableRef.value) {
    $(tableRef.value).bootstrapTable({
      columns: [
        {
          field: 'id',
          title: 'Item ID',
        },
        {
          field: 'name',
          title: 'Item Name',
        },
        {
          field: 'price',
          title: 'Item Price',
        },
      ],
      data: [
        {
          id: 1,
          name: 'Item 1',
          price: '$1',
        },
        {
          id: 2,
          name: 'Item 2',
          price: '$2',
        },
      ],
    });
  }
});
</script>
<template>
  <div>
    <table ref="tableRef"></table>
  </div>
</template>
<style scoped lang="css"></style>

Expected output.