Home > OS >  How to run a Nuxt.js application
How to run a Nuxt.js application

Time:06-01

I am a junior developer at a Digital Agency. I have been assigned a task to work on a website that is built using vue.js and nuxt.js. Problem is, I don't know how to run the application. I have been looking into the code base and found out that there is an index.vue page which opens up the application. However, no matter how many times i've trouble shooted npm commands, there seems to be progress made on the server side to render the application. Essentially I am trying to run the application on the server side but I have been unable to despite following along with any tutorials.

What I have tried: npm run dev(after installing npm install/npm install nuxt)

The following is the error I have got:

FATAL  Expected parameter accessToken                                                                                           12:15:36



 at Module.createClient (node_modules/contentful/dist/contentful.node.js:5745:11)
  at createClient (plugins/contentful.js:5:23)
  at nuxt.config.js:11:55
  at jiti (node_modules/jiti/dist/jiti.js:1:196506)
  at Object.loadNuxtConfig (node_modules/@nuxt/config/dist/config.js:1082:15)
  at loadNuxtConfig (node_modules/@nuxt/cli/dist/cli-index.js:338:32)
  at NuxtCommand.getNuxtConfig (node_modules/@nuxt/cli/dist/cli-index.js:463:26)
  at Object._listenDev (node_modules/@nuxt/cli/dist/cli-dev.js:75:30)
  at Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:58:25)
  at Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:52:16)

    ───────────────────────────────────────────────╮
   │                                               │
   │   ✖ Nuxt Fatal Error                          │
   │                                               │
   │   TypeError: Expected parameter accessToken   │
   │                                               │
   ╰───────────────────────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `nuxt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/allenmathews/.npm/_logs/2022-06-01T02_15_36_473Z-debug.log

I am new to nuxt and I am also new to vue.js. I am sorry if this is a silly question but I have been trying to render the application locally for over 2 days now. Any replies is much appreciated.

I have also changed the package.json file to include `"start": "nuxt start" based on someone elses answers I found to troubleshoot this issue.

The following is the copy of my package.json file:

{
"name": "snaffle",
"version": "1.0.0",
"private": true,
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve",
    "static": "export NODE_OPTIONS=--max-old-space-size=6144 && nuxt build && nuxt export",
    "generate": "export NODE_OPTIONS=--max-old-space-size=6144 && nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest"
},
"dependencies": {
    "@contentful/rich-text-html-renderer": "^14.1.1",
    "@dansmaculotte/nuxt-segment": "^0.2.11",
    "@nuxtjs/axios": "^5.11.0",
    "@nuxtjs/markdownit": "^1.2.10",
    "@nuxtjs/robots": "^2.4.2",
    "@nuxtjs/sitemap": "^2.4.0",
    "contentful": "^7.14.6",
    "contentful-rich-text-vue-renderer": "^2.0.1",
    "friendly-querystring": "^0.2.0",
    "fuzzysort": "^1.1.4",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.15",
    "nuxt": "^2.15.8",
    "nuxt-lazy-load": "^1.2.6",
    "nuxt-typeform": "^0.0.1",
    "v-mask": "^2.2.3",
    "vue-confetti": "^2.2.1",
    "vue-headroom": "^0.10.1",
    "vue-js-modal": "^2.0.0-rc.6",
    "vue-scrollto": "^2.18.2",
    "vue2-hammer": "^2.1.2",
    "vuex-persist": "^2.2.0"
},
"devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.0.1",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "^26.0.1",
    "less": "^3.11.3",
    "less-loader": "^6.1.2",
    "nuxt-compress": "^5.0.0",
    "prettier": "^2.0.5",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.0.0",
    "vue-jest": "^3.0.4",
    "vue-svg-loader": "^0.16.0"
}

}

Thank you so much to anyone who has replied.

CodePudding user response:

I'm not sure I fully understand the question, but it looks like you have trouble running the project on the server, for that there is two ways to do this:

1.using generate mode of nuxt (easier and fastest way)

The only thing u need is run this command in your project :

Npm run generate

When the generate is completed then u will see a new folder named dist ,after that upload dists content to the /public_html/ and it’s done ✅

Ps: If you are not familiar with htaccess and how to run the nuxt project, the contents of the .htaccess file may also be useful for u :

 RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
DirectoryIndex 200.html
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /200.html [L]

2.building up your project

In this scenario, first install node on your server and then enter the following command via ssh in the folder where the nuxt project is located:

Npm run build

But do not forget, since you are using the node to run the project on the server, you must also assign a port to it, for this the information inside your htacces file must be look like this :

    RewriteEngine On


RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]


DirectoryIndex disabled

RewriteCond %{HTTPS} off 
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]


RewriteRule ^$ http://127.0.0.1:3108/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3108/$1 [P,L]

As u can see 3108 is a custom port that i used for my project

Finally, in order for the node library to display your project on a specific port, it needs to be activated. You can use pm2 to do this:

Pm2 start

Ps: if you dont know how to install node and pm2 to your server ,run these commands via ssh in your server:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

source ~/.bash_profile

nvm install 12

npm install -g pm2

CodePudding user response:

I am not very familiar with the nuxt.js framework but based on other frameworks ive used it seems to be that you have to build the project before you can run it. So

CodePudding user response:

Command you used to run Nuxt is wrong.

In package.json change

"dev": "nuxt" to: "dev": "nuxt dev"

And run npm run dev will run app.

  • Related