Getting Started your application using Nuxt Vuejs with Typescript

Nuxt + Typescript

Hi CelSius, — that’s how i call my pal 😆

I’m going to start a new application using Nuxt (this is a Vuejs Framework).

Alos, I’m going to use Typescript as a support for my Nuxt application.

Installing Nuxt (Vuejs Framework)

Currently i’m trying to installing the Nuxt application using Npm.

npm init nuxt-app <your-application-name>

After running the command above, there will be a questions for the default installation :

  • Project Name
    Just press enter if you want to configure the same name as the command above
  • Programming Language
    There will be two options (Javascript / Typescript)
    In my project, i’m using Typescript
  • Package Manager
    There will be two options (Yarn / Npm)
    In my project, i’m using Npm
  • UI Framework
    There will be a lot of options (None, Ant Design Vue, BootstrapVue, etc.)
    In my project, i’m using BootstrapVue
  • Nuxt.js modules
    There will be three options :
    - Axios — Promise based HTTP client
    -
    Progressive Web App (PWA)
    - Content — Git-based headless CMS
    We can choose more than one options, and in my project, i’m using Axios and PWA
  • Linting Tools
    There will be some options (ESLint, Prettier, Lint staged files, StyleLint, Commitlint)
    In my project, i’m using ESLint, Prettier, and StyleLint
  • Testing Framework
    There will be some options (Jest, AVA, WebdriverIO, Nightwatch)
    In my project, i’m using Jest
  • Rendering Mode
    There will be two options (Server Side Rendering, Single Page App)
    In my project, i’m using Single Page Application
  • Deployment Target
    There will be two options (Server — Node.js hosting, Static)
    In my project, i’m using Static
  • Development tools
    There will be some options (jsconfig.json, Semantic Pull Requests, Dependabot)
    In my project, i’m using Semantic Pull Requests
  • Continuous integration
    There will be two options (None, Github Actions — Github only)
    In my project, i’m using None
  • Version Control
    There will be two options (None, Git)
    In my project, i’m using Git

After choosing the options above, it will installing all the packages.

After the installation has been done, it will looks like this :

🎉  Successfully created project forces-nuxtTo get started:cd forces-nuxt
npm run dev
To build & start for production:cd forces-nuxt
npm run build
npm run start
To test:cd forces-nuxt
npm run test

Fixing Dependencies Issues For Running the Dev

After the installation has been finished (Nuxt v.2.14.12), i’m trying to run :

npm run dev

But i got some dependencies issues, and fixed in this steps (Handling error on first-time Nuxt Installation).

Running the Application for Dev

Start running the application with this command :

npm run dev

It should be showing something like this :

Running the Nuxt application for Dev on the command line

And then you open http://localhost:3000/, it should be displaying the following view :

Starting the Nuxt application for Dev

Running the testing on the application

Start running the test with this command :

npm run test

Then it will start running all tests in the application :

Running the testing using Jest on the application

A passionate developer who loves design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store