👋 Happy to share my new starter kit

What does the Starter Kit contain?

This starter kit integrates frontend and backend canisters within a single project. The backend code resides in the backend folder while the frontend source code is under src.

This deviates from the default Nuxt (Vue.js) application structure. The reason for this change is to align with the standard IC setup where backend declaration files (did) are exported to src/declarations/backend. The frontend application is built around this convention.

The method for accessing environment variables in frontend applications varies depending on the starter kit. In this particular kit, we need to access the current backend canister identifier and the current network. This kit supports three networks: local, playground, and mainnet.

The .env file is read by Nuxt. However, it requires a specific naming convention. Any environment variables that are accessible to the client side must have the NUXT_PUBLIC_ prefix. The script extract-canisters-id.js, located in the scripts folder, prefixes environment variables with the correct values and adds them to the env file at build time. For implementation and execution details, refer to the packages.json file.

This starter kit utilizes a Nuxt plugin situated under plugins/ic to simplify access to the IC actor. This allows us to effortlessly use a getActor function in all components and pages, enabling us to invoke specific public canister functions within our backend canister.

Finally, this kit utilizes NextUI, a valuable UI component library that simplifies development and incorporates Tailwind CSS.

The appearance is as follows:

Short Teaser about Nuxt

Nuxt is a cutting-edge JavaScript framework that empowers developers to create fast, versatile, and dynamic web applications with ease. Built on Vue.js, Nuxt streamlines development with its powerful features like server-side rendering (SSR), static site generation (SSG), and seamless routing.

With a robust module ecosystem, intuitive directory structure, and built-in support for TypeScript, Nuxt enables you to craft high-performance websites and apps while focusing on delivering exceptional user experiences. Whether you’re building a blog, e-commerce site, or complex enterprise application, Nuxt simplifies the process so you can code less and innovate more.

Now, you know a little bit more about the Internet Computer. Happy Coding! 🚀

Don’t forget to register to our newsletter and we will keep you updated about the course development progress.