Vuetify Markdown

Posted : admin | On 01-05-2021

In this video I discuss tiptap a rich text editor for Vue.js. In this video I discuss all the features of tip tap and how to add it to your next project. I create a brand new Vue.js app and we create a rich text editor with strikeout, bold and italics. Markdown definition is - a lowering of price. How to use markdown in a sentence. Lobotuerto's notes. This is just a stepping stone on my way to writing a full blog system that uses mainly Markdown for content, but can include Vue.js components in a painless way.

You probably know this story.

You go to start a brand new Vue + Vuetify project. You think,

Hmmm… I think I’d like to use Storybook to build and test my components in relative isolation.

–me, every time I start a new project

(BTW, if you don’t know what Storybook is, the 2-ish minute video below gives a pretty decent overview.) So you go to install it and you find that one or more of the following things has happened since thelast time you did this:

There’s a new version of Storybook
There’s a new version of Vuetify
There’s a new version of (node|ecmascript|vue|shiny-new-best-practice)

And of course, even if you have a perfectly valid working version of Storybook already configured in your last project–it doesn’t work anymore. 🙁

And of course, enough time has passed that you don’t really remember the details of why you configured it the way you did the last time, so you have to spend most of a day re-learning it to figure out how to make it work again. How many actual components could you actually have built in that same span of time? Who knows, but we <3 progress.

So, in the vain hope that it won’t change too much between this time and the next time, here’s my latest stab at configuring Storybook to work with Vue and Vuetify. The following assumes you’ve already got a working Vue+Vuetify app created.

<strong>AVOID NPM@7!</strong>

These instructions DO NOT WORK if you’ve updated npm to version 7. The reason is that npm@7 is stricter about how dependencies are handled and there are some known issues that prevent this from working correctly. I expect this will be fixed in time, but as of late December 2020, you’re better off sticking with npm v6.x.

Install Storybook + Addons

So far so good. This new installer automatically figures out I’m using Vue and sets me up for that. The a11y (accessibility) plugin is for reminding me to implement, well, accessibility features into my components. The other two are just so I can get the cool dark theme in the Storybook UI.

Go to the dark side

To get the Storybook UI to display in dark mode add this file to the config directory:

.storybook/manager.js

This is totally unnecessary, but I’ve found I like dark themes in the apps I use a lot…

Get SASSy

These updates get made to the .storybook/main.js file:

const path = require('path') // used for resolving aliasesmodule.exports = { stories: [ '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)', ], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y', // < add this to get a11y working ], // add this function to tweak the webpack config webpackFinal: async (config, { configType }) => { // so I can import { storyFactory } from '~storybook/util/helpers' config.resolve.alias['~storybook'] = path.resolve(__dirname) // the @ alias points to the `src/` directory, a common alias // used in the Vue community config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src') // THIS is the tricky stuff! config.module.rules.push({ test: /.sass$/, use: [ 'style-loader', 'css-loader', { loader: 'sass-loader', options: { sassOptions: { indentedSyntax: true, }, prependData: '@import '@/sass/variables.sass', }, }, ], include: path.resolve(__dirname, '../'), }) // return the updated Storybook configuration return config },}

The trickiest part is getting the SASS rule typed in correctly. Note that if I decide to switch to SCSS or to save the variables.sass file in a different directory (must be either sass|scss|styles), I need to update this rule to match. Also, if using SCSS, then I might not need the indentedSyntax rule. I dunno. I almost always have to look this up, and it always seems to take forever to find the docs.

Wrap It Up

This was new. Last time I followed John Leider’s approach and created a custom add-on with a decorator to wrap all my component stories in Vuetify clothing. However, this repo has been archived. Shit, now that I’m writing this, I realize there’s a new version of that plugin. No matter, it appears the plugin is designed for the old version of Storybook (5.x).

The newer version of Storybook (6.x) lets you put a “decorator” right in the .storybook/preview.js file. You could probably do that before. There’s probably a more elegant way to do this, but I’m slowly, slowly learning that working code is better than perfect code. Here’s my wrapper:

.storybook/preview.js

