Nuxt & Vue

Nuxt

nuxtarrow-up-right is a framework for vue.js apps, that adds server-side rendering. Drastically increases SEO capability of the Website, as server side rendering returns the whole page to the Search Engine. directory structurearrow-up-right Install with:

npx nuxi@latest init <project>

Directories

Root level directoruis

  • components: create Vue components in here starting with uppercase letters. Use them with ` Then use the github cli tool to create and sync the repository

Using bootstrap

I want to use the cdn for bootstrap so I put the app part in nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  devtools: { enabled: true },
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', integrity: 'sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor', crossorigin: 'anonymous' }
      ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2', crossorigin: 'anonymous' }
      ]
    }
  },
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },
});

Vue

vuearrow-up-right is a javascript framework for building mostly single page apps (SPAs). The whole page is downloaded with a basically empty index.html file that then gets populated on the client with the vue.js library. This is good for portals, webshops or applications that don't need to be searchable with search engines. The drawback is, everything gets downloaded at once, if it is not cached. Install and initialize with:

Component

A new component with css, javascript and html template

Api

The server/ directory is used to register APIs linkarrow-up-right

composables,plugins,stores, etc.arrow-up-right AI Linksarrow-up-right async/awaitarrow-up-right

Vite

Vite is a build tool with an integrated dev server geekinfoarrow-up-right config optionsarrow-up-right

Last updated