1

I want to include the Front end tamplate that I bought ready-made in my nuxt project, but it gives an error.

I shared the error on the terminal screen and the files I added in the attachment.

Error in terminal

Added files and folders

index sayfamda eklemis oldugum dosyalari import ettim.

pages/index.vue

  <template>
  <v-row>

  </v-row>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          { src: "@/js/jquery.min.js",},
          { src: "@/js/isotope.pkgd.min.js",},
          { src: "@/js/bootstrap.min.js",},
          { src: "@/js/simplebar.js",},
          { src: "@/js/owl.carousel.min.js",},
          { src: "@/js/jquery.magnific-popup.min.js",},
          { src: "@/js/jquery.animatedheadline.min.js",},
          { src: "@/js/jquery.easypiechart.js",},
          { src: "@/js/jquery.validation.js",},
          { src: "@/js/tilt.js",},
          { src: "@/js/main.js",},
          { src: "https://maps.google.com/maps/api/js?sensor=false",}
        ],

      }
    }
  }
</script>


<style scoped>
        /* CSS Plugins */
        @import '@/css/plugins/bootstrap.min.css';
        @import '@/css/plugins/font-awesome.css';
        @import '@/css/plugins/magnific-popup.css';
        @import '@/css/plugins/simplebar.css';
        @import '@/css/plugins/owl.carousel.min.css';
        @import '@/css/plugins/owl.theme.default.min.css';
        @import '@/css/plugins/jquery.animatedheadline.css';

        /* CSS Base */
        @import '@/css/style-dark.css';

        /* Settings Style */
        @import '@/css/settings/left-nav.css';
        @import '@/css/settings/box/box.css';
        @import '@/css/settings/box/circle.css';
        @import '@/css/settings/title/title.css';
        @import '@/css/settings/color/green-color.css';
</style>

I didn't do anything on my dafault page.

layouts/default.vue

<template>
  <v-app>
    <v-main>
      <v-container>
        <Nuxt />
      </v-container>
    </v-main>
    <v-footer fixed app>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          icon: 'mdi-apps',
          title: 'Welcome',
          to: '/',
        },
      ],
      title: 'Vuetify.js',
    }
  },
}
</script>
Ahmet
  • 11
  • 1
  • Damn. What even is that template? – kissu Nov 27 '21 at 22:43
  • Sorry. I'm a new developer :). I tried this way, but I couldn't get it to work in vue under pages, so I applied to this path temporarily. nuxt.config.js css: [ // CSS Plugins 'css/plugins/bootstrap.min.css', 'css/plugins/font-awesome.css', 'css/plugins/magnific-popup.css', // CSS Base 'css/style-dark.css', // Settings Style 'css/settings/box/box.css', ] }, script: [ { src: "@/js/jquery.min.js", }, { src: "@/js/simplebar.js", }, { src: "@/js/tilt.js", }, ], – Ahmet Nov 27 '21 at 23:28
  • If you're new, you should learn the basics and how it works properly. Trying to get some random template working will not teach you the good way of doing things. Especially when it's using deprecated stuff/jQuery. So even if we could make this template work somehow, it's probably not the best way to go for several reasons. Check my answer here for 3rd party scripts: https://stackoverflow.com/a/67535277/8816585 Even tho, you should probably use a bundle (webpack or Vite) and a package manager like NPM to manage your JS scripts. Rather than some inline JS files stored locally. – kissu Nov 28 '21 at 00:43
  • Thanks a lot for your suggestions. In particular, your suggestions about not storing js files locally and 3rd party scripts. – Ahmet Nov 28 '21 at 09:52

0 Answers0