Beginner guide to starting a Vue + Statamic project for a bigger Project

Note: this story is still in progress, but I want to put it out even in this state as it might save someone hours/days of refactoring or trying to figure out how to do things.

I’ve started a project using statamic. But since we wanted a non standard dashboard i’ve written it up using Vue. Here are the things I wish i had know before writing myself into a bit of a mess.

The project scope

Pages: 70
Collections:
Taxonomies: 4 ( I think I most likely don’t understand them well enough to use them more )

Statamic

Define a naming convention early. Specially for fieldsets, collections, templates and partials.

Fieldsets

The good: you can use partial fieldsets and I advice you learn about these quickly.

The bad: you can’t use the same partial for two top level fields. workaround: have a folder which contains all the duplicates with different names. But this will have to have partials which translate the extended names down to the final partial.

Note: I tend to name collections and entries with same name, because I do something with them on the front-end, you most likely can avoid this
Fieldsets folder structure:
blocks-default.yaml: all of your default blocks per page
blocks-<page-name>.yaml: specific blocks for a page, copy paste the blocks-default.yaml content at the start add a comment and then add any specific blocks for that page, note: this is only if your site supports page building

Partials

Do as many of these as possible. If you ever find yourself repeating any part for a template or partial (yes partials can have partials), do a partial. Trust me, this will save you loads of time if you ever need to refactor/change anything.

Figure out a folder structure also. I find that bem css style naming can be usefull for this, but sometimes you have more general things. Just choose how to portray this in your folder structure. This is how it looks now. But consider that I had to refactor this a few times, before just having to settle:

Next time this is how the structure will look like.

CCS + Tailwind

If you’re using partials, Tailwind css is the best way to style most of them. You might need to write some css if you’re doing more intricate stuff. But if you’re not, you can mainly get away with just Tailwind. Combine that with PurgeCss and you have tiny css files (like 10kb tiny).

Assets

Figure out a folder strategy early, I had to redo quite a bit of work as the assets were getting out of control. Use image minification + responsive images to make the site load faster.

This is how it looks now (I would like to optimize more but this is good enough next time I will do this it will look like this)

Localization + assets(images)

You’ll need to symlink your cached folder to every locale you have.

Frontend Vue

Split up any functionality into different modules.
Use services.
Split up your store if you need a store.

Tips:
- Don’t use moment.js check out date-fns it’s a much more lightweight library