DEV Community

How to host Nuxt.js application on firebase with a single command

Zigmas Slušnys on January 12, 2020

Introduction I wished to copy a famous website that is lingering across Europe where people share their found deals with others and like...

Read full post

skflowne • May 13 '20

Nice article very helpful !
Did you manage to make font-awesome work with it though ?
I can't get it to work with the "@nuxtjs/fontawesome" package, I followed their setup and it's working in dev but deployed icons do not display.
Actually, they are here but they all have a size of 0x0, it's like some css is missing.

Zigmas Slušnys • May 18 '20

I'd say you have to include the icons you want to use with JavaScript, also depends on the package of icons you want to use, I think there are several types of fa icons available that you have to explicitly define

skflowne • May 19 '20 • Edited

Yes, I got all the packages there and I can actually go into devtools and make them appear in prod if I change css.
I would expect the package to add the css needed as part of the built assets in client but it's not there.
So I'm not sure what's wrong here, it seems to me that the specific config for firebase shouldn't be an issue.
I've seen they mentionned this css file in another issue where icons were too big in prod.
So I tried adding this in css: ["@fortawesome/fontawesome-svg-core/styles.css"] in nuxt.config.js but no luck either.

I don't understand why this is not working the nuxtjs doc clearly says you can include global css this way and the css file has the classes that I'm missing.

Zigmas Slušnys • May 19 '20

I think you could find an okay article about this here: medium.com/@kozyreva.hanna/nuxt-js...

Aonghas Anderson • May 12 '20 • Edited

Should the publicPath actually be a property of the build object?:

const config = {
...nuxtConfig,
dev: false,
debug: false,
buildDir: ".nuxt",
build: {
**publicPath: "public" <--- this property
}
};

Zigmas Slušnys • May 18 '20

I will have to get back to you on this one, I might have changed this, but check the repo I think it should be up to date.

Joshua • Mar 18 '20

The function is looking for 3rd party libraries used in client.

Zigmas Slušnys • Mar 18 '20

Could you specify which function are you talking about and if that is a problem, and if so, what difficulties does it cause? Thanks

Joshua • Mar 18 '20 • Edited

The functions/index.js I got the same content as yours and when I try to deploy it and open in a browser it gives me this error

FATAL Cannot find module '@nuxtjs/axios'

. And this is my nuxt.config.js pastebin.com/LvxBi1yC

Zigmas Slušnys • Mar 18 '20

Did you build it with the non scripts provided in the src directory? Everything should be done with those scripts. If there are some missing dependencies it means the package.json may be missing something in functions directory.

Joshua • Mar 18 '20

So do I have to add all of the 3rd party libraries installed inside the src/package.json into my functions/package.json?

Taufik Nurhidayat • Oct 24 '20 • Edited

⚠  Error: Cannot find module 'nuxt-start'
Require stack:
- /home/taufik/project/ssr-novelindo/functions/index.js
- /home/taufik/.nvm/versions/node/v12.18.3/lib/node_modules/firebase-tools/lib/emulator/functionsEmulatorRuntime.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object. (/home/taufik/project/ssr-novelindo/functions/index.js:2:18)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
⚠  We were unable to load your functions code. (see above)
[hosting] Rewriting / to http://localhost:5001/novelindo/us-central1/ssrapp for l"

module nuxt-start is nothing?

Hina-softwareEngineer • Jan 14 '20

Nice. But it's not in English

Zigmas Slušnys • Jan 14 '20

That's true, I'll have to introduce multiple languages. It's in Lithuanian right now.

Kresimir Bojcic • Apr 10 '20

Nice blogpost, but why is it so painfully slow?

Daniel Jimenez Gutierrez • Apr 25 '20

It is because the cold start of firebase functions

SeriousLee13 • Feb 6 '21

Those predeploy scripts won't work on windows (I just tried implementing another nuxt/firebase tutorial article that used the same commands). Can you please add windows equivalents of the scripts?

joshuaholmes90 • Mar 18 '20 • Edited

The commands are for linux? I'm having issues, i'm developing via Windows Visual Studio Code, how would I achieve this on Windows?