axios-module VS content

Alright thank you for the link. You do seem to be correct and I also cross-checked it in the Axios Module link as well and it seems there isn't going to be an axios module for Nuxt 3 or at least this is what the phrasing conveys.

// Axios module configuration: https://go.nuxtjs.dev/config-axios axios: { // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308 browserBaseURL: process.env.API_URL },

my nuxt config is: // require("dotenv").config(); // const isProd = process.env.NODE_ENV === 'production' export default { // Global page headers: https://go.nuxtjs.dev/config-head ssr: true, target: 'static', generate: {fallback: true}, head: { title: 'Aura | Building the NFT infrastructure', htmlAttrs: { lang: 'en', }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Building the NFT infrastructure to enable seamless commerce to buy/sell/trade NFTs' }, { name: 'format-detection', content: 'telephone=no' }, ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Inter:wght@300;400;500;600;700&display=swap"', onload:"this.rel='stylesheet'"} ], }, // Global CSS: https://go.nuxtjs.dev/config-css css: [], loading: false, parallel: true, // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [ { src: '~/plugins/aos.js', ssr: false }, { src: '~/plugins/mixpanel.js', ssr: false }, { src: '~/plugins/simple-shimmer.js', ssr: false }, { src: '~/plugins/vue-apexchart.js', ssr: false }, { src: '~/plugins/myFormatter.js', ssr: true }, { src: '~/plugins/axios', ssr: true }, { src: '~/plugins/font-awesome.js', ssr: true }, ], // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules buildModules: [ // https://go.nuxtjs.dev/eslint '@nuxtjs/eslint-module', // https://go.nuxtjs.dev/tailwindcss '@nuxtjs/tailwindcss', [ "@nuxtjs/google-analytics", { id: process.env.VUE_APP_GA_ID } ], ['@nuxtjs/fontawesome', { component: 'fa', imports: [ { set: '@fortawesome/free-solid-svg-icons', icons: ['faSpinner', 'faCaretUp', 'faCaretDown',] }, ] }], ], googleAnalytics: { id: process.env.VUE_APP_GA_ID // or use ({}).GOOGLE_ANALYTICS_ID }, publicRuntimeConfig: { googleAnalytics: { id: process.env.VUE_APP_GA_ID // or use ({}).GOOGLE_ANALYTICS_ID }, }, // Modules: https://go.nuxtjs.dev/config-modules modules: [ // https://go.nuxtjs.dev/axios "@nuxtjs/dotenv", '@nuxtjs/axios', "vue-toastification/nuxt", // You can also pass plugin options ["vue-toastification/nuxt", { timeout: 5000, draggable: true }], [ 'nuxt-compress', { gzip: { threshold: 8192, }, brotli: { threshold: 8192, }, }, ], ], // Axios module configuration: https://go.nuxtjs.dev/config-axios axios: { // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308 baseURL: process.env.VUE_APP_API_BASE_URL, }, cache: { useHostPrefix: false, pages: [/^\/$/], store: { type: "memory", max: 100, ttl: 60 } }, workbox: { runtimeCaching: [ { urlPattern: 'https://fonts.googleapis.com/.\*', handler: 'cacheFirst', method: 'GET', strategyOptions: { cacheableResponse: { statuses: [0, 200] } } } ] }, // Build Configuration: https://go.nuxtjs.dev/config-build build: { html: { minify: { collapseBooleanAttributes: true, decodeEntities: true, minifyCSS: true, minifyJS: true, processConditionalComments: true, removeEmptyAttributes: true, removeRedundantAttributes: true, trimCustomFragments: true, useShortDoctype: true } }, splitChunks:{ pages: true, commons: true }, optimization: { runtimeChunk: { name: (entrypoint) => `runtime~${entrypoint.name}`, }, minimize: true, splitChunks: { chunks: "all", name:true, cacheGroups: { styles: { name: 'styles', test: /\.(css|vue)$/, chunks: 'all', enforce: true } } } }, extend(config, { isDev, isClient, loaders: { vue } }) { config.resolve.symlinks = false; config.module.rules.push({ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }) if (isDev) { config.mode = 'development' } if(isDev) { config.devtool = isClient ? "eval-source-map" : "inline-source-map"; } } }, }

// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308

GitHub repo

Nuxt is an appealing framework to work with, partly because of its robust module ecosystem. Popular UI libraries, headless CMS tools, and databases can be easily integrated with a single line of code. Among other third-party modules, Nuxt Image, Nuxt Content, and Nuxt UI are some of the official modules developed by the Nuxt team.

For reference also in the space of 'website from markdown':

* https://content.nuxt.com/ - JS, SSG and SSR

If you want to continue using markdown, nuxt 3 has a module, Nuxt Content - https://nuxt.com/modules/content https://content.nuxtjs.org/

Nuxt Content is what you’re looking for.

Then I recalled about Content. It's a file-based Headless CMS which use files of extension .md, .yml, .csv and .json a data layer for the application. And its MDC syntax is cherry on top. So I came with a plan to use .json files to handle project data. Basically, I'll just create a projects section using Content, put my projects in .json files, use the Querying functionality of Content to fetch them and populate the Components as needed.

I would argue that using something like Nuxt/Content[0]is even simpler. I create a new markdown file in my website’s local repo, write the content and commit if it’s ready for publishing. No need for the FTP step and version control is build in.

This setup is also completely free since the content lives on GitHub and my static site on render.com (but any static site hosting will work).

And since it’s Nuxt based, it automatically also supports more advanced features such as tagging, advanced queries and filtering.

Can only recommend it!

0. https://content.nuxtjs.org