DEV Community 👩‍💻👨‍💻

roggc
roggc

Posted on • Updated on

Setting up a dev environment for Vue with Parcel and Babel

To set up a dev environment for Vue with Parcel and Babel it's very easy. First, you create a project folder named vue1. Inside of it you initialize a project with npm init -y. Then you install Parcel, Vue and Babel in that order (Parcel before Vue) with npm i parcel-bundler parcel-plugin-clean-dist vue @babel/core @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props. Then you edit your package.json file and add the following:

  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
Enter fullscreen mode Exit fullscreen mode

Finally, you edit a '.babelrc' file:

{
  "presets": ["@vue/babel-preset-jsx"]
}
Enter fullscreen mode Exit fullscreen mode

That's it, you are good to go!
Now you develop.
You can create a folder named src with the following contents:
--|src
    --|components
        --app.js
    --favicon.ico
    --index.html
    --main.js
index.html file will be as follows:

<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" />
  <title>my app 🥳</title>
</head>
<body>
  <div id="app"></div>
  <script src='main.js'></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

main.js file will be as follows:

import {App} from './components/app'

new App({
  propsData: {
    name: 'Vue.js'
  },
  el:'#app'
})
Enter fullscreen mode Exit fullscreen mode

And app.js will be as follows:

import Vue from 'vue'

export const App=Vue.extend({
  props:{
    name:String
  },
  render(){
    return (
      <div>Wellcome to {this.name}</div>
    )
  }
})
Enter fullscreen mode Exit fullscreen mode

To start dev server you run npx parcel src/index.html and browse to localhost:1234 to see your Vue app in action with life reloading.
To build your app you run npx parcel build src/index.html. This will create dist folder with output files in it that you can deploy into a hosting service.
Alternatively, you can write scripts start and build in package.json as parcel src/index.html and parcel build src/index.html and run them with npm start and npm run build.

Top comments (5)

Collapse
 
therealgrinny profile image
Connor

I primarily use webpack when I work with Vue. So there's a separate src folder which can hold multiple .Vue files. That's my go-to method.

I'm assuming the object notation in app.js will let you define the components code too? I haven't seen it done this way before.

Which style do you think is more useful / good practice?

Collapse
 
roggc profile image
roggc

It's up to you. The thing here is Parcel or Webpack? I think Parcel is more straight than Webpack and will allow you to still work the way you do with Vue (or choose to).

Collapse
 
therealgrinny profile image
Connor

It definitely looks like much less of a pain in the butt to set up. I've had a lot of misadventures with dependency problems with webpack. I'll try it out with a new project!

Collapse
 
durkhaima profile image
durkhaima

I want to load all images from an assets folder and traverse through that collection in my I am not using webpack, just using parcel .... and not able to find a way to do this. Is it only possible via webpack as parcel does not have bundling of this sort ?

Collapse
 
alansolitar profile image
Alan Solitar

Interesting article. I've never used parcel before. I've only really used webpack.

Hey! Check out this week's Meme Monday post