
VuePress: a fully Vue-powered static site generator - connor11528
https://vuepress.vuejs.org/
======
WD-42
First, I'd like to say I'm a big fan of Vue.js. I've used it for a few
production apps.

> Enjoy the dev experience of Vue + webpack

I just find this confusing. The only reason I _tolerate_ webpack is because of
how convoluted the front end web build chain has become.

I honestly think you must be a sadist to use something like this. It sounds
like it might get around the SEO problems SPAs suffer from somehow, but
seriously, just use Hugo or Jekyll!

~~~
josephg
> The only reason I tolerate webpack is because of how convoluted the front
> end web build chain has become.

I've moved back to browserify (/ watchify) for hobby web projects and I've
been very happy with it. Its a huge relief to jettison all the complexity that
webpack brings. Browserify configuration often fits on the command line even
for complicated projects. You have great tools for analysing bundle size with
disc[1], and you can do hot reloading on SPAs with budo[2]. The ecosystem has
_babelify_ for JSX, _tsify_ for typescript, _uglifyify_ \+ _unassertify_ for
minification, and _sheetify_ for CSS.

Browserify also seems way faster. I haven't tried webpack 4, but with webpack
3 I've had plenty of builds that take nearly a minute. Its out of control.

Webpack seems like the web generation's automake & autoconf. How long before
we have tools which generate webpack configuration programatically, and which
need configuration themselves.

[1] [https://www.npmjs.com/package/disc](https://www.npmjs.com/package/disc)
[2] [https://www.npmjs.com/package/budo](https://www.npmjs.com/package/budo)

~~~
navs
I recently made the switch to using ParcelJS [1]. Came from a browserify +
rework + npm run scripts setup and wanted something with 0 configuration for
my projects. Parcel's been that for me.

Disclaimer: I'm not a serious webapp developer/software engineer. I mostly
build websites so mileage may vary.

[1] [https://parceljs.org/](https://parceljs.org/)

~~~
onion2k
Webpack 4.0 also has zero config and it works exceptionally well.

------
tedmiston
I'm a big fan of Vue.js over React because of how much smaller and simpler it
is. VuePress looks interesting. Is this seen as a competitor to GatsbyJS, or
is it more focused on only docs sites?

~~~
spraak
Do you have experience with React? React is really simple, and I think Vue
looks simple on the surface but quickly turns into Angular level of mess.

~~~
tedmiston
Yeah, I've worked on medium-sized apps with React (mostly 1-2 years ago) and
small to medium side projects with Vue. The number of components and rapid
shifting in the React ecosystem, not to mention the absurd number of
dependencies installed by create-react-app were some of the major sticking
points. It all got pretty messy eventually. That experience with React is what
led me to Vue personally and got me to appreciate it.

Vue.js looks more limited on paper but it was the "React Lite" that removed
all of the options that ended up being used to make for complex codebases that
made it work for me. It's worth noting that my React experience was with
others on a dev team while Vue was solo.

------
wishinghand
Even though Evan You addresses how this measures up to Nuxt, unless you
absolutely need Markdown out of the box, I find Nuxt already has Vue’s static
site generator crown. Just run `npm run generate` to get a static site you can
host on S3, Now, Nearly Free Speech or wherever you prefer to host static
files.

~~~
lobo_tuerto
If Nuxt added support for Markdown out of the box it'd be perfect I think...

At least, would cover any Jekyll or Hugo users' needs.

------
manigandham
Another one to add to the list of static site generators:
[https://www.staticgen.com/](https://www.staticgen.com/)

------
metaphorical
Question: what is the advantage of SPA for a statically generated site?

~~~
pknight
Once the first page is loaded subsequent interactions that would normally
require a full page request can be done with smaller requests and with nice
transition effects.

~~~
hawski
Lately I've been thinking that browsers could do whole DOM diffing for the
transitions between the same origin.

Browser could just retain a current DOM, then just replace what's different.

I wonder how hard would it be to implement.

I understand that it's not how it works currently. But I hate that most SPAs
out there fail to signify progress and failure. I click something and nothing
happens. It's infuriating.

~~~
uallo
Something like
[https://github.com/turbolinks/turbolinks](https://github.com/turbolinks/turbolinks)
?

~~~
hawski
Yes, but built-in in browser.

Edit: and fully automatic. Browser would try to replace what it could, but
only as long as the origin remains the same.

------
neya
For all those who are unhappy with WebPack, I seriously recommend brunch
([http://www.brunch.io](http://www.brunch.io)). It used to be the default that
ships with Phoenix/Elixir (not sure if it still does) and it's really
straightforward to get started with it.

For our app, we use Jekyll+Brunch for the static site with about, contact us,
etc. And Phoenix for everything else. Brunch + VueJS is a breeze (unless
you're into dynamic imports, which is required for SPAs).

~~~
conradfr
I dislike Webpack and tried using Brunch with a Phoenix+Vue project but it
failed short when importing npm modules in my Vue components (another Vue
component, a lodash function etc).

It's sush a basic functionality that I was sure the problem was my code but
no, it's a ongoing problem with Brunch [1][2].

I like the concepts in Brunch but the project seems to be short on manpower
(look at the dates on the issues and PR), and vue-brunch is kinda unmaintained
as well [3].

I think Phoenix should move to Webpack or at least support more bundlers.

[1]
[https://github.com/brunch/brunch/issues/1553](https://github.com/brunch/brunch/issues/1553)
[2]
[https://github.com/brunch/brunch/pull/1664](https://github.com/brunch/brunch/pull/1664)
[3] [https://github.com/nblackburn/vue-
brunch/issues/22](https://github.com/nblackburn/vue-brunch/issues/22)

~~~
_mrmnmly
I've started using brunch.js in my side project (HTML5game). the only bad
thing I've noticed is problem with importing modules - I need to save file 2
times because when I do it only once then the imports will fail to load -
anyone experienced similar bug?

------
pier25
Why use this instead of something like Jekyll?

~~~
Can_Not
Because you get first class support for modern JavaScript while staying true
to being a static site first.

~~~
pier25
But isn't the point of making a static (.md or html based) site not having to
deal with JavaScript in the first place?

~~~
Can_Not
No it's the opposite, static websites are just static files, they work without
requiring backends. JavaScript on the front-end is usually static files, but
this enables first class support for modern JavaScript while losing nothing
else about static websites.

------
peter_retief
I have used vuejs for about a year now, my primary development is in django
and vuejs is a tool for writing SPA like calendars and IOT dashboard
components, all said I think what you are out to achieve is a great idea and I
am certainly going to give it a spin, thanks

------
xstartup
Where is the demo?

~~~
sdrn
The site is literally a demo

------
flibblewibble
I have spent the last 2 hours trying to work out if there was an alternative
to vue-markdown for Nuxt. 500kb to parse my markdown seemed insane.

~~~
oatmealsnap
Does vue-markdown not work with Nuxt?

I use marked.js on my own site. Works fine on NodeJS or in the browser.

~~~
wishinghand
It does. Monterail has a Nuxt repo for hackathon type sites and some pages
used a Vue based markdown component.

~~~
flibblewibble
I’m trying to build a static site with content coming from Contentful. I don’t
want site visitors to have to download 500k of vue-markdown before they can
see the content. Am I missing something? Is there a better way?

