I recommend this solution by antfu, which is IMO by far the best approach to work with any kind of icons: https://github.com/antfu/unplugin-icons Check the more in-depth article explaining why and how the whole thing works. Here’s a quick way on how to use it with Nuxt3, first off the requirements: be sure to use Node … Read more
Let me re-iterate few points as a pretext to what i’m going to say asyncData can set component level objects and access vuex store fetch cannot set component level objects but has access to vuex store Both asyncData & fetch will be triggered in server side during initial load After initial load, asyncData and fetch … Read more
My way of handling this kind of issue while minimizing the API calls required are following those steps: generate a brand new Nuxt project install axios: yarn add -D axios add this to the nuxt.config.js file import axios from ‘axios’ export default { … generate: { routes: async () => { const users = await … Read more
Since your API requires some CORS configuration, here is a simple solution with the JSONplaceholder API of a index + details list collection. test.vue, pretty much the blog listing in your case <template> <div> <div v-if=”$fetchState.pending”>Fetching data…</div> <div v-else> <div v-for=”item in items” :key=”item.id”> <nuxt-link :to=”`/details/${item.id}`”> View item #{{ item.id }}</nuxt-link> </div> </div> </div> </template> … Read more
As of today, Nuxt2 is still using Webpack4 so ModuleFederationPlugin will not be a possible solution. Nuxt v3 will come with Webpack’s v5 support and you’ll probably be able to try it then. I also heard that the same could be used with Vite btw. As a general answer, you need to understand that a … Read more
Update: According to the latest documentation, mode: ‘universal’ and mode: ‘spa’ were deprecated in favor of ssr: true and ssr: false. Full static works only with target: ‘static’ and ssr: true (counterpart of deprecated mode: ‘universal’). The ssr: true is a default value. The ssr: false is a counterpart of the deprecated mode: ‘spa’ and … Read more
I do not recommend adding jQuery to a Nuxt project. But if you really want to, you can follow those steps: install it with yarn add jquery add those to your nuxt.config.js file import webpack from ‘webpack’ export default { // … build: { plugins: [ new webpack.ProvidePlugin({ $: ‘jquery’, jQuery: ‘jquery’, ‘window.jQuery’: ‘jquery’ }) … Read more
You need to have at least this in your nuxt.config.js file export default { ssr: true, target: ‘server’, modules: [ ‘@nuxtjs/axios’, ], serverMiddleware: [ { path: ‘/api’, handler: ‘~/server-middleware/rest.js’ }, ], } And a /server-middleware/rest.js file with const app = require(‘express’)() app.get(‘/what-is-my-name/:name’, (req, res) => { res.json({ name: req.params.name, age: 12 }) }) module.exports = … Read more
You’re loading your fonts from a CDN, which is not the recommended way of doing things. Here is a quote from this awesome performance checklist 2021 written by Vitaly Friedman Now, many of us might be using a CDN or a third-party host to load web fonts from. In general, it’s always better to self-host … Read more
You should use a custom row cell : <v-data-table :headers=”headers” :items=”logs”> <template v-slot:item.createdOn=”{ item }”> <span>{{ new Date(item.createdOn).toLocaleString() }}</span> </template> </v-data-table>