Getting Started
In order to write and utilize Elm modules in our application, there is a bit of configuration work that needs to be done. The following steps will install the required dependencies to write Elm code and import it in your development environment.
Install dependencies
# Install dependencies
npm install elm-vue-bridge
npm install --save-dev elm-tooling vite-plugin-elm
# Initialize elm tooling
npx elm-tooling init
npx elm init
# Install elm and related tools
npx elm-tooling install
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Install dependencies
npm install elm-vue-bridge
npm install --save-dev elm-tooling elm-webpack-loader
# Initialize elm tooling
npx elm-tooling init
npx elm init
# Install elm and related tools
npx elm-tooling install
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Install dependencies
npm install elm-vue-bridge
npm install --save-dev elm-tooling vite-plugin-elm
# Initialize elm tooling
npx elm-tooling init
npx elm init
# Install elm and related tools
npx elm-tooling install
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Configure bundler
// Configure vite.config.js
import elmPlugin from "vite-plugin-elm";
export default {
plugins: [elmPlugin()]
}
1
2
3
4
5
6
7
2
3
4
5
6
7
// Configure vue.config.js
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: { loader: "elm-webpack-loader", options: {} }
}
]
}
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Configure nuxt.config.ts
import { defineNuxtConfig } from "nuxt3";
import elmPlugin from "vite-plugin-elm";
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
vite: {
plugins: [elmPlugin()],
},
});
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Update .gitignore
Elm uses a folder called elm-stuff to store installed packages and compiled code. It shouldn't be commited, so let's add it to .gitignore
# Add `elm-stuff` to your .gitignore file:
echo 'elm-stuff' >> .gitignore
1
2
3
2
3
Update package.json
// Add the following command to automatically install elm and its tools
{
"scripts": {
"postinstall": "elm-tooling install"
}
}
1
2
3
4
5
6
2
3
4
5
6
Typescript (optional)
Because we aren't worrying about the type structure of imported Elm code (it just goes into elmBridge as an argument), create elm.d.ts in the root of your application and add the following:
declare module "*.elm" {
export const Elm: unknown;
}
1
2
3
2
3