// Imports for configuring Vuetifyimport Vue from 'vue'import Vuetify from 'vuetify'import VueI18n from 'vue-i18n' // < NOTE: I usually use i18nimport i18n from '@/i18n'import { options } from '@/plugins/vuetify' // < important// configure Vue to use VuetifyVue.use(Vuetify)Vue.use(VueI18n)// this was the only thing here by defaultexport const parameters = { actions: { argTypesRegex: '^on[A-Z].*' },}// instantiate Vuetify instance with any component/story level paramsconst vuetify = new Vuetify(options)// THIS is my decoratorexport const decorators = [ (story, context) => { // wrap the passed component within the passed context const wrapped = story(context) // extend Vue to use Vuetify around the wrapped component return Vue.extend({ vuetify, i18n, components: { wrapped }, props: { dark: { type: Boolean, default: context.args.dark, }, locale: { type: String, default: 'en', }, }, watch: { dark: { immediate: true, handler (val) { this.$vuetify.theme.dark = val } }, locale: { immediate: true, handler (val) { this.$i18n.locale = val } } }, template: ` <v-app> <v-container fluid> <wrapped /> </v-container> </v-app> ` }) },]

The props and watch sections of my wrapper are there so you can toggle between languages (i18n) and the dark|light themes when viewing your components in Storybook. If you have other app-level settings you’d like to be able to mess with while building/testing your components, you should put them here.

“KNOBS” are now “CONTROLS”!!

In the last version of Storybook, the doohickeys you used to tweak your components at run-time were called “knobs.” They’ve renamed them “controls.” I’m embarrassed how long it took me to figure this out…

Export Options

In order for the above decorator to work, you have to set up your core Vuetify options so that they are exported as an object. Here’s how I do it:

Doing it this way allows you to re-use the options in your Storybook config. That way, if you change your app’s options, they will automatically be reflected in Storybook.

Help is on the way

I borrowed this style of creating stories from John’s plugin. I modified it this time to simplify and flatten the structure needed to generate docs from stories. This file could really go almost anywhere, but this seems like a decent location.

.storybook/util/helpers.js

A First Story

With the above helper in place, your stories can look something like:

What the Font!?!

The fonts I specified in src/sass/variables.sass aren’t showing up! Here’s my SASS:

src/sass/variables.sass

Oh! Right, I need to create a preview-head.html so they’ll be imported:

This is basically the same as the old version of Storybook.

That’s about it!

God I hope this configuration info is still relevant by the time I start y next project!! Even though Vue 3 has just been launched, I suspect that won’t be too much of a problem. Of course, Storybook 7 is probably less than a year away. Not to mention that the Vuetify team is bearing down on Vuetify 3. I expect that in a couple of months.

Sigh.

Such is the life of a developer these days. Hope this will be useful to someone. Get it while it’s hot!

Vuetify is one of the most popular frameworks and has been in development since 2016. This project provides users with everything that is needed to build rich and engaging web applications using the Material Design specification and Vue.

1. Vuetify Material Dashboard

This theme by Creative Tim is a beautiful resource that will help you get started developing dashboards in no time. Vuetify Material Dashboard is the official Vuejs version of the Original Material Dashboard.

Using the Dashboard is pretty simple but requires basic knowledge of Javascript, VuejsandVue Router. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.

2. Freelancer

A single page Material inspired theme for Freelancers.

3. Vuebase

Vuebase is a Firebase-like theme.

4. Vuetify swipeout

This project is a swipe out example built with Vue, Vuetify and Swiper.

5. Vuetify Admin Dashboard

Vuetify Admin Dashboard is a beautiful resource built over Vuetify and Vuex. It will help you get started developing dashboards in no time. Vuetify Material Dashboard is the official Vuejs version of the Original Material Dashboard. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, Vue, Vuex and Vue-Router.

Vuetify Display Markdown

6. Vue CRM

Vue CRM is a simple reusable CRM built on Vue 2 PWA template and Vuetify UI.
Features:

This project is built from Vue 2 PWA template by default.
The UI part is built on the top of Vuetify.
It inlcudes Vuex and Axios to manage authentication. (Dummy token)
The token and user profile is managed by Vue-Persisteddstate.
and many more!

Vuetify Parse Markdown

6. Vue Admin Template

Vue Admin Template is a sample Admin Template based on Vuejs & Vuetify.

Vuetify Markdown Editor

7. River Admin

River Admin is a very modern and a shiny customizable admin extension with user friendly and easy to use interfaces for django-river . The power of it comes from the libraries it uses on both backend and frontend sides which are django-river, django-rest-framework Vue and Vuetify.