Autoplay

    Start a Nuxt Project with npx and the Vue.js CLI

    John LindquistJohn Lindquist

    The initial setup of a Nuxt project is pretty straight-forward, but as with any project you’ll want to make a few tweaks of your own to get started. This lesson walks through the setup process and a few minor adjustments to get the News app on the right track.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    We'll start with a combination of NPX and the Vue CLI to emit the next.community/starter template, and we'll call our folder hacker next. Hit enter, let NPX and the Vue CLI do their thing. Then accept all the defaults.

    I'll use Visual Studio code to open the hacker next folder, then with our project open, I'll go ahead and npm install the dependencies. Once that's done, I'll npm run dev, just to make sure it's working. Then I'll open localhost:3000, and you can see the starter template running on that port.

    Now, to clear out the visuals from the starter template, going to delete the default layout. In the index view page, select all, and I'll say template is just a div that says hello world in it. Now, all I will have is just hello world.

    Then lastly, just for instructional purposes, I'm going to go into the config and turn off the ES lint task, simply to avoid going off on formatting tangents. Now, it won't run that linter every time I save.

    Discuss

    Discuss